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;