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