- improved UI for sessions page

src/components/HistoryList/HistoryList.tsx

@@ -1,34 +1,14 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useAlertHitContext } from "../../context/AlertHitContext";
 import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
-import type { CameraBlackBoardOptions, SightingType } from "../../types/types";
+import type { CameraBlackBoardOptions } 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, isLoading, error } = useAlertHitContext();
   const { mutation } = useCameraBlackboard();
 
-  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) => {
     dispatch({ type: "DELETE", payload: [] });
     mutation.mutate({
@@ -38,7 +18,7 @@ const HistoryList = () => {
   };
 
   return (
-    <Card className="h-100 p-4">
+    <Card className="h-100 p-4 col-span-3">
       <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"
@@ -50,18 +30,23 @@ const HistoryList = () => {
       {error && <p className="text-red-500 px-2">Error: {error.message}</p>}
       <div className="flex flex-col gap-1 px-2">
         {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)}>
-                <div className="p-4">
-                  <FontAwesomeIcon icon={faTrash} size="2x" />
-                </div>
-              </button>
-            </div>
-          ))
+          <div className="mt-3 grid grid-cols-1 gap-3">
+            {state?.alertList?.map((alertItem) => (
+              <AlertItem item={alertItem} key={alertItem.vrm} />
+            ))}
+          </div>
         ) : (
-          <p>No Alert results</p>
+          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
+            <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
+              No Alert Results
+            </div>
+            <p className="max-w-md text-slate-300">
+              Alerts will appear here in real-time once there are <span className="text-emerald-400">Hotlist</span> or{" "}
+              <span className="text-amber-600">NPED</span> hits. Use{" "}
+              <span className="text-emerald-400">Start Session</span> to begin capturing results, or add a{" "}
+              <span className="text-emerald-400">Sighting</span> from the sighting list.
+            </p>
+          </div>
         )}
       </div>
     </Card>