update camera base URL, enhance alert context, and improve history list functionality

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;
   const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";

src/components/HistoryList/HistoryList.tsx

@@ -1,25 +1,46 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useAlertHitContext } from "../../context/AlertHitContext";
-import type { SightingType } from "../../types/types";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import type { CameraBlackBoardOptions, SightingType } from "../../types/types";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import AlertItem from "./AlertItem";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 
 const HistoryList = () => {
-  const { state, dispatch } = useAlertHitContext();
+  const { state, dispatch, isLoading, error } = useAlertHitContext();
+  const { mutation } = useCameraBlackboard();
 
-  const handleDeleteClick = (alertItem: SightingType) =>
+  const handleDeleteClick = (alertItem: SightingType, idx?: number) => {
     dispatch({ type: "REMOVE", payload: alertItem });
+    mutation.mutate({ operation: "POP", path: "alertHistory", value: idx });
+  };
+
+  const handleClearListClick = (listName: CameraBlackBoardOptions) => {
+    dispatch({ type: "DELETE", payload: [] });
+    mutation.mutate({
+      operation: "DELETE",
+      path: listName.path,
+    });
+  };
+
   return (
     <Card className="h-100">
       <CardHeader title="Alert History" />
+      <button
+        className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition md:w-[10%] mb-2"
+        onClick={() => handleClearListClick({ path: "alertHistory" })}
+      >
+        Clear List
+      </button>
+      {isLoading && <p>Loading...</p>}
+      {error && <p className="text-red-500">Error: {error.message}</p>}
       <div className="flex flex-col gap-1">
         {state?.alertList?.length > 0 ? (
           state?.alertList?.map((alertItem, index) => (
             <div key={index} className="flex flex-row space-x-2">
               <AlertItem item={alertItem} />
-              <button onClick={() => handleDeleteClick(alertItem)}>
+              <button onClick={() => handleDeleteClick(alertItem, index)}>
                 <div className="p-4">
                   <FontAwesomeIcon icon={faTrash} size="2x" />
                 </div>

src/components/SightingModal/SightingModal.tsx

@@ -5,6 +5,7 @@ import ModalComponent from "../UI/ModalComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useAlertHitContext } from "../../context/AlertHitContext";
 import { toast, Toaster } from "sonner";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 import HotListImg from "/Hotlist_Hit.svg";
 import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
@@ -24,16 +25,37 @@ const SightingModal = ({
   onDelete,
 }: SightingModalProps) => {
   const { dispatch } = useAlertHitContext();
+  const { query, mutation } = useCameraBlackboard();
 
   const handleAcknowledgeButton = () => {
-    if (!sighting) {
-      toast.error("Cannot add sighting to alert list");
+    try {
+      if (!sighting) {
+        toast.error("Cannot add sighting to alert list");
+        handleClose();
+        return;
+      }
+      if (!query.data.alertHistory) {
+        mutation.mutate({
+          operation: "INSERT",
+          path: "alertHistory",
+          value: [sighting],
+        });
+      } else {
+        mutation.mutate({
+          operation: "APPEND",
+          path: "alertHistory",
+          value: sighting,
+        });
+      }
+
+      dispatch({ type: "ADD", payload: sighting });
+      toast.success("Sighting successfully added to alert list");
+      handleClose();
+    } catch (error) {
+      console.log(error);
+      toast.error("Failed to add sighting to alert list");
       handleClose();
-      return;
     }
-    dispatch({ type: "ADD", payload: sighting });
-    toast.success("Sighting successfully added to alert list");
-    handleClose();
   };
 
   const handleDeleteClick = () => {

src/context/AlertHitContext.ts

@@ -5,6 +5,9 @@ type AlertHitContextValueType = {
   state: AlertState;
   action?: AlertPayload;
   dispatch: React.Dispatch<AlertPayload>;
+  isLoading?: boolean;
+  isError?: boolean;
+  error?: Error | null;
 };
 
 export const AlertHitContext = createContext<

src/context/providers/AlertHitProvider.tsx

@@ -1,6 +1,8 @@
-import { useReducer, type ReactNode } from "react";
+import { useEffect, useReducer, type ReactNode } from "react";
 import AlertHitContext from "../AlertHitContext";
 import { reducer, initalState } from "../reducers/AlertReducers";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import type { SightingType } from "../../types/types";
 
 type AlertHitProviderTypeProps = {
   children: ReactNode;
@@ -8,9 +10,30 @@ type AlertHitProviderTypeProps = {
 
 export const AlertHitProvider = ({ children }: AlertHitProviderTypeProps) => {
   const [state, dispatch] = useReducer(reducer, initalState);
+  const { query } = useCameraBlackboard();
+
+  useEffect(() => {
+    if (query.data) {
+      query?.data?.alertHistory?.forEach((element: SightingType) => {
+        dispatch({ type: "ADD", payload: element });
+      });
+    } else if (query.error) {
+      console.error("Error fetching alert hits:", query.error);
+    } else {
+      console.log("Loading alert hits...");
+    }
+  }, [query.data, query.error, query.isLoading]);
 
   return (
-    <AlertHitContext.Provider value={{ state, dispatch }}>
+    <AlertHitContext.Provider
+      value={{
+        state,
+        dispatch,
+        isLoading: query.isLoading,
+        isError: query.isError,
+        error: query.error,
+      }}
+    >
       {children}
     </AlertHitContext.Provider>
   );

src/context/reducers/AlertReducers.ts

@@ -50,6 +50,13 @@ export function reducer(state: AlertState, action: AlertPayload) {
       };
     }
 
+    case "DELETE": {
+      return {
+        ...state,
+        alertList: action.payload,
+      };
+    }
+
     default:
       return { ...state };
   }

src/hooks/useCameraBlackboard.ts

@@ -0,0 +1,42 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { CameraBlackBoardOptions } from "../types/types";
+
+const getBlackboardData = async () => {
+  const response = await fetch(`${CAM_BASE}/api/blackboard`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch blackboard data");
+  }
+  return response.json();
+};
+
+const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
+  const response = await fetch(`${CAM_BASE}/api/blackboard`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(options),
+  });
+  if (!response.ok) {
+    throw new Error("Failed to fetch blackboard data");
+  }
+  return response.json();
+};
+
+export const useCameraBlackboard = () => {
+  const query = useQuery({
+    queryKey: ["cameraBlackboard"],
+    queryFn: getBlackboardData,
+  });
+
+  const mutation = useMutation({
+    mutationKey: ["cameraBlackboard"],
+    mutationFn: (options?: CameraBlackBoardOptions) =>
+      viewBlackboardData({
+        operation: options?.operation,
+        path: options?.path,
+        value: options?.value,
+      }),
+  });
+
+  return { query, mutation };
+};

src/pages/Dashboard.tsx

@@ -6,13 +6,13 @@ import { CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {
   const dev_REAR_URL = `${CAM_BASE}/SightingListRear/sightingSummary?mostRecentRef=`;
-  //  const dev_FRONT_URL = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
-  const folkURL = import.meta.env.VITE_FOLKESTONE_URL;
+  const dev_FRONT_URL = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
+
   console.log(CAM_BASE);
 
   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">
-      <SightingFeedProvider url={folkURL} side="Front">
+      <SightingFeedProvider url={dev_FRONT_URL} side="Front">
         <FrontCameraOverviewCard className="order-1" />
         <SightingHistoryWidget
           className="order-3"

src/types/types.ts

@@ -164,6 +164,10 @@ export type AlertPayload =
   | {
       type: "REMOVE";
       payload: SightingType;
+    }
+  | {
+      type: "DELETE";
+      payload: [];
     };
 
 export type ActionType = {
@@ -237,3 +241,13 @@ export type CameraConfig = {
     datatype: "boolean";
   };
 };
+
+export type CameraBlackBoardOptions = {
+  operation?: string;
+  path?: string;
+  value?: object | string | number | (string | number)[];
+};
+
+export type CameraBlackboardResponse = {
+  data: object;
+};