- refactored NPED Login & logout

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]))];

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"

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());
 

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) {