- refactored state for sessionlist, and session active and pause states

src/components/SessionForm/SessionCard.tsx

@@ -9,15 +9,18 @@ import VehicleSessionItem from "../UI/VehicleSessionItem";
 import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 
 const SessionCard = () => {
-  const { sessionStarted, setSessionStarted, sessionList, setSessionPaused, sessionPaused, savedSightings } =
-    useIntegrationsContext();
+  const { state, dispatch } = useIntegrationsContext();
   const { mutation } = useCameraBlackboard();
 
-  const sightings = [...new Map(sessionList.map((vehicle) => [vehicle.vrm, vehicle]))];
+  const sessionStarted = state.sessionStarted;
+  const sessionPaused = state.sessionPaused;
+  const sessionList = state.sessionList;
+
+  const sightings = [...new Map(sessionList?.map((vehicle) => [vehicle.vrm, vehicle]))];
 
   const dedupedSightings = sightings.map((sighting) => sighting[1]);
 
-  const vehicles = savedSightings.reduce<Record<string, ReducedSightingType[]>>(
+  const vehicles = dedupedSightings.reduce<Record<string, ReducedSightingType[]>>(
     (acc, item) => {
       const hotlisthit = Object.values(item.metadata?.hotlistMatches ?? {}).includes(true);
       if (item.metadata?.npedJSON["NPED CATEGORY"] === "A") acc.npedCatA.push(item);
@@ -43,13 +46,13 @@ const SessionCard = () => {
   );
 
   const handleStartClick = () => {
-    setSessionStarted(!sessionStarted);
-    setSessionPaused(false);
+    dispatch({ type: "SESSIONSTART", payload: !sessionStarted });
+    dispatch({ type: "SESSIONPAUSE", payload: false });
     toast(`${sessionStarted ? "Vehicle tracking session ended" : "Vehicle tracking session started"}`);
   };
 
   const handlepauseClick = () => {
-    setSessionPaused(!sessionPaused);
+    dispatch({ type: "SESSIONPAUSE", payload: !sessionPaused });
     toast(`${sessionStarted ? "Vehicle tracking session paused" : "Vehicle tracking session resumed"}`);
   };
 

src/components/SightingModal/SightingModal.tsx

@@ -127,8 +127,8 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
             <div className="flex flex-col border-b border-gray-600 mb-4">
               <p className="text-gray-300">Hotlists</p>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]">
-                {hotlistNames.map((hotlistName) => (
-                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-55 m-2">
+                {hotlistNames.map((hotlistName, index) => (
+                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-55 m-2" key={index}>
                     <p className="font-medium text-2xl break-all text-amber-800">
                       {hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}
                     </p>

src/components/SightingsWidget/SightingWidget.tsx

@@ -70,9 +70,11 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
     mostRecent,
     isLoading,
   } = useSightingFeedContext();
-  console.log(sightings);
+
   const { dispatch } = useAlertHitContext();
-  const { sessionStarted, setSessionList, sessionList, sessionPaused } = useIntegrationsContext();
+  const { state: integrationState, dispatch: integrationDispatch } = useIntegrationsContext();
+  const sessionStarted = integrationState.sessionStarted;
+  const sessionPaused = integrationState.sessionPaused;
 
   const processedRefs = useRef<Set<number | string>>(new Set());
 
@@ -99,10 +101,10 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       if (!mostRecent) return;
       if (sessionPaused) return;
       const reducedMostRecent = reduceObject(mostRecent);
-      setSessionList([...sessionList, reducedMostRecent]);
+      integrationDispatch({ type: "ADD", payload: reducedMostRecent });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mostRecent, sessionStarted, setSessionList]);
+  }, [mostRecent, sessionStarted]);
 
   const onRowClick = useCallback(
     (sighting: SightingType) => {

src/components/UI/Header.tsx

@@ -8,7 +8,11 @@ import { useIntegrationsContext } from "../../context/IntegrationsContext";
 
 export default function Header() {
   const [isFullscreen, setIsFullscreen] = useState(false);
-  const { sessionStarted, sessionPaused } = useIntegrationsContext();
+  const { state } = useIntegrationsContext();
+
+  const sessionStarted = state.sessionStarted;
+
+  const sessionPaused = state.sessionPaused;
 
   const toggleFullscreen = () => {
     if (!document.fullscreenElement) {