test(web): add eslint and PR lint validation

web/src/routes/Camera.jsx

@@ -6,31 +6,26 @@ import Heading from '../components/Heading';
 import Link from '../components/Link';
 import SettingsIcon from '../icons/Settings';
 import Switch from '../components/Switch';
-import { route } from 'preact-router';
 import { usePersistence } from '../context';
-import { useCallback, useContext, useMemo, useState } from 'preact/hooks';
+import { useCallback, useMemo, useState } from 'preact/hooks';
 import { useApiHost, useConfig } from '../api';
 
+const emptyObject = Object.freeze({});
+
 export default function Camera({ camera }) {
   const { data: config } = useConfig();
   const apiHost = useApiHost();
   const [showSettings, setShowSettings] = useState(false);
 
-  if (!config) {
-    return <div>{`No camera named ${camera}`}</div>;
-  }
-
-  const cameraConfig = config.cameras[camera];
-  const [options, setOptions, optionsLoaded] = usePersistence(`${camera}-feed`, Object.freeze({}));
-
-  const objectCount = useMemo(() => cameraConfig.objects.track.length, [cameraConfig]);
+  const cameraConfig = config?.cameras[camera];
+  const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
 
   const handleSetOption = useCallback(
     (id, value) => {
       const newOptions = { ...options, [id]: value };
       setOptions(newOptions);
     },
-    [options]
+    [options, setOptions]
   );
 
   const searchParams = useMemo(
@@ -41,7 +36,7 @@ export default function Camera({ camera }) {
           return memo;
         }, [])
       ),
-    [camera, options]
+    [options]
   );
 
   const handleToggleSettings = useCallback(() => {
@@ -52,27 +47,27 @@ export default function Camera({ camera }) {
     <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
       <div className="flex space-x-3">
         <Switch checked={options['bbox']} id="bbox" onChange={handleSetOption} />
-        <span class="inline-flex">Bounding box</span>
+        <span className="inline-flex">Bounding box</span>
       </div>
       <div className="flex space-x-3">
         <Switch checked={options['timestamp']} id="timestamp" onChange={handleSetOption} />
-        <span class="inline-flex">Timestamp</span>
+        <span className="inline-flex">Timestamp</span>
       </div>
       <div className="flex space-x-3">
         <Switch checked={options['zones']} id="zones" onChange={handleSetOption} />
-        <span class="inline-flex">Zones</span>
+        <span className="inline-flex">Zones</span>
       </div>
       <div className="flex space-x-3">
         <Switch checked={options['mask']} id="mask" onChange={handleSetOption} />
-        <span class="inline-flex">Masks</span>
+        <span className="inline-flex">Masks</span>
       </div>
       <div className="flex space-x-3">
         <Switch checked={options['motion']} id="motion" onChange={handleSetOption} />
-        <span class="inline-flex">Motion boxes</span>
+        <span className="inline-flex">Motion boxes</span>
       </div>
       <div className="flex space-x-3">
         <Switch checked={options['regions']} id="regions" onChange={handleSetOption} />
-        <span class="inline-flex">Regions</span>
+        <span className="inline-flex">Regions</span>
       </div>
       <Link href={`/cameras/${camera}/editor`}>Mask & Zone creator</Link>
     </div>
@@ -81,14 +76,12 @@ export default function Camera({ camera }) {
   return (
     <div className="space-y-4">
       <Heading size="2xl">{camera}</Heading>
-      {optionsLoaded ? (
-        <div>
-          <AutoUpdatingCameraImage camera={camera} searchParams={searchParams} />
-        </div>
-      ) : null}
+      <div>
+        <AutoUpdatingCameraImage camera={camera} searchParams={searchParams} />
+      </div>
 
       <Button onClick={handleToggleSettings} type="text">
-        <span class="w-5 h-5">
+        <span className="w-5 h-5">
           <SettingsIcon />
         </span>{' '}
         <span>{showSettings ? 'Hide' : 'Show'} Options</span>