chore: add hooks ESLint plugin

Author: algreasley

packages/client/eslint.config.js

@@ -1,5 +1,6 @@
 import js from "@eslint/js"
 import react from "eslint-plugin-react"
+import hooks from "eslint-plugin-react-hooks"
 import simpleImportSort from "eslint-plugin-simple-import-sort"
 import globals from "globals"
 import tseslint from "typescript-eslint"
@@ -15,10 +16,15 @@ export default [
   ...tseslint.configs.recommended,
   {
     plugins: {
+      // https://github.com/lydell/eslint-plugin-simple-import-sort
       "simple-import-sort": simpleImportSort,
+      // https://typescript-eslint.io/getting-started/
       "@typescript-eslint": tseslint.plugin,
-      // ref https://github.com/jsx-eslint/eslint-plugin-react
+      // https://github.com/jsx-eslint/eslint-plugin-react
       react,
+      // https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks
+      // compat with ESLint v9, see https://github.com/facebook/react/issues/28313
+      "react-hooks": hooks,
     },
     languageOptions: {
       parser: tseslint.parser,
@@ -69,6 +75,9 @@ export default [
       // ref https://github.com/lydell/eslint-plugin-simple-import-sort#usage
       "simple-import-sort/imports": "error",
       "simple-import-sort/exports": "error",
+
+      // as hooks plugin does not play well with Flat Config right now, do this
+      ...hooks.configs.recommended.rules,
     },
   },
   {

packages/client/package-lock.json

@@ -25,7 +25,7 @@
   },
   "scripts": {
     "_runLocal": "cross-env VITE_HYDRA_URL=ws://localhost:8929 $npm_config_runcmd",
-    "start": "cross-env TARGET=web vite",
+    "start": "vite",
     "start:local": "npm run _runLocal --runcmd=\"TARGET=web vite\"",
     "typecheck": "tsc",
     "lint": "eslint src --max-warnings 0",
@@ -36,8 +36,8 @@
     "format:check": "npm run _format -- --check",
     "test": "vitest",
     "verify": "npm run typecheck && npm run lint && npm run format:check && npm run test -- run",
-    "build": "cross-env TARGET=web vite build",
-    "serve": "cross-env vite preview",
+    "build": "vite build",
+    "serve": "vite preview",
     "openfin:dev": "cross-env TARGET=openfin vite",
     "openfin:local": "npm run _runLocal --runcmd=\"TARGET=openfin vite\"",
     "_openfin:run": "cross-env-shell \"wait-on -l $npm_config_manifest_url && openfin -l -c $npm_config_manifest_url\"",
@@ -128,6 +128,7 @@
     "csstype": "^3.0.2",
     "eslint": "8.57.0",
     "eslint-plugin-react": "7.34.3",
+    "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-simple-import-sort": "12.1.0",
     "globals": "15.6.0",
     "jest-styled-components": "7.2.0",

packages/client/package.json

@@ -116,6 +116,7 @@ export const Tooltip = ({ svgRef }: { svgRef: RefObject<SVGSVGElement> }) => {
   const tooltipDivRef = useDivRef()
 
   const tooltipPositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+
   useEffect(() => {
     if (!svgRef.current) return
     const svg = svgRef.current
@@ -139,7 +140,7 @@ export const Tooltip = ({ svgRef }: { svgRef: RefObject<SVGSVGElement> }) => {
       svg.removeEventListener("pointermove", onMove)
       svg.removeEventListener("pointerleave", onLeave)
     }
-  }, [svgRef])
+  }, [svgRef, tooltipDivRef])
 
   useLayoutEffect(() => {
     // We have to correct the position of the tooltip when it overflows

packages/client/src/client/App/Analytics/ProfitAndLoss/LineChart/Tooltip.tsx

@@ -7,7 +7,7 @@ import { ACCEPTED_QUOTE_STATE } from "@/generated/TradingGateway"
 import {
   cancelCreditRfq$,
   removeRfqs,
-  useCreditDealerById,
+  useDealerNameById,
 } from "@/services/credit"
 import { RfqDetails } from "@/services/credit/creditRfqs"
 
@@ -49,11 +49,7 @@ export const AcceptedFooterContent = ({
   rfqId: number
   acceptedDealerId?: number
 }) => {
-  const dealerName =
-    (acceptedDealerId !== undefined
-      ? useCreditDealerById(acceptedDealerId)
-      : undefined
-    )?.name ?? "Unknown Dealer"
+  const dealerName = useDealerNameById(acceptedDealerId)
 
   return (
     <>

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardFooter.tsx

@@ -67,7 +67,7 @@ const ThemeStorageSwitch = ({
               />
             </IconContainer>
           }
-          handleDiameter={props.handleDiameter}
+          handleDiameter={props.handleDiameter || 15}
           offColor={theme.primary.base}
           offHandleColor={theme.accents.primary.base}
           onColor={theme.primary[1]}
@@ -83,8 +83,4 @@ const ThemeStorageSwitch = ({
   )
 }
 
-ThemeStorageSwitch.defaultProps = {
-  handleDiameter: 15,
-}
-
 export default withTheme(ThemeStorageSwitch)

packages/client/src/client/App/Header/theme-switcher/ThemeSwitcher.tsx

@@ -12,5 +12,5 @@ export const useMoveNextOnEnter = (onNext: () => void) => {
     return () => {
       window.removeEventListener("keydown", onKeyDown)
     }
-  }, [])
+  }, [onNext])
 }

packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/useMouseNextOnEnter.ts

@@ -32,11 +32,14 @@ export const [useCreditDealers, creditDealers$] = bind(
   ),
 )
 
-export const [useCreditDealerById, creditDealerById$] = bind(
-  (dealerId: number) =>
-    creditDealers$.pipe(
-      map((dealers) => dealers.find((dealer) => dealer.id === dealerId)),
+export const [useDealerNameById, _] = bind((dealerId: number | undefined) =>
+  creditDealers$.pipe(
+    map(
+      (dealers) =>
+        dealers.find((dealer) => dealer.id === dealerId)?.name ||
+        "Unknown Dealer",
     ),
+  ),
 )
 
 export const [useAdaptiveDealerId, adaptiveDealerId$] = bind(

packages/client/src/services/credit/creditDealers.ts

@@ -353,7 +353,8 @@ const setConfig: (env: ConfigEnv) => UserConfigExport = ({ mode }) => {
 
   const buildTarget: BuildTarget = (process.env.TARGET as BuildTarget) || "web"
   const isDev = mode === "development"
-  // quick look-up (not using isServe atm, but expecting to optimise plugins later)
+  // quick look-up (not using isServe = command === "serve" atm, command from 2nd arg of setConfig)
+  // but expecting to optimise plugins later)
   // - vite ..         isDev: true   isServe: true (building with esbuild AND serving)
   // - vite preview .. isDev: false  isServe: true (just running static, so don't need any plugins etc.)
   // - vitest ..       isDev: false  isServe: true (still need the plugins to e.g. switch in openfin code)