From 251a2f5e7b3c45210bc235f86e16def21b4b6c26 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Mon, 27 Oct 2025 09:35:59 +0000
Subject: [PATCH 1/2] - refactored NPED Login & logout

---
 src/App.tsx                                   |  6 ++--
 src/components/SessionForm/SessionCard.tsx    |  4 +--
 .../SettingForms/NPED/NPEDFields.tsx          | 33 +++++++------------
 .../SightingsWidget/SightingWidget.tsx        |  6 ++--
 src/components/UI/Header.tsx                  |  4 +--
 src/context/IntegrationsContext.ts            | 22 +++++++++++++
 src/context/NPEDUserContext.ts                | 22 -------------
 ...er.tsx => IntegrationsContextProvider.tsx} | 21 ++++++------
 ...ducer.ts => IntegrationsContextReducer.ts} | 13 +++++++-
 src/hooks/useNPEDAuth.ts                      | 20 +++++------
 src/types/types.ts                            |  1 +
 11 files changed, 76 insertions(+), 76 deletions(-)
 create mode 100644 src/context/IntegrationsContext.ts
 delete mode 100644 src/context/NPEDUserContext.ts
 rename src/context/providers/{NPEDUserContextProvider.tsx => IntegrationsContextProvider.tsx} (68%)
 rename src/context/reducers/{NPEDContextReducer.ts => IntegrationsContextReducer.ts} (63%)

diff --git a/src/App.tsx b/src/App.tsx
index 3d9f929..980e322 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,7 @@ import FrontCamera from "./pages/FrontCamera";
 import RearCamera from "./pages/RearCamera";
 import SystemSettings from "./pages/SystemSettings";
 import Session from "./pages/Session";
-import { NPEDUserProvider } from "./context/providers/NPEDUserContextProvider";
+import { IntegrationsProvider } from "./context/providers/IntegrationsContextProvider";
 import { AlertHitProvider } from "./context/providers/AlertHitProvider";
 import { SoundProvider } from "react-sounds";
 import SoundContextProvider from "./context/providers/SoundContextProvider";
@@ -14,7 +14,7 @@ function App() {
   return (
     <SoundContextProvider>
       <SoundProvider initialEnabled={true}>
-        <NPEDUserProvider>
+        <IntegrationsProvider>
           <AlertHitProvider>
             <Routes>
               <Route path="/" element={<Container />}>
@@ -27,7 +27,7 @@ function App() {
               </Route>
             </Routes>
           </AlertHitProvider>
-        </NPEDUserProvider>
+        </IntegrationsProvider>
       </SoundProvider>
     </SoundContextProvider>
   );
diff --git a/src/components/SessionForm/SessionCard.tsx b/src/components/SessionForm/SessionCard.tsx
index 42cdd7f..1341ca4 100644
--- a/src/components/SessionForm/SessionCard.tsx
+++ b/src/components/SessionForm/SessionCard.tsx
@@ -1,6 +1,6 @@
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
-import { useNPEDContext } from "../../context/NPEDUserContext";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
 import type { ReducedSightingType } from "../../types/types";
 import { toast } from "sonner";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -10,7 +10,7 @@ import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 
 const SessionCard = () => {
   const { sessionStarted, setSessionStarted, sessionList, setSessionPaused, sessionPaused, savedSightings } =
-    useNPEDContext();
+    useIntegrationsContext();
   const { mutation } = useCameraBlackboard();
 
   const sightings = [...new Map(sessionList.map((vehicle) => [vehicle.vrm, vehicle]))];
diff --git a/src/components/SettingForms/NPED/NPEDFields.tsx b/src/components/SettingForms/NPED/NPEDFields.tsx
index 3e42d24..795c074 100644
--- a/src/components/SettingForms/NPED/NPEDFields.tsx
+++ b/src/components/SettingForms/NPED/NPEDFields.tsx
@@ -6,16 +6,18 @@ import { toast } from "sonner";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
+import { useIntegrationsContext } from "../../../context/IntegrationsContext";
 
 const NPEDFields = () => {
+  const { state } = useIntegrationsContext();
   const [showPwd, setShowPwd] = useState(false);
-  const { signIn, user, signOut } = useNPEDAuth();
+  const { signIn, signOut } = useNPEDAuth();
 
-  const initialValues = user
+  const initialValues = state.npedUser
     ? {
-        username: user?.propUsername?.value,
-        password: user?.propPassword?.value,
-        clientId: user?.propClientID?.value,
+        username: state.npedUser?.propUsername?.value,
+        password: state.npedUser?.propPassword?.value,
+        clientId: state.npedUser?.propClientID?.value,
         frontId: "NPED",
         rearId: "NPED",
       }
@@ -48,20 +50,13 @@ const NPEDFields = () => {
   };
 
   return (
-    <Formik
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-      validate={validateValues}
-      enableReinitialize
-    >
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} validate={validateValues} enableReinitialize>
       {({ errors, touched, isSubmitting }) => (
         <Form className="flex flex-col space-y-5 px-2">
           <FormGroup>
             <label htmlFor="username">Username</label>
             {touched.username && errors.username && (
-              <small className="absolute right-0 -top-5 text-red-500">
-                {errors.username}
-              </small>
+              <small className="absolute right-0 -top-5 text-red-500">{errors.username}</small>
             )}
             <Field
               name="username"
@@ -82,9 +77,7 @@ const NPEDFields = () => {
                 className="p-2 border border-gray-400 rounded-lg w-full"
               />
               {touched.password && errors.password && (
-                <small className="absolute right-0 -top-5 text-red-500">
-                  {errors.password}
-                </small>
+                <small className="absolute right-0 -top-5 text-red-500">{errors.password}</small>
               )}
               <FontAwesomeIcon
                 type="button"
@@ -97,9 +90,7 @@ const NPEDFields = () => {
           <FormGroup>
             <label htmlFor="clientId">Client ID</label>
             {touched.clientId && errors.clientId && (
-              <small className="absolute right-0 -top-5 text-red-500">
-                {errors.clientId}
-              </small>
+              <small className="absolute right-0 -top-5 text-red-500">{errors.clientId}</small>
             )}
             <Field
               name="clientId"
@@ -109,7 +100,7 @@ const NPEDFields = () => {
               className="p-1.5 border border-gray-400 rounded-lg"
             />
           </FormGroup>
-          {!user?.propClientID?.value ? (
+          {!state.npedUser?.propClientID?.value ? (
             <button
               type="submit"
               className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
diff --git a/src/components/SightingsWidget/SightingWidget.tsx b/src/components/SightingsWidget/SightingWidget.tsx
index e093748..941733d 100644
--- a/src/components/SightingsWidget/SightingWidget.tsx
+++ b/src/components/SightingsWidget/SightingWidget.tsx
@@ -15,7 +15,7 @@ import NPED_CAT_C from "/NPED_Cat_C.svg";
 import popup from "../../assets/sounds/ui/popup_open.mp3";
 import notification from "../../assets/sounds/ui/notification.mp3";
 import { useSound } from "react-sounds";
-import { useNPEDContext } from "../../context/NPEDUserContext";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
 import { useSoundContext } from "../../context/SoundContext";
 import Loading from "../UI/Loading";
 import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
@@ -70,9 +70,9 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
     mostRecent,
     isLoading,
   } = useSightingFeedContext();
-
+  console.log(sightings);
   const { dispatch } = useAlertHitContext();
-  const { sessionStarted, setSessionList, sessionList, sessionPaused } = useNPEDContext();
+  const { sessionStarted, setSessionList, sessionList, sessionPaused } = useIntegrationsContext();
 
   const processedRefs = useRef<Set<number | string>>(new Set());
 
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 6fdf67a..5cb5ba1 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -4,11 +4,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGear, faHome, faListCheck, faMaximize, faMinimize, faRotate } from "@fortawesome/free-solid-svg-icons";
 import { useState } from "react";
 import SoundBtn from "./SoundBtn";
-import { useNPEDContext } from "../../context/NPEDUserContext";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
 
 export default function Header() {
   const [isFullscreen, setIsFullscreen] = useState(false);
-  const { sessionStarted, sessionPaused } = useNPEDContext();
+  const { sessionStarted, sessionPaused } = useIntegrationsContext();
 
   const toggleFullscreen = () => {
     if (!document.fullscreenElement) {
diff --git a/src/context/IntegrationsContext.ts b/src/context/IntegrationsContext.ts
new file mode 100644
index 0000000..1c9daa1
--- /dev/null
+++ b/src/context/IntegrationsContext.ts
@@ -0,0 +1,22 @@
+import { createContext, useContext, type ActionDispatch, type SetStateAction } from "react";
+import type { DedupedSightings, NPEDACTION, NPEDSTATE, ReducedSightingType } from "../types/types";
+
+type IntegrationsValue = {
+  sessionStarted: boolean;
+  sessionPaused: boolean;
+  setSessionPaused: React.Dispatch<SetStateAction<boolean>>;
+  setSessionStarted: React.Dispatch<SetStateAction<boolean>>;
+  sessionList: ReducedSightingType[];
+  setSessionList: React.Dispatch<SetStateAction<ReducedSightingType[]>>;
+  savedSightings: DedupedSightings;
+  setSavedSightings: React.Dispatch<SetStateAction<DedupedSightings>>;
+  state: NPEDSTATE;
+  dispatch: ActionDispatch<[action: NPEDACTION]>;
+};
+
+export const IntegrationsContext = createContext<IntegrationsValue | undefined>(undefined);
+export const useIntegrationsContext = () => {
+  const ctx = useContext(IntegrationsContext);
+  if (!ctx) throw new Error("useNPEDContext must be used within <IntegrationsProvider>");
+  return ctx;
+};
diff --git a/src/context/NPEDUserContext.ts b/src/context/NPEDUserContext.ts
deleted file mode 100644
index d4fba95..0000000
--- a/src/context/NPEDUserContext.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createContext, useContext, type SetStateAction } from "react";
-import type { DedupedSightings, NPEDUser, ReducedSightingType } from "../types/types";
-
-type UserContextValue = {
-  user: NPEDUser | null;
-  setUser: React.Dispatch<SetStateAction<NPEDUser | null>>;
-  sessionStarted: boolean;
-  sessionPaused: boolean;
-  setSessionPaused: React.Dispatch<SetStateAction<boolean>>;
-  setSessionStarted: React.Dispatch<SetStateAction<boolean>>;
-  sessionList: ReducedSightingType[];
-  setSessionList: React.Dispatch<SetStateAction<ReducedSightingType[]>>;
-  savedSightings: DedupedSightings;
-  setSavedSightings: React.Dispatch<SetStateAction<DedupedSightings>>;
-};
-
-export const NPEDUserContext = createContext<UserContextValue | undefined>(undefined);
-export const useNPEDContext = () => {
-  const ctx = useContext(NPEDUserContext);
-  if (!ctx) throw new Error("useNPEDContext must be used within <NPEDUserProvider>");
-  return ctx;
-};
diff --git a/src/context/providers/NPEDUserContextProvider.tsx b/src/context/providers/IntegrationsContextProvider.tsx
similarity index 68%
rename from src/context/providers/NPEDUserContextProvider.tsx
rename to src/context/providers/IntegrationsContextProvider.tsx
index 17b0d69..9d514d0 100644
--- a/src/context/providers/NPEDUserContextProvider.tsx
+++ b/src/context/providers/IntegrationsContextProvider.tsx
@@ -1,17 +1,16 @@
 import { useEffect, useReducer, useState, type ReactNode } from "react";
-import type { DedupedSightings, NPEDUser, ReducedSightingType } from "../../types/types";
-import { NPEDUserContext } from "../NPEDUserContext";
+import type { DedupedSightings, ReducedSightingType } from "../../types/types";
+import { IntegrationsContext } from "../IntegrationsContext";
 import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
-import { initialState, reducer } from "../reducers/NPEDContextReducer";
+import { initialState, reducer } from "../reducers/IntegrationsContextReducer";
 
-type NPEDUserProviderType = {
+type IntegrationsProviderType = {
   children: ReactNode;
 };
 
-export const NPEDUserProvider = ({ children }: NPEDUserProviderType) => {
+export const IntegrationsProvider = ({ children }: IntegrationsProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { mutation } = useCameraBlackboard();
-  const [user, setUser] = useState<NPEDUser | null>(null);
   const [sessionStarted, setSessionStarted] = useState(false);
   const [sessionList, setSessionList] = useState<ReducedSightingType[]>([]);
   const [sessionPaused, setSessionPaused] = useState(false);
@@ -28,12 +27,10 @@ export const NPEDUserProvider = ({ children }: NPEDUserProviderType) => {
     };
     fetchData();
   }, []);
-  console.log(savedSightings);
+
   return (
-    <NPEDUserContext.Provider
+    <IntegrationsContext.Provider
       value={{
-        user,
-        setUser,
         setSessionStarted,
         sessionStarted,
         sessionList,
@@ -42,9 +39,11 @@ export const NPEDUserProvider = ({ children }: NPEDUserProviderType) => {
         setSessionPaused,
         savedSightings,
         setSavedSightings,
+        state,
+        dispatch,
       }}
     >
       {children}
-    </NPEDUserContext.Provider>
+    </IntegrationsContext.Provider>
   );
 };
diff --git a/src/context/reducers/NPEDContextReducer.ts b/src/context/reducers/IntegrationsContextReducer.ts
similarity index 63%
rename from src/context/reducers/NPEDContextReducer.ts
rename to src/context/reducers/IntegrationsContextReducer.ts
index 4349bbc..1d4ec1a 100644
--- a/src/context/reducers/NPEDContextReducer.ts
+++ b/src/context/reducers/IntegrationsContextReducer.ts
@@ -5,15 +5,26 @@ export const initialState = {
   sessionList: [],
   sessionPaused: false,
   savedSightings: [],
+  npedUser: null,
 };
 
 export function reducer(state: NPEDSTATE, action: NPEDACTION) {
   switch (action.type) {
-    case "SESSION":
+    case "SESSIONSTART":
       return {
         ...state,
         sessionStarted: action.payload,
       };
+    case "LOGIN":
+      return {
+        ...state,
+        npedUser: action.payload,
+      };
+    case "LOGOUT":
+      return {
+        ...state,
+        npedUser: action.payload,
+      };
     default:
       return { ...state };
   }
diff --git a/src/hooks/useNPEDAuth.ts b/src/hooks/useNPEDAuth.ts
index 619f4e5..31c7ea7 100644
--- a/src/hooks/useNPEDAuth.ts
+++ b/src/hooks/useNPEDAuth.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import type { NPEDFieldType } from "../types/types";
-import { useNPEDContext } from "../context/NPEDUserContext";
+import { useIntegrationsContext } from "../context/IntegrationsContext";
 import { useEffect } from "react";
 import { CAM_BASE } from "../utils/config";
 import { toast } from "sonner";
@@ -42,8 +42,7 @@ async function signIn(loginDetails: NPEDFieldType) {
     }),
   ]);
 
-  if (!frontRes.ok || !rearRes.ok)
-    throw new Error("Cannot reach NPED endpoint");
+  if (!frontRes.ok || !rearRes.ok) throw new Error("Cannot reach NPED endpoint");
 
   return {
     frontResponse: frontRes.json(),
@@ -73,7 +72,7 @@ async function signOut() {
 }
 
 export const useNPEDAuth = () => {
-  const { setUser, user } = useNPEDContext();
+  const { dispatch } = useIntegrationsContext();
 
   const signInMutation = useMutation({
     mutationKey: ["NPEDSignin"],
@@ -84,7 +83,8 @@ export const useNPEDAuth = () => {
     onSuccess: async (data) => {
       toast.dismiss();
       toast.success("Signed in successfully!");
-      setUser(await data.frontResponse);
+
+      dispatch({ type: "LOGIN", payload: await data.frontResponse });
     },
     onError: (error) => {
       toast.dismiss();
@@ -101,7 +101,7 @@ export const useNPEDAuth = () => {
     mutationFn: signOut,
     onSuccess: () => {
       toast.success("Signed out successfully");
-      setUser(null);
+      dispatch({ type: "LOGOUT", payload: null });
     },
     onError: (error) => {
       toast.error(`Sign-out failed: ${error.message}`);
@@ -115,11 +115,11 @@ export const useNPEDAuth = () => {
 
   useEffect(() => {
     if (fetchdataQuery.isSuccess && fetchdataQuery.data) {
-      setUser(fetchdataQuery.data);
+      dispatch({ type: "LOGIN", payload: fetchdataQuery.data });
     } else {
-      setUser(null);
+      dispatch({ type: "LOGOUT", payload: null });
     }
-  }, [fetchdataQuery.data, fetchdataQuery.isSuccess, setUser]);
+  }, [dispatch, fetchdataQuery.data, fetchdataQuery.isSuccess]);
 
   useEffect(() => {
     if (fetchdataQuery.isError) toast.error(fetchdataQuery.error.message);
@@ -134,8 +134,6 @@ export const useNPEDAuth = () => {
     data: signInMutation.data,
     fetchdataQueryError: fetchdataQuery.error,
     fetchdataQueryLoading: fetchdataQuery.isLoading,
-    user,
-    setUser,
     signOut: signOutMutation.mutate,
   };
 };
diff --git a/src/types/types.ts b/src/types/types.ts
index ef5e406..45d8c79 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -387,6 +387,7 @@ export type NPEDSTATE = {
   sessionList: ReducedSightingType[];
   sessionPaused: boolean;
   savedSightings: DedupedSightings;
+  npedUser: NPEDUser;
 };
 
 export type NPEDACTION = {

From 2d5b2640415b1c8f623555bcdb04e004f07f01d9 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Mon, 27 Oct 2025 11:04:53 +0000
Subject: [PATCH 2/2] - refactored state for sessionlist, and session active
 and pause states

---
 src/components/SessionForm/SessionCard.tsx    | 17 ++++++++-------
 .../SightingModal/SightingModal.tsx           |  4 ++--
 .../SightingsWidget/SightingWidget.tsx        | 10 +++++----
 src/components/UI/Header.tsx                  |  6 +++++-
 src/context/IntegrationsContext.ts            | 12 ++---------
 .../providers/IntegrationsContextProvider.tsx | 21 ++++---------------
 .../reducers/IntegrationsContextReducer.ts    | 15 +++++++++++++
 7 files changed, 44 insertions(+), 41 deletions(-)

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<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"}`);
   };
 
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 }:
             <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>
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<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) => {
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<SetStateAction<boolean>>;
-  setSessionStarted: React.Dispatch<SetStateAction<boolean>>;
-  sessionList: ReducedSightingType[];
-  setSessionList: React.Dispatch<SetStateAction<ReducedSightingType[]>>;
-  savedSightings: DedupedSightings;
-  setSavedSightings: React.Dispatch<SetStateAction<DedupedSightings>>;
   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<ReducedSightingType[]>([]);
-  const [sessionPaused, setSessionPaused] = useState(false);
-  const [savedSightings, setSavedSightings] = useState<DedupedSightings | []>([]);
 
   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 (
     <IntegrationsContext.Provider
       value={{
-        setSessionStarted,
-        sessionStarted,
-        sessionList,
-        setSessionList,
-        sessionPaused,
-        setSessionPaused,
-        savedSightings,
-        setSavedSightings,
         state,
         dispatch,
       }}
diff --git a/src/context/reducers/IntegrationsContextReducer.ts b/src/context/reducers/IntegrationsContextReducer.ts
index 1d4ec1a..f740f4c 100644
--- a/src/context/reducers/IntegrationsContextReducer.ts
+++ b/src/context/reducers/IntegrationsContextReducer.ts
@@ -25,6 +25,21 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
         ...state,
         npedUser: action.payload,
       };
+    case "SESSIONPAUSE":
+      return {
+        ...state,
+        sessionPaused: action.payload,
+      };
+    case "ADD":
+      return {
+        ...state,
+        sessionList: [...state.sessionList, action.payload],
+      };
+    case "UPDATE":
+      return {
+        ...state,
+        sessionList: action.payload,
+      };
     default:
       return { ...state };
   }