refactor: NPED Context, sound update and start session

src/components/HistoryList/AlertItem.tsx

@@ -16,6 +16,7 @@ type AlertItemProps = {
 const AlertItem = ({ item }: AlertItemProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { dispatch } = useAlertHitContext();
+
   // const {d} = useCameraBlackboard();
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
   const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;

src/components/SessionForm/SessionCard.tsx

@@ -1,12 +1,13 @@
-import { useSound } from "react-sounds";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
+import { useNPEDContext } from "../../context/NPEDUserContext";
 
 const SessionCard = () => {
-  const { play } = useSound("notification/notification");
-  // function onStart(): void {
-  //   throw new Error("Function not implemented.");
-  // }
+  const { sessionStarted, setSessionStarted, sessionList } = useNPEDContext();
+
+  const handleStartClick = () => {
+    setSessionStarted(!sessionStarted);
+  };
 
   return (
     <Card>
@@ -14,15 +15,13 @@ const SessionCard = () => {
       <div className="flex flex-col gap-4">
         <button
           className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full"
-          onClick={() => {
-            play();
-          }}
+          onClick={handleStartClick}
         >
           Start Session
         </button>
 
         <ul className="text-white space-y-2">
-          <li>Number of Vehicles: </li>
+          <li>Number of Vehicles: {sessionList.length} </li>
           <li>Vehicles without Tax: </li>
           <li>Vehicles without MOT: </li>
           <li>Vehicles with NPED Cat A: </li>

src/components/SettingForms/NPED/NPEDHotlist.tsx

@@ -1,6 +1,7 @@
 import { Form, Formik } from "formik";
 import type { HotlistUploadType } from "../../../types/types";
 import { useSystemConfig } from "../../../hooks/useSystemConfig";
+import { CAM_BASE } from "../../../utils/config";
 
 const NPEDHotlist = () => {
   const { uploadSettings } = useSystemConfig();
@@ -14,7 +15,7 @@ const NPEDHotlist = () => {
       opts: {
         timeoutMs: 30000,
         fieldName: "upload",
-        uploadUrl: "http://192.168.0.90:8080/upload/hotlist-upload/2",
+        uploadUrl: `${CAM_BASE}/upload/hotlist-upload/2`,
       },
     };
 

src/components/SightingsWidget/SightingWidget.tsx

@@ -15,6 +15,7 @@ import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
 import popup from "../../assets/sounds/ui/popup_open.mp3";
 import { useSound } from "react-sounds";
+import { useNPEDContext } from "../../context/NPEDUserContext";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -46,9 +47,18 @@ export default function SightingHistoryWidget({
     setSightingModalOpen,
     isSightingModalOpen,
     selectedSighting,
+    mostRecent,
   } = useSightingFeedContext();
 
   const { dispatch } = useAlertHitContext();
+  const { sessionStarted, setSessionList, sessionList } = useNPEDContext();
+
+  useEffect(() => {
+    if (sessionStarted) {
+      if (!mostRecent) return;
+      setSessionList([...sessionList, mostRecent]);
+    }
+  }, [mostRecent, sessionStarted, setSessionList]);
 
   const hasAutoOpenedRef = useRef(false);
 
@@ -84,10 +94,11 @@ export default function SightingHistoryWidget({
   useEffect(() => {
     if (hasAutoOpenedRef.current) return;
     const firstHot = rows?.find((r) => {
+      const isHotListHit = r?.metadata?.hotlistMatches?.Hotlist0 === true;
       const isNPEDHitA = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
       const isNPEDHitB = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
       const isNPEDHitC = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
-      return isNPEDHitA || isNPEDHitB || isNPEDHitC;
+      return isNPEDHitA || isNPEDHitB || isNPEDHitC || isHotListHit;
     });
     if (firstHot) {
       setSelectedSighting(firstHot);

src/components/UI/Header.tsx

@@ -11,6 +11,7 @@ import {
 import type { VersionFieldType } from "../../types/types";
 import { useEffect, useState } from "react";
 import SoundBtn from "./SoundBtn";
+import { useNPEDContext } from "../../context/NPEDUserContext";
 
 async function fetchVersions(
   signal?: AbortSignal
@@ -43,6 +44,7 @@ export default function Header() {
   const [offsetMs, setOffsetMs] = useState<number | null>(null);
   const [nowMs, setNowMs] = useState<number>(Date.now());
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const { sessionStarted } = useNPEDContext();
 
   const toggleFullscreen = () => {
     if (!document.fullscreenElement) {
@@ -98,6 +100,9 @@ export default function Header() {
         </Link>
       </div>
       <div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
+        {sessionStarted && (
+          <div className="text-green-400 font-bold">Session Active</div>
+        )}
         <div className="flex flex-col leading-tight text-white tabular-nums text-xl text-right mx-auto md:mx-10 space-y-1 my-2">
           <h2>Local: {localStr}</h2>
           <h2>UTC: {utcStr}</h2>

src/components/UI/NavigationArrow.tsx

@@ -3,14 +3,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "react-router";
 
 type NavigationArrowProps = {
-  side: string;
+  side: string | undefined;
   settingsPage?: boolean;
 };
 
 const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   const navigate = useNavigate();
 
-  const navigationDest = (side: string) => {
+  const navigationDest = (side: string | undefined) => {
     if (settingsPage) {
       navigate("/");
       return;

src/context/NPEDUserContext.ts

@@ -1,9 +1,13 @@
 import { createContext, useContext, type SetStateAction } from "react";
-import type { NPEDUser } from "../types/types";
+import type { NPEDUser, SightingType } from "../types/types";
 
 type UserContextValue = {
   user: NPEDUser | null;
   setUser: React.Dispatch<SetStateAction<NPEDUser | null>>;
+  sessionStarted: boolean;
+  setSessionStarted: React.Dispatch<SetStateAction<boolean>>;
+  sessionList: SightingType[];
+  setSessionList: React.Dispatch<SetStateAction<SightingType[]>>;
 };
 
 export const NPEDUserContext = createContext<UserContextValue | undefined>(

src/context/SightingFeedContext.ts

@@ -7,7 +7,7 @@ type SightingFeedContextType = {
   setSelectedRef: (ref: number | null) => void;
   // effectiveSelected: SightingType | null;
   mostRecent: SightingType | null;
-  side: string;
+  side: string | undefined;
   selectedSighting: SightingType | null;
   setSelectedSighting: (sighting: SightingType | SightingType | null) => void;
   setSightingModalOpen: (isSightingModalOpen: boolean) => void;
@@ -15,6 +15,9 @@ type SightingFeedContextType = {
   isError: boolean;
   isLoading: boolean;
   data: SightingType | undefined;
+  sessionList: SightingType[];
+  sessionStarted: boolean;
+  setSessionStarted: (started: boolean) => void;
 };
 
 export const SightingFeedContext = createContext<

src/context/providers/NPEDUserContextProvider.tsx

@@ -1,5 +1,5 @@
 import { useState, type ReactNode } from "react";
-import type { NPEDUser } from "../../types/types";
+import type { NPEDUser, SightingType } from "../../types/types";
 import { NPEDUserContext } from "../NPEDUserContext";
 
 type NPEDUserProviderType = {
@@ -8,9 +8,20 @@ type NPEDUserProviderType = {
 
 export const NPEDUserProvider = ({ children }: NPEDUserProviderType) => {
   const [user, setUser] = useState<NPEDUser | null>(null);
+  const [sessionStarted, setSessionStarted] = useState(false);
+  const [sessionList, setSessionList] = useState<SightingType[]>([]);
 
   return (
-    <NPEDUserContext.Provider value={{ user, setUser }}>
+    <NPEDUserContext.Provider
+      value={{
+        user,
+        setUser,
+        setSessionStarted,
+        sessionStarted,
+        sessionList,
+        setSessionList,
+      }}
+    >
       {children}
     </NPEDUserContext.Provider>
   );

src/context/providers/SightingFeedProvider.tsx

@@ -3,9 +3,9 @@ import { useSightingFeed } from "../../hooks/useSightingFeed";
 import { SightingFeedContext } from "../SightingFeedContext";
 
 type SightingFeedProviderProps = {
-  url: string;
+  url?: string | undefined;
   children: ReactNode;
-  side: string;
+  side?: string | undefined;
 };
 
 export const SightingFeedProvider = ({
@@ -23,7 +23,10 @@ export const SightingFeedProvider = ({
     setSelectedSighting,
     selectedSighting,
     mostRecent,
-  } = useSightingFeed(url, side);
+    sessionList,
+    sessionStarted,
+    setSessionStarted,
+  } = useSightingFeed(url);
 
   const [isSightingModalOpen, setSightingModalOpen] = useState(false);
 
@@ -42,6 +45,9 @@ export const SightingFeedProvider = ({
         isLoading,
         side,
         data,
+        sessionList,
+        sessionStarted,
+        setSessionStarted,
       }}
     >
       {children}

src/hooks/useOverviewVideo.ts

@@ -1,10 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import { useRef } from "react";
-
-const apiUrl = import.meta.env.VITE_BASEURL;
+import { CAM_BASE } from "../utils/config";
 
 async function fetchOverviewImage(cameraSide: string) {
-  const response = await fetch(`${apiUrl}${cameraSide}-preview`);
+  const response = await fetch(`${CAM_BASE}/${cameraSide}-preview`);
   if (!response.ok) throw new Error("could not fetch overview image");
   return response.blob();
 }

src/hooks/useSightingFeed.ts

@@ -2,25 +2,30 @@ import { useEffect, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { SightingType } from "../types/types";
 import { useSoundOnChange } from "react-sounds";
-import click from "../assets/sounds/ui/computer-mouse-click.mp3";
+import switchSound from "../assets/sounds/ui/switch.mp3";
 
-async function fetchSighting(url: string, ref: number): Promise<SightingType> {
+async function fetchSighting(
+  url: string | undefined,
+  ref: number
+): Promise<SightingType> {
   const res = await fetch(`${url}${ref}`);
   if (!res.ok) throw new Error(String(res.status));
   return res.json();
 }
 
-export function useSightingFeed(url: string, side: string) {
+export function useSightingFeed(url: string | undefined) {
   const [sightings, setSightings] = useState<SightingType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
+  const [sessionStarted, setSessionStarted] = useState(false);
+  const [sessionList, setSessionList] = useState<SightingType[]>([]);
   const mostRecent = sightings[0] ?? null;
   const latestRef = mostRecent?.ref ?? null;
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
     null
   );
 
-  useSoundOnChange(click, latestRef, {
-    volume: side === "Rear" ? 0 : 1,
+  useSoundOnChange(switchSound, latestRef, {
+    volume: 1,
   });
 
   const currentRef = useRef<number>(-1);
@@ -52,6 +57,13 @@ export function useSightingFeed(url: string, side: string) {
     staleTime: 0,
   });
 
+  useEffect(() => {
+    if (sessionStarted) {
+      if (!mostRecent) return;
+      setSessionList([...sessionList, mostRecent]);
+    }
+  }, [mostRecent, sessionList, sessionStarted]);
+
   useEffect(() => {
     const data = query.data;
     if (!data) return;
@@ -92,13 +104,15 @@ export function useSightingFeed(url: string, side: string) {
       // console.error("Sighting feed error:", query.error);
     }
   }, [query.error]);
-
   return {
     sightings,
     selectedRef,
     setSelectedRef,
     mostRecent,
     selectedSighting,
+    sessionList,
+    sessionStarted,
+    setSessionStarted,
     setSelectedSighting,
     data: query.data,
     isLoading: query.isLoading,

src/main.tsx

@@ -13,7 +13,7 @@ Modal.setAppElement("#root");
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <BrowserRouter basename="/index">
+      <BrowserRouter basename="/InCarTest">
         <App />
       </BrowserRouter>
     </QueryClientProvider>

src/pages/Dashboard.tsx

@@ -2,6 +2,7 @@ import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCame
 import RearCameraOverviewCard from "../components/RearCameraOverview/RearCameraOverviewCard";
 import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget";
 import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";
+
 import { CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {

src/pages/Session.tsx

@@ -2,18 +2,21 @@ import HistoryList from "../components/HistoryList/HistoryList.tsx";
 import HitSearchCard from "../components/SessionForm/HitSearchCard.tsx";
 import SessionCard from "../components/SessionForm/SessionCard.tsx";
 import { useAlertHitContext } from "../context/AlertHitContext.ts";
+import { SightingFeedProvider } from "../context/providers/SightingFeedProvider.tsx";
 
 const Session = () => {
   useAlertHitContext();
 
   return (
-    <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-1 sm:px-2 lg:px-0 w-full">
-      <HitSearchCard />
-      <SessionCard />
-      <div className="col-span-2">
-        <HistoryList />
+    <SightingFeedProvider>
+      <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-1 sm:px-2 lg:px-0 w-full">
+        <HitSearchCard />
+        <SessionCard />
+        <div className="col-span-2">
+          <HistoryList />
+        </div>
       </div>
-    </div>
+    </SightingFeedProvider>
   );
 };
 

src/utils/config.ts

@@ -1,5 +1,4 @@
-// const rawCamBase = import.meta.env.VITE_CAM_BASE;
-const rawCamBase = import.meta.env.VITE_OUTSIDE_BASEURL;
+const rawCamBase = import.meta.env.VITE_CAM_BASE;
 
 export const CAM_BASE =
   rawCamBase && rawCamBase.trim().length > 0