Fixing linting issues

.eslintrc.json

@@ -7,6 +7,7 @@
     "@nrwl/nx"
   ],
   "extends": [
+    "plugin:react/recommended",
     "eslint:recommended",
     "google"
   ],
@@ -19,6 +20,20 @@
         "*.jsx"
       ],
       "rules": {
+        "react/jsx-indent-props": [
+          "error",
+          "first"
+        ],
+        "indent": [
+          "error",
+          2,
+          {
+            "SwitchCase": 1,
+            "ignoredNodes": [
+              "JSXAttribute"
+            ]
+          }
+        ],
         "@nrwl/nx/enforce-module-boundaries": [
           "error",
           {
@@ -42,6 +57,7 @@
         "*.tsx"
       ],
       "extends": [
+        "plugin:react/recommended",
         "plugin:@nrwl/nx/typescript",
         "eslint:recommended",
         "google"
@@ -79,6 +95,7 @@
         "*.jsx"
       ],
       "extends": [
+        "plugin:react/recommended",
         "plugin:@nrwl/nx/javascript",
         "eslint:recommended",
         "google"

apps/ove-bridge-ui/.eslintrc.json

@@ -1,17 +1,48 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "extends": [
+    "plugin:@nrwl/nx/react",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {
+        "react/jsx-indent-props": [
+          "error",
+          "first"
+        ],
+        "indent": [
+          "error",
+          2,
+          {
+            "SwitchCase": 1,
+            "ignoredNodes": [
+              "JSXAttribute"
+            ]
+          }
+        ]
+      }
     },
     {
-      "files": ["*.ts", "*.tsx"],
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
       "rules": {}
     },
     {
-      "files": ["*.js", "*.jsx"],
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
       "rules": {}
     }
   ]

apps/ove-bridge-ui/src/app/app.spec.tsx

@@ -1,9 +1,8 @@
+import App from "./app";
+import React from "react";
 import { render } from "@testing-library/react";
-
 import { BrowserRouter } from "react-router-dom";
 
-import App from "./app";
-
 describe("App", () => {
   it("should render successfully", () => {
     const { baseElement } = render(

apps/ove-bridge-ui/src/app/app.tsx

@@ -1,6 +1,8 @@
 import Nav from "./nav";
+import React from "react";
 import Router from "./router";
 // IGNORE PATH - dependency removed at runtime
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import {
   type OutboundAPI,
   type OutboundAPIChannels

apps/ove-bridge-ui/src/app/nav.tsx

@@ -1,4 +1,7 @@
+import React from "react";
 import Logo from "../assets/icon.svg";
+// TODO: investigate circular dependency
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { Nav as Navigation } from "@ove/ui-components";
 import { NavigationMenuLink } from "@ove/ui-base-components";
 

apps/ove-bridge-ui/src/app/router.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Home from "../pages/home/home";
 import Hardware from "../pages/hardware/hardware";
 import { Route, Routes } from "react-router-dom";

apps/ove-bridge-ui/src/env.ts

@@ -1,3 +1,3 @@
 import { Logger } from "@ove/ove-logging";
 
-export const logger = Logger("ove-bridge-ui");
+export const logger = Logger("ove-bridge-ui");

apps/ove-bridge-ui/src/main.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from "react";
+import React, { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 

apps/ove-bridge-ui/src/pages/hardware/components/auth/auth.tsx

@@ -1,7 +1,9 @@
 import { type Mode } from "../../utils";
 import { useForm } from "react-hook-form";
 import { type Device } from "@ove/ove-types";
-import { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
+// TODO: investigate circular dependency
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { Dialog, Snackbar, useSnackbar } from "@ove/ui-components";
 
 import styles from "./auth.module.scss";
@@ -17,9 +19,9 @@ const Auth = forwardRef<HTMLDialogElement, AuthProps>(({
 }, ref) => {
   const [status, setStatus] = useState<boolean | null>(null);
   const { notification, isVisible } = useSnackbar();
-  const {register, handleSubmit} = useForm<{pin: string}>();
+  const { register, handleSubmit } = useForm<{ pin: string }>();
 
-  const handleAuth = async ({pin}: {pin: string}) => {
+  const handleAuth = async ({ pin }: { pin: string }) => {
     if (device === null) throw new Error("Cannot ID null device");
     const registered =
       await window.bridge.registerAuth({ id: device.id, pin });
@@ -40,7 +42,8 @@ const Auth = forwardRef<HTMLDialogElement, AuthProps>(({
   return <Dialog ref={ref} title="Authorise Device"
                  closeDialog={() => setMode("overview")}>
     <h2>Authorise: {device?.id}</h2>
-    <form method="post" className={styles.form} onSubmit={handleSubmit(handleAuth)}>
+    <form method="post" className={styles.form}
+          onSubmit={handleSubmit(handleAuth)}>
       <label htmlFor="pin">Enter PIN:</label>
       <input {...register("pin")} type="text" />
       <button type="submit">Authorise</button>
@@ -50,4 +53,6 @@ const Auth = forwardRef<HTMLDialogElement, AuthProps>(({
   </Dialog>;
 });
 
+Auth.displayName = "Auth";
+
 export default Auth;

apps/ove-bridge-ui/src/pages/hardware/components/devices/devices.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { type Device, type ServiceType } from "@ove/ove-types";
 import {
   Display,
@@ -8,12 +8,14 @@ import {
 } from "react-bootstrap-icons";
 import EditDevice from "../edit-device/edit-device";
 import Auth from "../auth/auth";
-import { Mode } from "../../utils";
-
-import styles from "./devices.module.scss";
+import { type Mode } from "../../utils";
 import { assert } from "@ove/ove-utils";
+// TODO: investigate circular dependency
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { useDialog } from "@ove/ui-components";
 
+import styles from "./devices.module.scss";
+
 type DeviceCardProps = {
   device: Device
   setMode: (mode: Mode) => void
@@ -53,8 +55,16 @@ const Devices = () => {
   const [devices, setDevices] = useState<Device[]>([]);
   const [mode, setMode] = useState<Mode>("overview");
   const [id, setId] = useState<string | null>(null);
-  const { ref: authRef, closeDialog: closeAuthDialog, openDialog: openAuthDialog } = useDialog();
-  const { ref: editRef, closeDialog: closeEditDialog, openDialog: openEditDialog } = useDialog();
+  const {
+    ref: authRef,
+    closeDialog: closeAuthDialog,
+    openDialog: openAuthDialog
+  } = useDialog();
+  const {
+    ref: editRef,
+    closeDialog: closeEditDialog,
+    openDialog: openEditDialog
+  } = useDialog();
 
   const close = useCallback(() => setMode("overview"), []);
 
@@ -78,18 +88,20 @@ const Devices = () => {
         openAuthDialog();
         break;
     }
-  }, [mode, close]);
+  }, [mode, close, closeAuthDialog,
+    closeEditDialog, openAuthDialog, openEditDialog]);
 
   return <section className={styles.body}>
     <div className={styles.main}>
       <h1 className={styles.header}>Devices</h1>
       <EditDevice
-          ref={editRef}
-          setMode={mode => setMode(mode)}
-          device={id === null ? null : (devices.find(({ id: deviceId }) =>
-            deviceId === id) ?? null)} />
+        ref={editRef}
+        setMode={mode => setMode(mode)}
+        device={id === null ? null : (devices.find(({ id: deviceId }) =>
+          deviceId === id) ?? null)} />
       <Auth ref={authRef}
-            device={id === null ? null : assert(devices.find(({ id: deviceId }) => deviceId === id))}
+            device={id === null ? null :
+              assert(devices.find(({ id: deviceId }) => deviceId === id))}
             setMode={mode => setMode(mode)} />
       <div className={styles["devices-container"]}>
         {devices.map(device => <DeviceCard

apps/ove-bridge-ui/src/pages/hardware/components/edit-device/edit-device.tsx

@@ -1,5 +1,5 @@
-import {
-  BaseSyntheticEvent,
+import React, {
+  type BaseSyntheticEvent,
   forwardRef, useCallback,
   useState
 } from "react";
@@ -9,12 +9,14 @@ import {
   type NativeEvent,
   type ServiceType
 } from "@ove/ove-types";
-
-import styles from "./edit-device.module.scss";
 import { assert } from "@ove/ove-utils";
 import { useForm } from "react-hook-form";
+// TODO: investigate circular dependency
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { Dialog } from "@ove/ui-components";
 
+import styles from "./edit-device.module.scss";
+
 type EditDeviceProps = {
   setMode: (mode: Mode) => void
   device: Device | null
@@ -32,20 +34,28 @@ type Form = {
   mac: string
 }
 
-const saveDevice_ = (device: Device | null, setMode: (mode: Mode) => void, type: ServiceType, data: Form, e: BaseSyntheticEvent<object> | undefined) => {
+const saveDevice_ = (
+  device: Device | null,
+  setMode: (mode: Mode) => void,
+  type: ServiceType,
+  data: Form,
+  e: BaseSyntheticEvent<object> | undefined
+) => {
   const id = device?.id ?? assert(data.id);
 
   if (id === "" || id.length < 1) return false;
-  if ((e?.nativeEvent as unknown as NativeEvent)?.submitter?.name === "delete") {
-    window.bridge.removeDevice({deviceId: assert(device).id})
+  if ((e?.nativeEvent as unknown as NativeEvent)
+    ?.submitter?.name === "delete") {
+    window.bridge.removeDevice({ deviceId: assert(device).id })
       .catch(console.error).then(() => setMode("overview"));
     return;
   }
   let auth = null;
 
   if (type === "node") {
     auth = false;
-  } else if (data.authUsername !== undefined && data.authPassword !== undefined) {
+  } else if (data.authUsername !== undefined &&
+    data.authPassword !== undefined) {
     auth = { username: data.authUsername, password: data.authPassword };
   }
 
@@ -73,9 +83,14 @@ const EditDevice = forwardRef<HTMLDialogElement, EditDeviceProps>(({
   device,
   setMode
 }, ref) => {
-  const [type, setType] = useState<ServiceType>(device?.type ?? "node");
+  const [type, setType] =
+    useState<ServiceType>(device?.type ?? "node");
   const { register, handleSubmit } = useForm<Form>();
-  const saveDevice = useCallback((data: Form, e: BaseSyntheticEvent<object> | undefined) => saveDevice_(device, setMode, type, data, e), [device, setMode, type]);
+  const saveDevice = useCallback((
+    data: Form,
+    e: BaseSyntheticEvent<object> | undefined
+  ) =>
+    saveDevice_(device, setMode, type, data, e), [device, setMode, type]);
 
   return <Dialog ref={ref} title="Edit Device"
                  closeDialog={() => setMode("overview")}>
@@ -126,4 +141,6 @@ const EditDevice = forwardRef<HTMLDialogElement, EditDeviceProps>(({
   </Dialog>;
 });
 
+EditDevice.displayName = "EditDevice";
+
 export default EditDevice;

apps/ove-bridge-ui/src/pages/hardware/hardware.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Devices from "./components/devices/devices";
 
 const Hardware = () => <main>

apps/ove-bridge-ui/src/pages/home/components/auto-mode-configuration/auto-mode-configuration.tsx

@@ -1,7 +1,7 @@
+import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import styles from "./auto-mode-configuration.module.scss";
-import { useEffect } from "react";
 
 export type AutoModeConfigurationProps = {
   closeDialog: () => void
@@ -25,7 +25,7 @@ const AutoModeConfiguration = ({ closeDialog }: AutoModeConfigurationProps) => {
       setValue("end" as const, autoSchedule?.sleep ?? undefined);
       setValue("days" as const, autoSchedule?.schedule ?? defaultDaySelection);
     });
-  }, []);
+  }, [setValue]);
 
   const onSubmit = ({ start, end, days }: Form) => {
     window.bridge.setAutoSchedule({

apps/ove-bridge-ui/src/pages/home/components/configuration/configuration.tsx

@@ -1,7 +1,7 @@
 import { useForm } from "react-hook-form";
 import { useEnv, useSocket } from "./hooks";
-import { type BaseSyntheticEvent } from "react";
 import { type NativeEvent } from "@ove/ove-types";
+import React, { type BaseSyntheticEvent } from "react";
 
 import styles from "./configuration.module.scss";