- added functionality to save sighting sessions to black board

src/components/SessionForm/SessionCard.tsx

@@ -6,30 +6,18 @@ import { toast } from "sonner";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFloppyDisk, faPause, faPlay, faStop } from "@fortawesome/free-solid-svg-icons";
 import VehicleSessionItem from "../UI/VehicleSessionItem";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 
 const SessionCard = () => {
-  const { sessionStarted, setSessionStarted, sessionList, setSessionPaused, sessionPaused } = useNPEDContext();
-
-  const handleStartClick = () => {
-    setSessionStarted(!sessionStarted);
-    setSessionPaused(false);
-    toast(`${sessionStarted ? "Vehicle tracking session ended" : "Vehicle tracking session started"}`);
-  };
-
-  const handleSaveCick = () => {
-    console.log("clicked");
-  };
-
-  const handlepauseClick = () => {
-    setSessionPaused(!sessionPaused);
-    toast(`${sessionStarted ? "Vehicle tracking session paused" : "Vehicle tracking session resumed"}`);
-  };
+  const { sessionStarted, setSessionStarted, sessionList, setSessionPaused, sessionPaused, savedSightings } =
+    useNPEDContext();
+  const { mutation } = useCameraBlackboard();
 
   const sightings = [...new Map(sessionList.map((vehicle) => [vehicle.vrm, vehicle]))];
 
   const dedupedSightings = sightings.map((sighting) => sighting[1]);
 
-  const vehicles = dedupedSightings.reduce<Record<string, ReducedSightingType[]>>(
+  const vehicles = savedSightings.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);
@@ -39,6 +27,7 @@ const SessionCard = () => {
       if (item.metadata?.npedJSON["TAX STATUS"] === false) acc.notTaxed.push(item);
       if (item.metadata?.npedJSON["MOT STATUS"] === false) acc.notMOT.push(item);
       if (hotlisthit) acc.hotlistHit.push(item);
+      acc.vehicles.push(item);
       return acc;
     },
     {
@@ -49,9 +38,31 @@ const SessionCard = () => {
       notTaxed: [],
       notMOT: [],
       hotlistHit: [],
+      vehicles: [],
     }
   );
 
+  const handleStartClick = () => {
+    setSessionStarted(!sessionStarted);
+    setSessionPaused(false);
+    toast(`${sessionStarted ? "Vehicle tracking session ended" : "Vehicle tracking session started"}`);
+  };
+
+  const handlepauseClick = () => {
+    setSessionPaused(!sessionPaused);
+    toast(`${sessionStarted ? "Vehicle tracking session paused" : "Vehicle tracking session resumed"}`);
+  };
+
+  const handleSaveCick = async () => {
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "sessionStats",
+      value: dedupedSightings,
+    });
+
+    if (result.reason === "OK") toast.success("Session saved");
+  };
+
   return (
     <Card className="p-4 col-span-3">
       <CardHeader title="Session" />
@@ -94,7 +105,7 @@ const SessionCard = () => {
 
         <ul className="text-white space-y-2">
           <VehicleSessionItem
-            sessionNumber={dedupedSightings.length}
+            sessionNumber={vehicles.vehicles.length}
             textColour="text-green-400"
             vehicleTag={"Number of Vehicles sightings:"}
           />