From b8cf5e4aed244ae14ddd49df7536eeba3274e455 Mon Sep 17 00:00:00 2001
From: JohnMark Sill <johnmarksilly@gmail.com>
Date: Wed, 12 Jan 2022 23:55:18 -0600
Subject: [PATCH] fix: linting

---
 web/src/components/LiveChip.jsx | 18 ++++++++++++------
 web/src/components/Prompt.jsx   | 32 ++++++++++++++++----------------
 web/src/components/Tabs.jsx     | 27 +++++++++++++++------------
 web/src/components/Timeline.jsx |  8 ++++----
 web/src/routes/Camera_V2.jsx    | 13 +++----------
 5 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/web/src/components/LiveChip.jsx b/web/src/components/LiveChip.jsx
index 73bd73e86..08b4d5dae 100644
--- a/web/src/components/LiveChip.jsx
+++ b/web/src/components/LiveChip.jsx
@@ -1,15 +1,21 @@
-import { h } from 'preact'; 
+import { h } from 'preact';
 
 export function LiveChip({ className }) {
   return (
-    <div className={`inline relative px-2 py-1 rounded-full ${className}`} style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}>
+    <div
+      className={`inline relative px-2 py-1 rounded-full ${className}`}
+      style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)' }}
+    >
       <div className='relative inline-block w-3 h-3 mr-2'>
-        <span class="flex h-3 w-3">
-          <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" style={{ backgroundColor: "rgb(74 222 128)" }}></span>
-          <span class="relative inline-flex rounded-full h-3 w-3" style={{ backgroundColor: "rgb(74 222 128)" }}></span>
+        <span class='flex h-3 w-3'>
+          <span
+            class='animate-ping absolute inline-flex h-full w-full rounded-full opacity-75'
+            style={{ backgroundColor: 'rgb(74 222 128)' }}
+          ></span>
+          <span class='relative inline-flex rounded-full h-3 w-3' style={{ backgroundColor: 'rgb(74 222 128)' }}></span>
         </span>
       </div>
       <span>Live</span>
     </div>
-  )
+  );
 }
diff --git a/web/src/components/Prompt.jsx b/web/src/components/Prompt.jsx
index 73d0f5e33..689fc0fdf 100644
--- a/web/src/components/Prompt.jsx
+++ b/web/src/components/Prompt.jsx
@@ -1,22 +1,22 @@
-import { h, Fragment } from 'preact';
+import { h } from 'preact';
 import Button from './Button';
 import Heading from './Heading';
 import Dialog from './Dialog';
 
 export default function Prompt({ actions = [], title, text }) {
-return (
-  <Dialog>
-    <div className="p-4">
-      <Heading size="lg">{title}</Heading>
-      <p>{text}</p>
-    </div>
-    <div className="p-2 flex justify-start flex-row-reverse space-x-2">
-      {actions.map(({ color, text, onClick, ...props }, i) => (
-        <Button className="ml-2" color={color} key={i} onClick={onClick} type="text" {...props}>
-          {text}
-        </Button>
-      ))}
-    </div>
-  </Dialog>
-)
+  return (
+    <Dialog>
+      <div className='p-4'>
+        <Heading size='lg'>{title}</Heading>
+        <p>{text}</p>
+      </div>
+      <div className='p-2 flex justify-start flex-row-reverse space-x-2'>
+        {actions.map(({ color, text, onClick, ...props }, i) => (
+          <Button className='ml-2' color={color} key={i} onClick={onClick} type='text' {...props}>
+            {text}
+          </Button>
+        ))}
+      </div>
+    </Dialog>
+  );
 }
diff --git a/web/src/components/Tabs.jsx b/web/src/components/Tabs.jsx
index ed64ecca5..271084ca6 100644
--- a/web/src/components/Tabs.jsx
+++ b/web/src/components/Tabs.jsx
@@ -1,34 +1,37 @@
 import { h } from 'preact';
-import { useCallback, useState } from "preact/hooks";
+import { useCallback, useState } from 'preact/hooks';
 
 export function Tabs({ children, selectedIndex: selectedIndexProp, onChange, className }) {
   const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
 
-  const handleSelected = (index) => () => {
-    setSelectedIndex(index);
-    onChange && onChange(index)
-  };
+  const handleSelected = useCallback(
+    (index) => () => {
+      setSelectedIndex(index);
+      onChange && onChange(index);
+    },
+    [onChange]
+  );
 
   const RenderChildren = useCallback(() => {
     return children.map((child, i) => {
-      child.props.selected = i == selectedIndex
-      child.props.onClick = handleSelected(i)
+      child.props.selected = i === selectedIndex;
+      child.props.onClick = handleSelected(i);
       return child;
-    })
-  }, [selectedIndex])
+    });
+  }, [selectedIndex, children, handleSelected]);
 
   return (
     <div className={`flex ${className}`}>
       <RenderChildren />
     </div>
-  )
+  );
 }
 
 export function TextTab({ selected, text, onClick }) {
-  const selectedStyle = selected ? 'text-black bg-white' : "text-white bg-transparent"
+  const selectedStyle = selected ? 'text-black bg-white' : 'text-white bg-transparent';
   return (
     <button onClick={onClick} className={`rounded-full px-4 py-2 ${selectedStyle}`}>
       <span>{text}</span>
     </button>
-  )
+  );
 }
diff --git a/web/src/components/Timeline.jsx b/web/src/components/Timeline.jsx
index 6c1311874..c59a21c6f 100644
--- a/web/src/components/Timeline.jsx
+++ b/web/src/components/Timeline.jsx
@@ -57,7 +57,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
     } else {
       setScrollActive(true);
     }
-  }, [offset]);
+  }, [offset, currentEvent, timelineContainerRef]);
 
   useEffect(() => {
     if (currentIndex !== undefined && currentIndex !== currentEvent.index) {
@@ -71,7 +71,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
       });
       timelineContainerRef.current.scroll({ left: event.positionX - timelineOffset, behavior: 'smooth' });
     }
-  }, [currentIndex]);
+  }, [currentIndex, timelineContainerRef, timeline, currentEvent]);
 
   const checkMarkerForEvent = (markerTime) => {
     if (!scrollActive) {
@@ -119,7 +119,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
 
   useEffect(() => {
     onChange && onChange(currentEvent);
-  }, [currentEvent]);
+  }, [onChange, currentEvent]);
 
   const RenderTimeline = useCallback(() => {
     if (timeline && timeline.length > 0) {
@@ -151,7 +151,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
         </div>
       );
     }
-  }, [timeline]);
+  }, [timeline, timelineOffset]);
 
   return (
     <div className='relative flex-grow-1'>
diff --git a/web/src/routes/Camera_V2.jsx b/web/src/routes/Camera_V2.jsx
index d50e04874..fbffdcb1b 100644
--- a/web/src/routes/Camera_V2.jsx
+++ b/web/src/routes/Camera_V2.jsx
@@ -1,21 +1,14 @@
-import { h, Fragment, render } from 'preact';
+import { h, Fragment } from 'preact';
 import AutoUpdatingCameraImage from '../components/AutoUpdatingCameraImage';
 import JSMpegPlayer from '../components/JSMpegPlayer';
 import Heading from '../components/Heading';
 import Link from '../components/Link';
 import Switch from '../components/Switch';
 import { usePersistence } from '../context';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import { useApiHost, useConfig, useEvents } from '../api';
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { useConfig } from '../api';
 import { Tabs, TextTab } from '../components/Tabs';
-import Timeline from '../components/Timeline';
 import { LiveChip } from '../components/LiveChip';
-import { HistoryHeader } from './HistoryHeader';
-import { longToDate } from '../utils/dateUtil';
-import { useSearchString } from '../hooks/useSearchString';
-import { Previous } from '../icons/Previous';
-import { Play } from '../icons/Play';
-import { Next } from '../icons/Next';
 import HistoryViewer from '../components/HistoryViewer';
 
 const emptyObject = Object.freeze({});