diff --git a/src/components/SessionForm/SessionCard.tsx b/src/components/SessionForm/SessionCard.tsx index 1341ca4..4d0cab2 100644 --- a/src/components/SessionForm/SessionCard.tsx +++ b/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>( + const vehicles = dedupedSightings.reduce>( (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"}`); }; diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx index 668f202..f748c7b 100644 --- a/src/components/SightingModal/SightingModal.tsx +++ b/src/components/SightingModal/SightingModal.tsx @@ -127,8 +127,8 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:

Hotlists

- {hotlistNames.map((hotlistName) => ( -
+ {hotlistNames.map((hotlistName, index) => ( +

{hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}

diff --git a/src/components/SightingsWidget/SightingWidget.tsx b/src/components/SightingsWidget/SightingWidget.tsx index 941733d..3f59679 100644 --- a/src/components/SightingsWidget/SightingWidget.tsx +++ b/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>(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) => { diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index 5cb5ba1..c093949 100644 --- a/src/components/UI/Header.tsx +++ b/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) { diff --git a/src/context/IntegrationsContext.ts b/src/context/IntegrationsContext.ts index 1c9daa1..a99c596 100644 --- a/src/context/IntegrationsContext.ts +++ b/src/context/IntegrationsContext.ts @@ -1,15 +1,7 @@ -import { createContext, useContext, type ActionDispatch, type SetStateAction } from "react"; -import type { DedupedSightings, NPEDACTION, NPEDSTATE, ReducedSightingType } from "../types/types"; +import { createContext, useContext, type ActionDispatch } from "react"; +import type { NPEDACTION, NPEDSTATE } from "../types/types"; type IntegrationsValue = { - sessionStarted: boolean; - sessionPaused: boolean; - setSessionPaused: React.Dispatch>; - setSessionStarted: React.Dispatch>; - sessionList: ReducedSightingType[]; - setSessionList: React.Dispatch>; - savedSightings: DedupedSightings; - setSavedSightings: React.Dispatch>; state: NPEDSTATE; dispatch: ActionDispatch<[action: NPEDACTION]>; }; diff --git a/src/context/providers/IntegrationsContextProvider.tsx b/src/context/providers/IntegrationsContextProvider.tsx index 9d514d0..d12540c 100644 --- a/src/context/providers/IntegrationsContextProvider.tsx +++ b/src/context/providers/IntegrationsContextProvider.tsx @@ -1,5 +1,4 @@ -import { useEffect, useReducer, useState, type ReactNode } from "react"; -import type { DedupedSightings, ReducedSightingType } from "../../types/types"; +import { useEffect, useReducer, type ReactNode } from "react"; import { IntegrationsContext } from "../IntegrationsContext"; import { useCameraBlackboard } from "../../hooks/useCameraBlackboard"; import { initialState, reducer } from "../reducers/IntegrationsContextReducer"; @@ -11,10 +10,6 @@ type IntegrationsProviderType = { export const IntegrationsProvider = ({ children }: IntegrationsProviderType) => { const [state, dispatch] = useReducer(reducer, initialState); const { mutation } = useCameraBlackboard(); - const [sessionStarted, setSessionStarted] = useState(false); - const [sessionList, setSessionList] = useState([]); - const [sessionPaused, setSessionPaused] = useState(false); - const [savedSightings, setSavedSightings] = useState([]); useEffect(() => { const fetchData = async () => { @@ -22,23 +17,15 @@ export const IntegrationsProvider = ({ children }: IntegrationsProviderType) => operation: "VIEW", path: "sessionStats", }); - if (!result.result) return; - setSavedSightings(result?.result); + if (!result.result || typeof result.result === "string") return; + + dispatch({ type: "UPDATE", payload: result?.result }); }; fetchData(); }, []); - return (