57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
import { useAlertHitContext } from "../../context/AlertHitContext";
|
|
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
|
|
import type { CameraBlackBoardOptions } from "../../types/types";
|
|
import Card from "../UI/Card";
|
|
import CardHeader from "../UI/CardHeader";
|
|
import AlertItem from "./AlertItem";
|
|
|
|
const HistoryList = () => {
|
|
const { state, dispatch, isLoading, error } = useAlertHitContext();
|
|
const { mutation } = useCameraBlackboard();
|
|
|
|
const handleClearListClick = (listName: CameraBlackBoardOptions) => {
|
|
dispatch({ type: "DELETE", payload: [] });
|
|
mutation.mutate({
|
|
operation: "DELETE",
|
|
path: listName.path,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<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"
|
|
onClick={() => handleClearListClick({ path: "alertHistory" })}
|
|
>
|
|
Clear List
|
|
</button>
|
|
{isLoading && <p className="px-2">Loading...</p>}
|
|
{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 ? (
|
|
<div className="mt-3 grid grid-cols-1 gap-3">
|
|
{state?.alertList?.map((alertItem) => (
|
|
<AlertItem item={alertItem} key={alertItem.vrm} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default HistoryList;
|