- fixed but to delete specific alert item

- need to remove rawcamebase from config in prod

src/components/HistoryList/AlertItem.tsx

@@ -5,6 +5,7 @@ import InfoBar from "../SightingsWidget/InfoBar";
 import { useState } from "react";
 import HotListImg from "/Hotlist_Hit.svg";
 import { useAlertHitContext } from "../../context/AlertHitContext";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
@@ -17,6 +18,7 @@ type AlertItemProps = {
 const AlertItem = ({ item }: AlertItemProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { dispatch } = useAlertHitContext();
+  const { mutation } = useCameraBlackboard();
 
   // const {d} = useCameraBlackboard();
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
@@ -34,12 +36,26 @@ const AlertItem = ({ item }: AlertItemProps) => {
     setIsModalOpen(false);
   };
 
-  const handleDelete = () => {
+  const handleDelete = async (deletedItem: SightingType | null) => {
+    const res = await mutation.mutateAsync({
+      operation: "VIEW",
+      path: "alertHistory",
+    });
+    const oldArray = res?.result;
+    const updatedArray = oldArray?.filter(
+      (item: SightingType) => item?.ref !== deletedItem?.ref
+    );
+
+    mutation.mutate({
+      operation: "INSERT",
+      path: "alertHistory",
+      value: updatedArray,
+    });
     dispatch({ type: "REMOVE", payload: item });
   };
   return (
     <div className="flex flex-col w-full">
-      <div className="border border-gray-400 rounded-lg items-center py-1">
+      <div className="border border-gray-600 rounded-lg items-center py-1">
         <InfoBar obj={item} />
         <div
           className=" flex flex-row p-4  w-full mx-auto justify-between"
@@ -55,21 +71,21 @@ const AlertItem = ({ item }: AlertItemProps) => {
           {isNPEDHitA && (
             <img
               src={NPED_CAT_A}
-              alt="hotlistHit"
+              alt="NPEDHITicon"
               className="h-20 object-contain rounded-md"
             />
           )}
           {isNPEDHitB && (
             <img
               src={NPED_CAT_B}
-              alt="hotlistHit"
+              alt="NPEDHITicon"
               className="h-20 object-contain rounded-md"
             />
           )}
           {isNPEDHitC && (
             <img
               src={NPED_CAT_C}
-              alt="hotlistHit"
+              alt="NPEDHITicon"
               className="h-20 object-contain rounded-md"
             />
           )}

src/components/HistoryList/HistoryList.tsx

@@ -11,9 +11,22 @@ const HistoryList = () => {
   const { state, dispatch, isLoading, error } = useAlertHitContext();
   const { mutation } = useCameraBlackboard();
 
-  const handleDeleteClick = (alertItem: SightingType, idx?: number) => {
-    dispatch({ type: "REMOVE", payload: alertItem });
-    mutation.mutate({ operation: "POP", path: "alertHistory", value: idx });
+  const handleDeleteClick = async (deletedItem: SightingType) => {
+    const res = await mutation.mutateAsync({
+      operation: "VIEW",
+      path: "alertHistory",
+    });
+    const oldArray = res?.result;
+    const updatedArray = oldArray?.filter(
+      (item: SightingType) => item?.ref !== deletedItem?.ref
+    );
+
+    mutation.mutate({
+      operation: "INSERT",
+      path: "alertHistory",
+      value: updatedArray,
+    });
+    dispatch({ type: "REMOVE", payload: deletedItem });
   };
 
   const handleClearListClick = (listName: CameraBlackBoardOptions) => {
@@ -40,7 +53,7 @@ const HistoryList = () => {
           state?.alertList?.map((alertItem, index) => (
             <div key={index} className="flex flex-row space-x-2">
               <AlertItem item={alertItem} />
-              <button onClick={() => handleDeleteClick(alertItem, index)}>
+              <button onClick={() => handleDeleteClick(alertItem)}>
                 <div className="p-4">
                   <FontAwesomeIcon icon={faTrash} size="2x" />
                 </div>