test(web): add eslint and PR lint validation

2024-11-21 19:07:46 +01:00 · 2021-02-09 11:35:33 -08:00 · 2021-02-09 11:35:33 -08:00 · daa759cc55
commit daa759cc55
parent 513a099c24
33 changed files with 5190 additions and 505 deletions
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@ -0,0 +1,32 @@
+name: On pull request
+
+on: pull_request
+
+jobs:
+  web_lint:
+    name: Web - Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: 14.x
+      - run: npm install
+        working-directory: ./web
+      - name: Lint
+        run: npm run lint:cmd
+        working-directory: ./web
+
+  web_build:
+    name: Web - Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: 14.x
+      - run: npm install
+        working-directory: ./web
+      - name: Build
+        run: npm run build
+        working-directory: ./web
--- a/web/.eslintignore
+++ b/web/.eslintignore
@ -0,0 +1,2 @@
+build/*
+node_modules/*
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@ -0,0 +1,125 @@
+module.exports = {
+  parser: '@babel/eslint-parser',
+
+  parserOptions: {
+    sourceType: 'module',
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+  },
+
+  extends: ['prettier', 'preact', 'plugin:import/react'],
+  plugins: ['import'],
+
+  env: {
+    es6: true,
+    node: true,
+    browser: true,
+  },
+
+  rules: {
+    'constructor-super': 'error',
+    'default-case': ['error', { commentPattern: '^no default$' }],
+    'handle-callback-err': ['error', '^(err|error)$'],
+    'new-cap': ['error', { newIsCap: true, capIsNew: false }],
+    'no-alert': 'error',
+    'no-array-constructor': 'error',
+    'no-caller': 'error',
+    'no-case-declarations': 'error',
+    'no-class-assign': 'error',
+    'no-cond-assign': 'error',
+    'no-console': 'error',
+    'no-const-assign': 'error',
+    'no-control-regex': 'error',
+    'no-debugger': 'error',
+    'no-delete-var': 'error',
+    'no-dupe-args': 'error',
+    'no-dupe-class-members': 'error',
+    'no-dupe-keys': 'error',
+    'no-duplicate-case': 'error',
+    'no-duplicate-imports': 'error',
+    'no-empty-character-class': 'error',
+    'no-empty-pattern': 'error',
+    'no-eval': 'error',
+    'no-ex-assign': 'error',
+    'no-extend-native': 'error',
+    'no-extra-bind': 'error',
+    'no-extra-boolean-cast': 'error',
+    'no-fallthrough': 'error',
+    'no-floating-decimal': 'error',
+    'no-func-assign': 'error',
+    'no-implied-eval': 'error',
+    'no-inner-declarations': ['error', 'functions'],
+    'no-invalid-regexp': 'error',
+    'no-irregular-whitespace': 'error',
+    'no-iterator': 'error',
+    'no-label-var': 'error',
+    'no-labels': ['error', { allowLoop: false, allowSwitch: false }],
+    'no-lone-blocks': 'error',
+    'no-loop-func': 'error',
+    'no-multi-str': 'error',
+    'no-native-reassign': 'error',
+    'no-negated-in-lhs': 'error',
+    'no-new': 'error',
+    'no-new-func': 'error',
+    'no-new-object': 'error',
+    'no-new-require': 'error',
+    'no-new-symbol': 'error',
+    'no-new-wrappers': 'error',
+    'no-obj-calls': 'error',
+    'no-octal': 'error',
+    'no-octal-escape': 'error',
+    'no-path-concat': 'error',
+    'no-proto': 'error',
+    'no-redeclare': 'error',
+    'no-regex-spaces': 'error',
+    'no-return-assign': ['error', 'except-parens'],
+    'no-script-url': 'error',
+    'no-self-assign': 'error',
+    'no-self-compare': 'error',
+    'no-sequences': 'error',
+    'no-shadow-restricted-names': 'error',
+    'no-sparse-arrays': 'error',
+    'no-this-before-super': 'error',
+    'no-throw-literal': 'error',
+    'no-trailing-spaces': 'error',
+    'no-undef': 'error',
+    'no-undef-init': 'error',
+    'no-unexpected-multiline': 'error',
+    'no-unmodified-loop-condition': 'error',
+    'no-unneeded-ternary': ['error', { defaultAssignment: false }],
+    'no-unreachable': 'error',
+    'no-unsafe-finally': 'error',
+    'no-unused-vars': ['error', { vars: 'all', args: 'none', ignoreRestSiblings: true }],
+    'no-useless-call': 'error',
+    'no-useless-computed-key': 'error',
+    'no-useless-concat': 'error',
+    'no-useless-constructor': 'error',
+    'no-useless-escape': 'error',
+    'no-var': 'error',
+    'no-with': 'error',
+    'prefer-const': 'error',
+    'prefer-rest-params': 'error',
+    'use-isnan': 'error',
+    'valid-typeof': 'error',
+    camelcase: 'off',
+    eqeqeq: ['error', 'allow-null'],
+    indent: ['error', 2],
+    quotes: ['error', 'single', 'avoid-escape'],
+    radix: 'error',
+    yoda: ['error', 'never'],
+
+    'import/no-unresolved': 'error',
+
+    'react-hooks/exhaustive-deps': 'error',
+  },
+
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx'],
+      },
+    },
+  },
+};
--- a/web/babel.config.js
+++ b/web/babel.config.js
@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@babel/preset-env'],
+  plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'preact.h' }]],
+};
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -4,20 +4,32 @@
  "scripts": {
    "start": "cross-env SNOWPACK_PUBLIC_API_HOST=http://localhost:5000 snowpack dev",
    "prebuild": "rimraf build",
-    "build": "cross-env NODE_ENV=production SNOWPACK_MODE=production SNOWPACK_PUBLIC_API_HOST='' snowpack build"
+    "build": "cross-env NODE_ENV=production SNOWPACK_MODE=production SNOWPACK_PUBLIC_API_HOST='' snowpack build",
+    "lint": "npm run lint:cmd -- --fix",
+    "lint:cmd": "eslint ./ --ext .jsx,.js"
  },
  "dependencies": {
+    "idb-keyval": "^5.0.2",
+    "immer": "^8.0.1",
+    "preact": "^10.5.9",
+    "preact-async-route": "^2.2.1",
+    "preact-router": "^3.2.1"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.12.13",
+    "@babel/plugin-transform-react-jsx": "^7.12.13",
+    "@babel/preset-env": "^7.12.13",
    "@prefresh/snowpack": "^3.0.1",
    "@snowpack/plugin-postcss": "^1.1.0",
    "autoprefixer": "^10.2.1",
    "cross-env": "^7.0.3",
-    "idb-keyval": "^5.0.2",
-    "immer": "^8.0.1",
+    "eslint": "^7.19.0",
+    "eslint-config-preact": "^1.1.3",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-import": "^2.22.1",
    "postcss": "^8.2.2",
    "postcss-cli": "^8.3.1",
-    "preact": "^10.5.9",
-    "preact-async-route": "^2.2.1",
-    "preact-router": "^3.2.1",
+    "prettier": "^2.2.1",
    "rimraf": "^3.0.2",
    "snowpack": "^3.0.11",
    "snowpack-plugin-hash": "^0.14.2",
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@ -1,8 +1,3 @@
-'use strict';
-
 module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer'),
-  ],
+  plugins: [require('tailwindcss'), require('autoprefixer')],
 };
--- a/web/prettier.config.js
+++ b/web/prettier.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  useTabs: false,
+};
--- a/web/snowpack.config.js
+++ b/web/snowpack.config.js
@ -1,5 +1,3 @@
-'use strict';
-
 module.exports = {
  mount: {
    public: { url: '/', static: true },
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@ -6,15 +6,15 @@ import AppBar from './components/AppBar';
 import Cameras from './routes/Cameras';
 import { Router } from 'preact-router';
 import Sidebar from './Sidebar';
-import Api, { FetchStatus, useConfig } from './api';
 import { DarkModeProvider, DrawerProvider } from './context';
+import { FetchStatus, useConfig } from './api';

 export default function App() {
-  const { data, status } = useConfig();
+  const { status } = useConfig();
  return (
    <DarkModeProvider>
      <DrawerProvider>
-        <div class="w-full">
+        <div className="w-full">
          <AppBar title="Frigate" />
          {status !== FetchStatus.LOADED ? (
            <div className="flex flex-grow-1 min-h-screen justify-center items-center">
--- a/web/src/Sidebar.jsx
+++ b/web/src/Sidebar.jsx
@ -3,8 +3,8 @@ import LinkedLogo from './components/LinkedLogo';
 import { Match } from 'preact-router/match';
 import { memo } from 'preact/compat';
 import { useConfig } from './api';
+import { useMemo } from 'preact/hooks';
 import NavigationDrawer, { Destination, Separator } from './components/NavigationDrawer';
-import { useCallback, useMemo } from 'preact/hooks';

 export default function Sidebar() {
  const { data: config } = useConfig();
@ -42,9 +42,9 @@ export default function Sidebar() {
  );
 }

-const Header = memo(function Header() {
+const Header = memo(() => {
  return (
-    <div class="text-gray-500">
+    <div className="text-gray-500">
      <LinkedLogo />
    </div>
  );
--- a/web/src/api/index.jsx
+++ b/web/src/api/index.jsx
@ -1,6 +1,6 @@
 import { h, createContext } from 'preact';
 import produce from 'immer';
-import { useCallback, useContext, useEffect, useMemo, useRef, useReducer, useState } from 'preact/hooks';
+import { useContext, useEffect, useReducer } from 'preact/hooks';

 export const ApiHost = createContext(import.meta.env.SNOWPACK_PUBLIC_API_HOST || window.baseUrl || '');

@ -21,17 +21,17 @@ export default Api;
 function reducer(state, { type, payload, meta }) {
  switch (type) {
  case 'REQUEST': {
-      const { url, request } = payload;
+    const { url, fetchId } = payload;
    const data = state.queries[url]?.data || null;
    return produce(state, (draftState) => {
-        draftState.queries[url] = { status: FetchStatus.LOADING, data };
+      draftState.queries[url] = { status: FetchStatus.LOADING, data, fetchId };
    });
  }

  case 'RESPONSE': {
-      const { url, ok, data } = payload;
+    const { url, ok, data, fetchId } = payload;
    return produce(state, (draftState) => {
-        draftState.queries[url] = { status: ok ? FetchStatus.LOADED : FetchStatus.ERROR, data };
+      draftState.queries[url] = { status: ok ? FetchStatus.LOADED : FetchStatus.ERROR, data, fetchId };
    });
  }

@ -45,8 +45,8 @@ export const ApiProvider = ({ children }) => {
  return <Api.Provider value={{ state, dispatch }}>{children}</Api.Provider>;
 };

-function shouldFetch(state, url, forceRefetch = false) {
-  if (forceRefetch || !(url in state.queries)) {
+function shouldFetch(state, url, fetchId = null) {
+  if ((fetchId && url in state.queries && state.queries[url].fetchId !== fetchId) || !(url in state.queries)) {
    return true;
  }
  const { status } = state.queries[url];
@ -54,23 +54,23 @@ function shouldFetch(state, url, forceRefetch = false) {
  return status !== FetchStatus.LOADING && status !== FetchStatus.LOADED;
 }

-export function useFetch(url, forceRefetch) {
+export function useFetch(url, fetchId) {
  const { state, dispatch } = useContext(Api);

  useEffect(() => {
-    if (!shouldFetch(state, url, forceRefetch)) {
+    if (!shouldFetch(state, url, fetchId)) {
      return;
    }

-    async function fetchConfig() {
-      await dispatch({ type: 'REQUEST', payload: { url } });
+    async function fetchData() {
+      await dispatch({ type: 'REQUEST', payload: { url, fetchId } });
      const response = await fetch(`${state.host}${url}`);
      const data = await response.json();
-      await dispatch({ type: 'RESPONSE', payload: { url, ok: response.ok, data } });
+      await dispatch({ type: 'RESPONSE', payload: { url, ok: response.ok, data, fetchId } });
    }

-    fetchConfig();
-  }, [url, forceRefetch]);
+    fetchData();
+  }, [url, fetchId, state, dispatch]);

  if (!(url in state.queries)) {
    return { data: null, status: FetchStatus.NONE };
@ -83,26 +83,26 @@ export function useFetch(url, forceRefetch) {
 }

 export function useApiHost() {
-  const { state, dispatch } = useContext(Api);
+  const { state } = useContext(Api);
  return state.host;
 }

-export function useEvents(searchParams, forceRefetch) {
+export function useEvents(searchParams, fetchId) {
  const url = `/api/events${searchParams ? `?${searchParams.toString()}` : ''}`;
-  return useFetch(url, forceRefetch);
+  return useFetch(url, fetchId);
 }

-export function useEvent(eventId, forceRefetch) {
+export function useEvent(eventId, fetchId) {
  const url = `/api/events/${eventId}`;
-  return useFetch(url, forceRefetch);
+  return useFetch(url, fetchId);
 }

-export function useConfig(searchParams, forceRefetch) {
+export function useConfig(searchParams, fetchId) {
  const url = `/api/config${searchParams ? `?${searchParams.toString()}` : ''}`;
-  return useFetch(url, forceRefetch);
+  return useFetch(url, fetchId);
 }

-export function useStats(searchParams, forceRefetch) {
+export function useStats(searchParams, fetchId) {
  const url = `/api/stats${searchParams ? `?${searchParams.toString()}` : ''}`;
-  return useFetch(url, forceRefetch);
+  return useFetch(url, fetchId);
 }
--- a/web/src/components/AppBar.jsx
+++ b/web/src/components/AppBar.jsx
@ -12,16 +12,14 @@ import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';

 // We would typically preserve these in component state
 // But need to avoid too many re-renders
-let ticking = false;
 let lastScrollY = window.scrollY;

 export default function AppBar({ title }) {
  const [show, setShow] = useState(true);
  const [atZero, setAtZero] = useState(window.scrollY === 0);
-  const [_, setDrawerVisible] = useState(true);
  const [showMoreMenu, setShowMoreMenu] = useState(false);
-  const { currentMode, persistedMode, setDarkMode } = useDarkMode();
-  const { showDrawer, setShowDrawer } = useDrawer();
+  const { setDarkMode } = useDarkMode();
+  const { setShowDrawer } = useDrawer();

  const handleSelectDarkMode = useCallback(
    (value, label) => {
@ -37,15 +35,11 @@ export default function AppBar({ title }) {
    (event) => {
      const scrollY = window.scrollY;

-      // if (!ticking) {
      window.requestAnimationFrame(() => {
        setShow(scrollY <= 0 || lastScrollY > scrollY);
        setAtZero(scrollY === 0);
-        ticking = false;
        lastScrollY = scrollY;
      });
-      ticking = true;
-      // }
    },
    [setShow]
  );
@ -55,7 +49,7 @@ export default function AppBar({ title }) {
    return () => {
      document.removeEventListener('scroll', scrollListener);
    };
-  }, []);
+  }, [scrollListener]);

  const handleShowMenu = useCallback(() => {
    setShowMoreMenu(true);
--- a/web/src/components/AutoUpdatingCameraImage.jsx
+++ b/web/src/components/AutoUpdatingCameraImage.jsx
@ -17,7 +17,7 @@ export default function AutoUpdatingCameraImage({ camera, searchParams, showFps
      },
      loadTime > MIN_LOAD_TIMEOUT_MS ? 1 : MIN_LOAD_TIMEOUT_MS
    );
-  }, [key, searchParams, setFps]);
+  }, [key, setFps]);

  return (
    <div>
--- a/web/src/components/CameraImage.jsx
+++ b/web/src/components/CameraImage.jsx
@ -1,7 +1,7 @@
 import { h } from 'preact';
 import ActivityIndicator from './ActivityIndicator';
 import { useApiHost, useConfig } from '../api';
-import { useCallback, useEffect, useContext, useMemo, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';

 export default function CameraImage({ camera, onload, searchParams = '' }) {
  const { data: config } = useConfig();
@ -22,14 +22,11 @@ export default function CameraImage({ camera, onload, searchParams = '' }) {
        }
      });
    });
-  }, [setAvailableWidth, width]);
+  }, []);

  useEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
    resizeObserver.observe(containerRef.current);
-  }, [resizeObserver, containerRef.current]);
+  }, [resizeObserver, containerRef]);

  const scaledHeight = useMemo(() => Math.min(Math.ceil(availableWidth / aspectRatio), height), [
    availableWidth,
@ -38,26 +35,28 @@ export default function CameraImage({ camera, onload, searchParams = '' }) {
  ]);
  const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio), [scaledHeight, aspectRatio]);

-  const img = useMemo(() => new Image(), [camera]);
+  const img = useMemo(() => new Image(), []);
  img.onload = useCallback(
    (event) => {
      setHasLoaded(true);
+      if (canvasRef.current) {
        const ctx = canvasRef.current.getContext('2d');
        ctx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
+      }
      onload && onload(event);
    },
-    [setHasLoaded, onload, canvasRef.current]
+    [img, scaledHeight, scaledWidth, setHasLoaded, onload, canvasRef]
  );

  useEffect(() => {
-    if (!scaledHeight || !canvasRef.current) {
+    if (scaledHeight === 0 || !canvasRef.current) {
      return;
    }
    img.src = `${apiHost}/api/${name}/latest.jpg?h=${scaledHeight}${searchParams ? `&${searchParams}` : ''}`;
-  }, [apiHost, name, img, searchParams, scaledHeight]);
+  }, [apiHost, canvasRef, name, img, searchParams, scaledHeight]);

  return (
-    <div className="relative" ref={containerRef}>
+    <div className="relative w-full" ref={containerRef}>
      <canvas height={scaledHeight} ref={canvasRef} width={scaledWidth} />
      {!hasLoaded ? (
        <div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
--- a/web/src/components/Card.jsx
+++ b/web/src/components/Card.jsx
@ -26,14 +26,14 @@ export default function Box({
      {media || header ? (
        <Element href={href} {...props}>
          {media}
-          <div class="p-4 pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>
+          <div className="p-4 pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>
        </Element>
      ) : null}
      {buttons.length || content ? (
-        <div class="pl-4 pb-2">
+        <div className="pl-4 pb-2">
          {content || null}
          {buttons.length ? (
-            <div class="flex space-x-4 -ml-2">
+            <div className="flex space-x-4 -ml-2">
              {buttons.map(({ name, href }) => (
                <Button key={name} href={href} type="text">
                  {name}
--- a/web/src/components/LinkedLogo.jsx
+++ b/web/src/components/LinkedLogo.jsx
@ -6,7 +6,7 @@ export default function LinkedLogo() {
  return (
    <Heading size="lg">
      <a className="transition-colors flex items-center space-x-4 dark:text-white hover:text-blue-500" href="/">
-        <div class="w-10">
+        <div className="w-10">
          <Logo />
        </div>
        Frigate
--- a/web/src/components/Menu.jsx
+++ b/web/src/components/Menu.jsx
@ -1,6 +1,6 @@
 import { h } from 'preact';
 import RelativeModal from './RelativeModal';
-import { useCallback, useEffect } from 'preact/hooks';
+import { useCallback } from 'preact/hooks';

 export default function Menu({ className, children, onDismiss, relativeTo, widthRelative }) {
  return relativeTo ? (
@ -21,21 +21,12 @@ export function MenuItem({ focus, icon: Icon, label, onSelect, value }) {
    onSelect && onSelect(value, label);
  }, [onSelect, value, label]);

-  const handleKeydown = useCallback(
-    (event) => {
-      if (event.key === 'Enter') {
-        onSelect && onSelect(value, label);
-      }
-    },
-    [onSelect, value, label]
-  );
-
  return (
    <div
      className={`flex space-x-2 p-2 px-5 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer ${
        focus ? 'bg-gray-200 dark:bg-gray-800 dark:text-white' : ''
      }`}
-      onclick={handleClick}
+      onClick={handleClick}
      role="option"
    >
      {Icon ? (
@ -43,7 +34,7 @@ export function MenuItem({ focus, icon: Icon, label, onSelect, value }) {
          <Icon />
        </div>
      ) : null}
-      <div class="whitespace-nowrap">{label}</div>
+      <div className="whitespace-nowrap">{label}</div>
    </div>
  );
 }
--- a/web/src/components/NavigationDrawer.jsx
+++ b/web/src/components/NavigationDrawer.jsx
@ -1,6 +1,6 @@
 import { h, Fragment } from 'preact';
 import { Link } from 'preact-router/match';
-import { useCallback, useState } from 'preact/hooks';
+import { useCallback } from 'preact/hooks';
 import { useDrawer } from '../context';

 export default function NavigationDrawer({ children, header }) {
--- a/web/src/components/RelativeModal.jsx
+++ b/web/src/components/RelativeModal.jsx
@ -44,7 +44,7 @@ export default function RelativeModal({
        return;
      }
    },
-    [ref.current]
+    [ref]
  );

  useLayoutEffect(() => {
@ -84,7 +84,7 @@ export default function RelativeModal({
      const focusable = ref.current.querySelector('[tabindex]');
      focusable && focusable.focus();
    }
-  }, [relativeTo && relativeTo.current, ref && ref.current, widthRelative]);
+  }, [relativeTo, ref, widthRelative]);

  useEffect(() => {
    if (position.top >= 0) {
@ -92,7 +92,7 @@ export default function RelativeModal({
    } else {
      setShow(false);
    }
-  }, [show, position.top, ref.current]);
+  }, [show, position, ref]);

  const menu = (
    <Fragment>
@ -102,7 +102,7 @@ export default function RelativeModal({
        className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto h-auto transition-all duration-75 transform scale-90 opacity-0 overflow-scroll ${
          show ? 'scale-100 opacity-100' : ''
        } ${className}`}
-        onkeydown={handleKeydown}
+        onKeyDown={handleKeydown}
        role={role}
        ref={ref}
        style={position.top >= 0 ? position : null}
--- a/web/src/components/Select.jsx
+++ b/web/src/components/Select.jsx
@ -28,7 +28,7 @@ export default function Select({ label, onChange, options: inputOptions = [], se
      onChange && onChange(value, label);
      setShowMenu(false);
    },
-    [onChange]
+    [onChange, options]
  );

  const handleClick = useCallback(() => {
@ -61,9 +61,11 @@ export default function Select({ label, onChange, options: inputOptions = [], se
        newIndex > -1 && setFocused(newIndex);
        break;
      }
+
+        // no default
      }
    },
-    [setShowMenu, setFocused, focused, selected]
+    [onChange, options, showMenu, setShowMenu, setFocused, focused, selected]
  );

  const handleDismiss = useCallback(() => {
@ -80,7 +82,8 @@ export default function Select({ label, onChange, options: inputOptions = [], se
      setSelected(selectedIndex);
      setFocused(selectedIndex);
    }
-  }, [propSelected]);
+    // DO NOT include `selected`
+  }, [options, propSelected]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <Fragment>
--- a/web/src/components/Switch.jsx
+++ b/web/src/components/Switch.jsx
@ -2,9 +2,7 @@ import { h } from 'preact';
 import { useCallback, useState } from 'preact/hooks';

 export default function Switch({ checked, id, onChange }) {
-  const [internalState, setInternalState] = useState(checked);
  const [isFocused, setFocused] = useState(false);
-  const [isHovered, setHovered] = useState(false);

  const handleChange = useCallback(
    (event) => {
@ -25,12 +23,12 @@ export default function Switch({ checked, id, onChange }) {

  return (
    <label
-      for={id}
+      htmlFor={id}
      className={`flex items-center justify-center ${onChange ? 'cursor-pointer' : 'cursor-not-allowed'}`}
    >
      <div
-        onmouseover={handleFocus}
-        onmouseout={handleBlur}
+        onMouseOver={handleFocus}
+        onMouseOut={handleBlur}
        className={`w-8 h-5 relative ${!onChange ? 'opacity-60' : ''}`}
      >
        <div className="relative overflow-hidden">
@ -38,7 +36,7 @@ export default function Switch({ checked, id, onChange }) {
            className="absolute left-48"
            onBlur={handleBlur}
            onFocus={handleFocus}
-            tabindex="0"
+            tabIndex="0"
            id={id}
            type="checkbox"
            onChange={handleChange}
--- a/web/src/components/Table.jsx
+++ b/web/src/components/Table.jsx
@ -30,7 +30,7 @@ export function Tr({ children, className = '' }) {

 export function Th({ children, className = '', colspan }) {
  return (
-    <th className={`border-b border-gray-400 p-2 px-1 lg:p-4 text-left ${className}`} colspan={colspan}>
+    <th className={`border-b border-gray-400 p-2 px-1 lg:p-4 text-left ${className}`} colSpan={colspan}>
      {children}
    </th>
  );
@ -38,7 +38,7 @@ export function Th({ children, className = '', colspan }) {

 export function Td({ children, className = '', colspan }) {
  return (
-    <td className={`p-2 px-1 lg:p-4 ${className}`} colspan={colspan}>
+    <td className={`p-2 px-1 lg:p-4 ${className}`} colSpan={colspan}>
      {children}
    </td>
  );
--- a/web/src/components/TextField.jsx
+++ b/web/src/components/TextField.jsx
@ -43,12 +43,12 @@ export default function TextField({
    [onChangeText, setValue]
  );

-  // Reset the state if the prop value changes
  useEffect(() => {
    if (propValue !== value) {
      setValue(propValue);
    }
-  }, [propValue, setValue]);
+    // DO NOT include `value`
+  }, [propValue, setValue]); // eslint-disable-line react-hooks/exhaustive-deps

  const labelMoved = isFocused || value !== '';

@ -62,7 +62,7 @@ export default function TextField({
      >
        <label className="flex space-x-2 items-center">
          {LeadingIcon ? (
-            <div class="w-10 h-full">
+            <div className="w-10 h-full">
              <LeadingIcon />
            </div>
          ) : null}
@ -72,8 +72,8 @@ export default function TextField({
              onBlur={handleBlur}
              onFocus={handleFocus}
              onInput={handleChange}
-              readonly={readonly}
-              tabindex="0"
+              readOnly={readonly}
+              tabIndex="0"
              type={keyboardType}
              value={value}
              {...props}
@ -87,7 +87,7 @@ export default function TextField({
            </div>
          </div>
          {TrailingIcon ? (
-            <div class="w-10 h-10">
+            <div className="w-10 h-10">
              <TrailingIcon />
            </div>
          ) : null}
--- a/web/src/context/index.jsx
+++ b/web/src/context/index.jsx
@ -1,6 +1,5 @@
 import { h, createContext } from 'preact';
 import { get as getData, set as setData } from 'idb-keyval';
-import produce from 'immer';
 import { useCallback, useContext, useEffect, useLayoutEffect, useState } from 'preact/hooks';

 const DarkMode = createContext(null);
@ -27,11 +26,7 @@ export function DarkModeProvider({ children }) {
    }

    load();
-  }, []);
-
-  if (persistedMode === null) {
-    return null;
-  }
+  }, [setDarkMode]);

  const handleMediaMatch = useCallback(
    ({ matches }) => {
@ -52,7 +47,7 @@ export function DarkModeProvider({ children }) {
    const query = window.matchMedia('(prefers-color-scheme: dark)');
    query.addEventListener('change', handleMediaMatch);
    handleMediaMatch(query);
-  }, [persistedMode]);
+  }, [persistedMode, handleMediaMatch]);

  useLayoutEffect(() => {
    if (currentMode === 'dark') {
@ -62,7 +57,9 @@ export function DarkModeProvider({ children }) {
    }
  }, [currentMode]);

-  return <DarkMode.Provider value={{ currentMode, persistedMode, setDarkMode }}>{children}</DarkMode.Provider>;
+  return !persistedMode ? null : (
+    <DarkMode.Provider value={{ currentMode, persistedMode, setDarkMode }}>{children}</DarkMode.Provider>
+  );
 }

 export function useDarkMode() {
@ -110,7 +107,7 @@ export function usePersistence(key, defaultValue = undefined) {
    }

    load();
-  }, [key]);
+  }, [key, defaultValue, setValue]);

  return [value, setValue, loaded];
 }
--- a/web/src/routes/Camera.jsx
+++ b/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}

      <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>
--- a/web/src/routes/CameraMap.jsx
+++ b/web/src/routes/CameraMap.jsx
@ -1,10 +1,9 @@
 import { h } from 'preact';
-import Card from '../components/Card';
-import Button from '../components/Button';
-import Heading from '../components/Heading';
-import Switch from '../components/Switch';
-import { route } from 'preact-router';
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import Card from '../components/Card.jsx';
+import Button from '../components/Button.jsx';
+import Heading from '../components/Heading.jsx';
+import Switch from '../components/Switch.jsx';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { useApiHost, useConfig } from '../api';

 export default function CameraMasks({ camera, url }) {
@ -14,10 +13,6 @@ export default function CameraMasks({ camera, url }) {
  const [imageScale, setImageScale] = useState(1);
  const [snap, setSnap] = useState(true);

-  if (!(camera in config.cameras)) {
-    return <div>{`No camera named ${camera}`}</div>;
-  }
-
  const cameraConfig = config.cameras[camera];
  const {
    width,
@ -38,7 +33,7 @@ export default function CameraMasks({ camera, url }) {
          }
        });
      }),
-    [camera, width, setImageScale]
+    [width, setImageScale]
  );

  useEffect(() => {
@ -46,7 +41,7 @@ export default function CameraMasks({ camera, url }) {
      return;
    }
    resizeObserver.observe(imageRef.current);
-  }, [resizeObserver, imageRef.current]);
+  }, [resizeObserver, imageRef]);

  const [motionMaskPoints, setMotionMaskPoints] = useState(
    Array.isArray(motionMask)
@ -94,26 +89,6 @@ export default function CameraMasks({ camera, url }) {
    [editing]
  );

-  const handleSelectEditable = useCallback(
-    (name) => {
-      setEditing(name);
-    },
-    [setEditing]
-  );
-
-  const handleRemoveEditable = useCallback(
-    (name) => {
-      const filteredZonePoints = Object.keys(zonePoints)
-        .filter((zoneName) => zoneName !== name)
-        .reduce((memo, name) => {
-          memo[name] = zonePoints[name];
-          return memo;
-        }, {});
-      setZonePoints(filteredZonePoints);
-    },
-    [zonePoints, setZonePoints]
-  );
-
  // Motion mask methods
  const handleAddMask = useCallback(() => {
    const newMotionMaskPoints = [...motionMaskPoints, []];
@ -239,7 +214,7 @@ ${Object.keys(objectMaskPoints)
  );

  return (
-    <div class="flex-col space-y-4">
+    <div className="flex-col space-y-4">
      <Heading size="2xl">{camera} mask & zone creator</Heading>

      <Card
@ -265,12 +240,12 @@ ${Object.keys(objectMaskPoints)
            height={height}
          />
        </div>
-        <div class="flex space-x-4">
+        <div className="flex space-x-4">
          <span>Snap to edges</span> <Switch checked={snap} onChange={handleChangeSnap} />
        </div>
      </div>

-      <div class="flex-col space-y-4">
+      <div className="flex-col space-y-4">
        <MaskValues
          editing={editing}
          title="Motion masks"
@ -314,7 +289,7 @@ ${Object.keys(objectMaskPoints)
 }

 function maskYamlKeyPrefix(points) {
-  return `    - `;
+  return '    - ';
 }

 function zoneYamlKeyPrefix(points, key) {
@ -323,18 +298,12 @@ function zoneYamlKeyPrefix(points, key) {
 }

 function objectYamlKeyPrefix(points, key, subkey) {
-  return `        - `;
+  return '        - ';
 }

 const MaskInset = 20;

-function EditableMask({ onChange, points, scale, snap, width, height }) {
-  if (!points) {
-    return null;
-  }
-  const boundingRef = useRef(null);
-
-  function boundedSize(value, maxValue) {
+function boundedSize(value, maxValue, snap) {
  const newValue = Math.min(Math.max(0, Math.round(value)), maxValue);
  if (snap) {
    if (newValue <= MaskInset) {
@ -345,21 +314,24 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
  }

  return newValue;
-  }
+}
+
+function EditableMask({ onChange, points, scale, snap, width, height }) {
+  const boundingRef = useRef(null);

  const handleMovePoint = useCallback(
    (index, newX, newY) => {
      if (newX < 0 && newY < 0) {
        return;
      }
-      let x = boundedSize(newX / scale, width, snap);
-      let y = boundedSize(newY / scale, height, snap);
+      const x = boundedSize(newX / scale, width, snap);
+      const y = boundedSize(newY / scale, height, snap);

      const newPoints = [...points];
      newPoints[index] = [x, y];
      onChange(newPoints);
    },
-    [scale, points, snap]
+    [height, width, onChange, scale, points, snap]
  );

  // Add a new point between the closest two other points
@ -370,7 +342,6 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
      const scaledY = boundedSize((offsetY - MaskInset) / scale, height, snap);
      const newPoint = [scaledX, scaledY];

-      let closest;
      const { index } = points.reduce(
        (result, point, i) => {
          const nextPoint = points.length === i + 1 ? points[0] : points[i + 1];
@ -385,7 +356,7 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
      newPoints.splice(index, 0, newPoint);
      onChange(newPoints);
    },
-    [scale, points, onChange, snap]
+    [height, width, scale, points, onChange, snap]
  );

  const handleRemovePoint = useCallback(
@ -416,7 +387,7 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
            y={y + MaskInset}
          />
        ))}
-      <div className="absolute inset-0 right-0 bottom-0" onclick={handleAddPoint} ref={boundingRef} />
+      <div className="absolute inset-0 right-0 bottom-0" onClick={handleAddPoint} ref={boundingRef} />
      <svg
        width="100%"
        height="100%"
@ -488,15 +459,15 @@ function MaskValues({
  );

  return (
-    <div className="overflow-hidden" onmouseover={handleMousein} onmouseout={handleMouseout}>
-      <div class="flex space-x-4">
+    <div className="overflow-hidden" onMouseOver={handleMousein} onMouseOut={handleMouseout}>
+      <div className="flex space-x-4">
        <Heading className="flex-grow self-center" size="base">
          {title}
        </Heading>
        <Button onClick={onCopy}>Copy</Button>
        <Button onClick={onCreate}>Add</Button>
      </div>
-      <pre class="relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2">
+      <pre className="relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2">
        {yamlPrefix}
        {Object.keys(points).map((mainkey) => {
          if (isMulti) {
@ -522,7 +493,7 @@ function MaskValues({
                ))}
              </div>
            );
-          } else {
+          }
          return (
            <Item
              mainkey={mainkey}
@ -535,7 +506,6 @@ function MaskValues({
              yamlKeyPrefix={yamlKeyPrefix}
            />
          );
-          }
        })}
      </pre>
    </div>
@ -613,18 +583,18 @@ function PolyPoint({ boundingRef, index, x, y, onMove, onRemove }) {
      }
      onMove(index, event.layerX - PolyPointRadius * 2, event.layerY - PolyPointRadius * 2);
    },
-    [onMove, index, boundingRef.current]
+    [onMove, index, boundingRef]
  );

  const handleDragStart = useCallback(() => {
    boundingRef.current && boundingRef.current.addEventListener('dragover', handleDragOver, false);
    setHidden(true);
-  }, [setHidden, boundingRef.current, handleDragOver]);
+  }, [setHidden, boundingRef, handleDragOver]);

  const handleDragEnd = useCallback(() => {
    boundingRef.current && boundingRef.current.removeEventListener('dragover', handleDragOver);
    setHidden(false);
-  }, [setHidden, boundingRef.current, handleDragOver]);
+  }, [setHidden, boundingRef, handleDragOver]);

  const handleRightClick = useCallback(
    (event) => {
@ -644,10 +614,10 @@ function PolyPoint({ boundingRef, index, x, y, onMove, onRemove }) {
      className={`${hidden ? 'opacity-0' : ''} bg-gray-900 rounded-full absolute z-20`}
      style={`top: ${y - PolyPointRadius}px; left: ${x - PolyPointRadius}px; width: 20px; height: 20px;`}
      draggable
-      onclick={handleClick}
-      oncontextmenu={handleRightClick}
-      ondragstart={handleDragStart}
-      ondragend={handleDragEnd}
+      onClick={handleClick}
+      onContextMenu={handleRightClick}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
    />
  );
 }
--- a/web/src/routes/Cameras.jsx
+++ b/web/src/routes/Cameras.jsx
@ -2,19 +2,15 @@ import { h } from 'preact';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Card from '../components/Card';
 import CameraImage from '../components/CameraImage';
-import Heading from '../components/Heading';
-import { route } from 'preact-router';
-import { useConfig } from '../api';
+import { useConfig, FetchStatus } from '../api';
 import { useMemo } from 'preact/hooks';

 export default function Cameras() {
  const { data: config, status } = useConfig();

-  if (!config) {
-    return <p>loading…</p>;
-  }
-
-  return (
+  return status !== FetchStatus.LOADED ? (
+    <ActivityIndicator />
+  ) : (
    <div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
      {Object.keys(config.cameras).map((camera) => (
        <Camera name={camera} />
--- a/web/src/routes/Debug.jsx
+++ b/web/src/routes/Debug.jsx
@ -3,53 +3,56 @@ import ActivityIndicator from '../components/ActivityIndicator';
 import Button from '../components/Button';
 import Heading from '../components/Heading';
 import Link from '../components/Link';
-import { FetchStatus, useConfig, useStats } from '../api';
+import { useConfig, useStats } from '../api';
 import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
 import { useCallback, useEffect, useState } from 'preact/hooks';

+const emptyObject = Object.freeze({});
+
 export default function Debug() {
  const config = useConfig();

  const [timeoutId, setTimeoutId] = useState(null);
+  const { data: stats } = useStats(null, timeoutId);

-  const forceUpdate = useCallback(async () => {
-    setTimeoutId(setTimeout(forceUpdate, 1000));
+  const forceUpdate = useCallback(() => {
+    const timeoutId = setTimeout(forceUpdate, 1000);
+    setTimeoutId(timeoutId);
  }, []);

  useEffect(() => {
    forceUpdate();
-  }, []);
+  }, [forceUpdate]);

  useEffect(() => {
    return () => {
      clearTimeout(timeoutId);
    };
  }, [timeoutId]);
-  const { data: stats, status } = useStats(null, timeoutId);

-  if (stats === null && (status === FetchStatus.LOADING || status === FetchStatus.NONE)) {
-    return <ActivityIndicator />;
-  }
+  const { detectors, service, detection_fps, ...cameras } = stats || emptyObject;

-  const { detectors, detection_fps, service, ...cameras } = stats;
+  const detectorNames = Object.keys(detectors || emptyObject);
+  const detectorDataKeys = Object.keys(detectors ? detectors[detectorNames[0]] : emptyObject);
+  const cameraNames = Object.keys(cameras || emptyObject);
+  const cameraDataKeys = Object.keys(cameras[cameraNames[0]] || emptyObject);

-  const detectorNames = Object.keys(detectors);
-  const detectorDataKeys = Object.keys(detectors[detectorNames[0]]);
-
-  const cameraNames = Object.keys(cameras);
-  const cameraDataKeys = Object.keys(cameras[cameraNames[0]]);
-
-  const handleCopyConfig = useCallback(async () => {
+  const handleCopyConfig = useCallback(() => {
+    async function copy() {
      await window.navigator.clipboard.writeText(JSON.stringify(config, null, 2));
+    }
+    copy();
  }, [config]);

-  return (
-    <div class="space-y-4">
+  return stats === null ? (
+    <ActivityIndicator />
+  ) : (
+    <div className="space-y-4">
      <Heading>
        Debug <span className="text-sm">{service.version}</span>
      </Heading>

-      <div class="min-w-0 overflow-auto">
+      <div className="min-w-0 overflow-auto">
        <Table className="w-full">
          <Thead>
            <Tr>
@ -72,7 +75,7 @@ export default function Debug() {
        </Table>
      </div>

-      <div class="min-w-0 overflow-auto">
+      <div className="min-w-0 overflow-auto">
        <Table className="w-full">
          <Thead>
            <Tr>
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@ -3,7 +3,7 @@ import ActivityIndicator from '../components/ActivityIndicator';
 import Heading from '../components/Heading';
 import Link from '../components/Link';
 import { FetchStatus, useApiHost, useEvent } from '../api';
-import { Table, Thead, Tbody, Tfoot, Th, Tr, Td } from '../components/Table';
+import { Table, Thead, Tbody, Th, Tr, Td } from '../components/Table';

 export default function Event({ eventId }) {
  const apiHost = useApiHost();
@ -54,7 +54,7 @@ export default function Event({ eventId }) {
      {data.has_clip ? (
        <Fragment>
          <Heading size="sm">Clip</Heading>
-          <video autoplay className="w-100" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls />
+          <video autoPlay className="w-100" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls />
        </Fragment>
      ) : (
        <p>No clip available</p>
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@ -1,6 +1,5 @@
 import { h } from 'preact';
 import ActivityIndicator from '../components/ActivityIndicator';
-import Card from '../components/Card';
 import Heading from '../components/Heading';
 import Link from '../components/Link';
 import Select from '../components/Select';
@ -8,7 +7,7 @@ import produce from 'immer';
 import { route } from 'preact-router';
 import { FetchStatus, useApiHost, useConfig, useEvents } from '../api';
 import { Table, Thead, Tbody, Tfoot, Th, Tr, Td } from '../components/Table';
-import { useCallback, useContext, useEffect, useMemo, useRef, useReducer, useState } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useRef, useReducer, useState } from 'preact/hooks';

 const API_LIMIT = 25;

@ -65,7 +64,7 @@ export default function Events({ path: pathname } = {}) {
    if (Array.isArray(data) && data.length < API_LIMIT) {
      dispatch({ type: 'REACHED_END', meta: { searchString } });
    }
-  }, [data]);
+  }, [data, searchString, searchStrings]);

  const observer = useRef(
    new IntersectionObserver((entries, observer) => {
@ -96,7 +95,7 @@ export default function Events({ path: pathname } = {}) {
        }
      }
    },
-    [observer.current, reachedEnd]
+    [observer, reachedEnd]
  );

  const handleFilter = useCallback(
@ -121,7 +120,7 @@ export default function Events({ path: pathname } = {}) {
        <Table className="min-w-full table-fixed">
          <Thead>
            <Tr>
-              <Th></Th>
+              <Th />
              <Th>Camera</Th>
              <Th>Label</Th>
              <Th>Score</Th>
@ -213,7 +212,7 @@ function Filterable({ onFilter, pathname, searchParams, paramName, name }) {
    params.set(paramName, name);
    removeDefaultSearchKeys(params);
    return `${pathname}?${params.toString()}`;
-  }, [searchParams]);
+  }, [searchParams, paramName, pathname, name]);

  const handleClick = useCallback(
    (event) => {
@ -223,7 +222,7 @@ function Filterable({ onFilter, pathname, searchParams, paramName, name }) {
      params.set(paramName, name);
      onFilter(params);
    },
-    [href, searchParams]
+    [href, searchParams, onFilter, paramName, name]
  );

  return (
--- a/web/src/routes/StyleGuide.jsx
+++ b/web/src/routes/StyleGuide.jsx
@ -1,7 +1,6 @@
 import { h } from 'preact';
 import ArrowDropdown from '../icons/ArrowDropdown';
 import ArrowDropup from '../icons/ArrowDropup';
-import Card from '../components/Card';
 import Button from '../components/Button';
 import Heading from '../components/Heading';
 import Select from '../components/Select';
@ -22,13 +21,13 @@ export default function StyleGuide() {
  return (
    <div>
      <Heading size="md">Button</Heading>
-      <div class="flex space-x-4 mb-4">
+      <div className="flex space-x-4 mb-4">
        <Button>Default</Button>
        <Button color="red">Danger</Button>
        <Button color="green">Save</Button>
        <Button disabled>Disabled</Button>
      </div>
-      <div class="flex space-x-4 mb-4">
+      <div className="flex space-x-4 mb-4">
        <Button type="text">Default</Button>
        <Button color="red" type="text">
          Danger
@ -40,7 +39,7 @@ export default function StyleGuide() {
          Disabled
        </Button>
      </div>
-      <div class="flex space-x-4 mb-4">
+      <div className="flex space-x-4 mb-4">
        <Button type="outlined">Default</Button>
        <Button color="red" type="outlined">
          Danger
@ -54,7 +53,7 @@ export default function StyleGuide() {
      </div>

      <Heading size="md">Switch</Heading>
-      <div class="flex">
+      <div className="flex">
        <div>
          <p>Disabled, off</p>
          <Switch />
@ -74,12 +73,12 @@ export default function StyleGuide() {
      </div>

      <Heading size="md">Select</Heading>
-      <div class="flex space-x-4 mb-4 max-w-4xl">
+      <div className="flex space-x-4 mb-4 max-w-4xl">
        <Select label="Basic select box" options={['All', 'None', 'Other']} selected="None" />
      </div>

      <Heading size="md">TextField</Heading>
-      <div class="flex-col space-y-4 max-w-4xl">
+      <div className="flex-col space-y-4 max-w-4xl">
        <TextField label="Default text field" />
        <TextField label="Pre-filled" value="This is my pre-filled value" />
        <TextField label="With help" helpText="This is some help text" />
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -1,5 +1,3 @@
-'use strict';
-
 module.exports = {
  purge: ['./public/**/*.html', './src/**/*.jsx'],
  darkMode: 'class',