Properly configure linting and fix lint errors

Also adds tsc as command so it can more easily be used in run configurations.

frontend/package.json

@@ -5,7 +5,9 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "test": "vite-jest"
+    "test": "vite-jest",
+    "eslint": "eslint src/**/*.{ts,tsx}",
+    "tsc": "tsc"
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.0.15",
@@ -58,9 +60,25 @@
     "vite": "^2.5.2"
   },
   "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    },
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "rules": {
+      "@typescript-eslint/no-floating-promises": "error",
+      "@typescript-eslint/promise-function-async": "error",
+      "require-await": "off",
+      "@typescript-eslint/require-await": "error",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-unused-vars": "error",
+      "react-hooks/exhaustive-deps": "error"
+    }
   }
 }

frontend/src/MakerApp.tsx

@@ -23,17 +23,7 @@ import CurrencyInputField from "./components/CurrencyInputField";
 import CurrentPrice from "./components/CurrentPrice";
 import useLatestEvent from "./components/Hooks";
 import OrderTile from "./components/OrderTile";
-import {
-    Cfd,
-    intoCfd,
-    intoOrder,
-    Order,
-    Position,
-    PriceInfo,
-    State,
-    StateGroupKey,
-    WalletInfo,
-} from "./components/Types";
+import { Cfd, intoCfd, intoOrder, Order, PriceInfo, StateGroupKey, WalletInfo } from "./components/Types";
 import Wallet from "./components/Wallet";
 import { CfdSellOrderPayload, postCfdSellOrderRequest } from "./MakerClient";
 

frontend/src/components/Hooks.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useEventSourceListener } from "react-sse-hooks";
 
 export default function useLatestEvent<T>(

frontend/src/components/cfdtables/CfdTable.tsx

@@ -155,7 +155,7 @@ export function CfdTable(
                             colorScheme={colorSchemaForAction(action)}
                             aria-label={action}
                             icon={iconForAction(action)}
-                            onClick={async () => postAction(order_id, action)}
+                            onClick={() => postAction(order_id, action)}
                             isLoading={isActioning}
                         />);
                     });
@@ -164,7 +164,7 @@ export function CfdTable(
                 },
             },
         ],
-        [],
+        [isActioning, postAction],
     );
 
     // if we mark certain columns only as hidden, they are still around and we can render them in the sub-row
@@ -337,7 +337,7 @@ export function Table({ columns, tableData, hiddenColumns, renderDetails }: Tabl
 }
 
 async function doPostAction(id: string, action: string) {
-    let res = await fetch(
+    await fetch(
         `/api/cfd/${id}/${action}`,
         { method: "POST", credentials: "include" },
     );