fix(ui): cleanup eslint errors

ui/src/components/map/EnrichedLayerFeatures.tsx

@@ -122,7 +122,7 @@ const EnrichedSymbolSource = (props: EnrichedFeaturesProps) => {
         layout={{
           "icon-image": ["coalesce", ["get", "icon"], "default_marker"],
           "icon-allow-overlap": true,
-          "icon-size": ["interpolate", ["linear"], ["zoom"], 12, 0.1, 17, 1],
+          "icon-size": ["interpolate", ["linear"], ["zoom"], 12, 0.1, 17, 1.4],
           "icon-rotation-alignment": "map",
           "icon-pitch-alignment": "map",
           "icon-rotate": ["coalesce", ["get", "iconRotation"], 0],

ui/src/utils/ReloadSWPrompt.tsx

@@ -11,10 +11,11 @@ export function ReloadPrompt() {
   } = useRegisterSW({
     onRegistered(r) {
       console.log("SW Registered: " + r);
-      r &&
-        setInterval(() => {
-          r.update();
-        }, intervalMS);
+      if (r === undefined) return;
+
+      setInterval(() => {
+        r.update();
+      }, intervalMS);
       setOfflineReady(true);
     },
     onRegisterError(error) {

ui/src/utils/useDebounce.tsx

@@ -1,25 +1,22 @@
 import { useEffect, useState } from "react";
 
-// Hook
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useDebounce(value: any, delay: number) {
-    // State and setters for debounced value
-    const [debouncedValue, setDebouncedValue] = useState(value);
-    useEffect(
-        () => {
-            // Update debounced value after delay
-            const handler = setTimeout(() => {
-                setDebouncedValue(value);
-            }, delay);
-            // Cancel the timeout if value changes (also on delay change or unmount)
-            // This is how we prevent debounced value from updating if value is changed ...
-            // .. within the delay period. Timeout gets cleared and restarted.
-            return () => {
-                clearTimeout(handler);
-            };
-        },
-        [value, delay]
-    );
-    return debouncedValue;
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    // Update debounced value after delay
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    // Cancel the timeout if value changes (also on delay change or unmount)
+    // This is how we prevent debounced value from updating if value is changed ...
+    // .. within the delay period. Timeout gets cleared and restarted.
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
 }
 
-export default useDebounce;
+export default useDebounce;

ui/src/utils/useLocalStorage.tsx

@@ -143,7 +143,6 @@ export function useLocalStorage<T>(
     const value = readValue();
     setValue(value);
     setStoredValue(value);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key]);
 
   const handleStorageChange = useCallback(

ui/src/views/incident/List.tsx

@@ -6,7 +6,7 @@ import {
   faEyeLowVision,
   faFolderClosed,
   faFolderOpen,
-  faPlusCircle
+  faPlusCircle,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
@@ -19,24 +19,21 @@ import { useNavigate } from "react-router-dom";
 import { Incident, IncidentListData } from "../../types";
 import { CloseIncident, GetIncidentDetails, GetIncidents } from "./graphql";
 
-
 function List() {
   const [filterClosed, setFilterClosed] = useState(true);
   const navigate = useNavigate();
   const { t } = useTranslation();
 
-  const { loading, error, data } = useQuery<IncidentListData>(GetIncidents,
-    {
-      pollInterval: 10000,
-    }
-  );
+  const { loading, error, data } = useQuery<IncidentListData>(GetIncidents, {
+    pollInterval: 10000,
+  });
 
   if (error) return <div className="notification is-danger">{error.message}</div>;
   if (loading) return <Spinner />;
 
   return (
     <div>
-      <h3 className="title is-size-3 is-capitalized">{t('incidents')}</h3>
+      <h3 className="title is-size-3 is-capitalized">{t("incidents")}</h3>
       <div className="buttons">
         <button
           className="button is-success is-small is-responsive is-rounded is-light is-capitalized"
@@ -45,7 +42,7 @@ function List() {
           <span className="icon is-small">
             <FontAwesomeIcon icon={faPlusCircle} />
           </span>
-          <span>{t('create')}</span>
+          <span>{t("create")}</span>
         </button>
         <button
           className="button is-primary is-small is-responsive is-rounded is-light"
@@ -54,7 +51,7 @@ function List() {
           <span className="icon is-small">
             <FontAwesomeIcon icon={filterClosed ? faEye : faEyeLowVision} />
           </span>
-          <span>{filterClosed ? t('showClosed') : t('hideClosed')}</span>
+          <span>{filterClosed ? t("showClosed") : t("hideClosed")}</span>
         </button>
       </div>
       <IncidentCards
@@ -66,45 +63,48 @@ function List() {
 
 function IncidentCards(props: { incidents: Incident[] }) {
   const { incidents } = props;
-  const [closeIncident] = useMutation(CloseIncident, {
-    refetchQueries: [{ query: GetIncidents }, { query: GetIncidentDetails }],
-  });
 
   return (
     <div className="container-flex">
-      {
-        incidents.map((incident) => (
-          <IncidentCard key={incident.id} incident={incident} closeIncident={closeIncident} />
-        ))
-      }
-    </div >
-  )
+      {incidents.map((incident) => (
+        <IncidentCard key={incident.id} incident={incident} />
+      ))}
+    </div>
+  );
 }
 
-function IncidentCard(props: { incident: Incident, closeIncident: any }) {
-  const { incident, closeIncident } = props;
+function IncidentCard(props: { incident: Incident }) {
+  const { incident } = props;
   const navigate = useNavigate();
+  const [closeIncident] = useMutation(CloseIncident, {
+    refetchQueries: [{ query: GetIncidents }, { query: GetIncidentDetails }],
+  });
 
   const cardClass = classNames({
     card: true,
     "mb-3": true,
-    "has-background-primary-light": incident.closedAt
+    "has-background-primary-light": incident.closedAt,
   });
   return (
-    <div className={cardClass} >
+    <div className={cardClass}>
       <div className="card-content">
         <div className="content has-text-small">
           <h4 className="title is-5">{incident.name}</h4>
           <div className="columns">
             <div className="column is-one-third">
-              <strong>{t('location')}: </strong>{incident.location.name}
+              <strong>{t("location")}: </strong>
+              {incident.location.name}
             </div>
             <div className="column is-one-third">
-              <strong>{t('createdAt')}: </strong>{dayjs(incident.createdAt).format("LLL")}
+              <strong>{t("createdAt")}: </strong>
+              {dayjs(incident.createdAt).format("LLL")}
             </div>
-            {incident.closedAt && <div className="column">
-              <strong>{t('closedAt')}: </strong>{dayjs(incident.closedAt).format("LLL")}
-            </div>}
+            {incident.closedAt && (
+              <div className="column">
+                <strong>{t("closedAt")}: </strong>
+                {dayjs(incident.closedAt).format("LLL")}
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -116,16 +116,13 @@ function IncidentCard(props: { incident: Incident, closeIncident: any }) {
           <span className="icon">
             <FontAwesomeIcon icon={faArrowRightFromBracket} />
           </span>
-          <span>{t('enter')}</span>
+          <span>{t("enter")}</span>
         </button>
-        <button
-          className="card-footer-item is-ahref is-capitalized"
-          onClick={() => navigate(`../${incident.id}/edit`)}
-        >
+        <button className="card-footer-item is-ahref is-capitalized" onClick={() => navigate(`../${incident.id}/edit`)}>
           <span className="icon">
             <FontAwesomeIcon icon={faEdit} />
           </span>
-          <span>{t('edit')}</span>
+          <span>{t("edit")}</span>
         </button>
         {incident.closedAt === null ? (
           <button
@@ -142,7 +139,7 @@ function IncidentCard(props: { incident: Incident, closeIncident: any }) {
             <span className="icon">
               <FontAwesomeIcon icon={faFolderClosed} />
             </span>
-            <span>{t('close')}</span>
+            <span>{t("close")}</span>
           </button>
         ) : (
           <button
@@ -156,12 +153,12 @@ function IncidentCard(props: { incident: Incident, closeIncident: any }) {
             <span className="icon">
               <FontAwesomeIcon icon={faFolderOpen} />
             </span>
-            <span>{t('open')}</span>
+            <span>{t("open")}</span>
           </button>
         )}
       </footer>
     </div>
-  )
+  );
 }
 
 export default List;

ui/src/views/incident/New.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable jsx-a11y/anchor-has-content */
 import { useMutation } from "@apollo/client";
 import { faClipboard, faLocationDot } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

ui/src/views/journal/Editor.tsx

@@ -138,20 +138,26 @@ function Editor() {
         return Object.assign({}, state, { time: action.time });
       }
       case "set_media_detail": {
-        switch (action.detail.type) {
+        const details = {
+          sender: state.senderDetail,
+          receiver: state.receiverDetail,
+          ...action.detail,
+        };
+
+        switch (details.type) {
           case Medium.Radio:
-            return Object.assign({}, state, { media: action.detail.type, radioChannel: action.detail.channel });
+            return {
+              ...state,
+              media: details.type,
+              radioChannel: details.channel || "",
+            };
           default:
-            const details = Object.assign(
-              {},
-              { sender: state.senderDetail, receiver: state.receiverDetail },
-              action.detail,
-            );
-            return Object.assign({}, state, {
-              media: action.detail.type,
+            return {
+              ...state,
+              media: details.type,
               senderDetail: details.sender,
               receiverDetail: details.receiver,
-            });
+            };
         }
       }
       case "clear": {