more enhancements to loading and error feedback

src/hooks/useCameraBlackboard.ts

@@ -41,12 +41,15 @@ export const useCameraBlackboard = () => {
         value: options?.value,
       }),
     onError: (error) => {
-      toast.error(`cannot get data: ${error.message}`);
+      toast.error(`cannot get data: ${error.message}`, {
+        id: "viewBlackboardData",
+      });
     },
   });
 
   useEffect(() => {
-    if (query.isError) toast.error(query.error.message);
+    if (query.isError)
+      toast.error(query.error.message, { id: "viewBlackboardData" });
   }, [query?.error?.message, query.isError]);
 
   return { query, mutation };

src/hooks/useCameraConfig.ts

@@ -4,8 +4,6 @@ import { CAM_BASE } from "../utils/config";
 
 const base_url = `${CAM_BASE}/api`;
 
-const fetch_url = `http://100.82.205.44/api/fetch-config?id=Colour`;
-console.log(fetch_url);
 const fetchCameraSideConfig = async ({ queryKey }: { queryKey: string[] }) => {
   const [, cameraSide] = queryKey;
   const fetchUrl = `${base_url}/fetch-config?id=${cameraSide}`;

src/hooks/useCameraWifiandModem.ts

@@ -70,11 +70,13 @@ export const useWifiAndModem = () => {
     mutationKey: ["updateWifiSettings"],
     mutationFn: (wifiConfig: WifiConfig) => updateWifiSettings(wifiConfig),
     onError: (error) => {
-      toast.error("Failed to update WiFi settings");
+      toast.error("Failed to update WiFi settings", { id: "wiFiSettings" });
       console.error(error);
     },
     onSuccess: () => {
-      toast.success("WiFi settings updated successfully");
+      toast.success("WiFi settings updated successfully", {
+        id: "wiFiSettings",
+      });
     },
   });
 
@@ -87,20 +89,24 @@ export const useWifiAndModem = () => {
     mutationKey: ["updateModemSettings"],
     mutationFn: (modemConfig: ModemConfig) => updateModemSettings(modemConfig),
     onError: (error) => {
-      toast.error("Failed to update Modem settings");
+      toast.error("Failed to update Modem settings", { id: "modemSettings" });
       console.error(error);
     },
     onSuccess: () => {
-      toast.success("Modem settings updated successfully");
+      toast.success("Modem settings updated successfully", {
+        id: "modemSettings",
+      });
     },
   });
 
   useEffect(() => {
-    if (wifiQuery.isError) toast.error("Cannot get WiFi settings");
+    if (wifiQuery.isError)
+      toast.error("Cannot get WiFi settings", { id: "wiFiSettings" });
   }, [wifiQuery?.error?.message, wifiQuery.isError]);
 
   useEffect(() => {
-    if (modemQuery.isError) toast.error("Cannot get Modem settings");
+    if (modemQuery.isError)
+      toast.error("Cannot get Modem settings", { id: "modemSettings" });
   }, [modemQuery?.error?.message, modemQuery.isError]);
   return {
     wifiQuery,

src/hooks/useCameraZoom.ts

@@ -5,6 +5,7 @@ import {
 } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import type { zoomConfig, ZoomInOptions } from "../types/types";
+import { toast } from "sonner";
 
 async function zoomIn(options: ZoomInOptions) {
   const response = await fetch(
@@ -37,6 +38,9 @@ export const useCameraZoom = (options: zoomConfig) => {
   const mutation = useMutation({
     mutationKey: ["zoomIn"],
     mutationFn: (options: ZoomInOptions) => zoomIn(options),
+    onError: () => {
+      toast.error("Failed to update zoom settings", { id: "zoom" });
+    },
   });
 
   const query = useQuery({

src/hooks/useLatestSighting.ts

@@ -1,60 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useCallback, useEffect, useRef } from "react";
-
-async function fetchSighting() {
-  const response = await fetch(
-    // `http://100.82.205.44/api`
-    `http://192.168.75.11/mergedHistory/sightingSummary?mostRecentRef=-1`
-  );
-  if (!response.ok) throw new Error("Failed to fetch sighting");
-  return response.json();
-}
-
-export function useLatestSighting() {
-  const latestUrlRef = useRef<string | null>(null);
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const sightingImageRef = useRef<HTMLImageElement | null>(null);
-
-  const drawImage = useCallback(() => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    const img2 = sightingImageRef.current;
-
-    if (!img2 || !canvas) return;
-
-    canvas.width = canvas.clientWidth;
-    canvas.height = canvas.clientHeight;
-
-    ctx?.drawImage(img2, 0, 0, 200, 50);
-  }, [sightingImageRef]);
-
-  const { data } = useQuery({
-    queryKey: ["latestSighting"],
-    queryFn: fetchSighting,
-    refetchInterval: 100,
-  });
-
-  useEffect(() => {
-    const img = new Image();
-    sightingImageRef.current = img;
-
-    img.onload = () => {
-      drawImage();
-    };
-    img.src = data?.plateUrlColour;
-
-    if (latestUrlRef.current) {
-      URL.revokeObjectURL(latestUrlRef.current);
-    }
-    latestUrlRef.current = img.src;
-
-    return () => {
-      if (latestUrlRef.current) {
-        URL.revokeObjectURL(latestUrlRef.current);
-        latestUrlRef.current = null;
-      }
-    };
-  }, [data?.plateUrlColour, drawImage]);
-
-  return { data, sightingImageRef, canvasRef };
-}

src/hooks/useSystemConfig.ts

@@ -5,25 +5,43 @@ import {
   handleSystemSave,
   handleSystemRecall,
 } from "../components/SettingForms/System/SettingSaveRecall";
+import { useEffect } from "react";
 
 export const useSystemConfig = () => {
   const uploadSettingsMutation = useMutation({
     mutationKey: ["uploadSettings"],
     mutationFn: sendBlobFileUpload,
-    onError: (error) => toast.error(error.message),
-    onSuccess: (test) => toast(test),
+    onError: (error) =>
+      toast.error(error.message, {
+        id: "uploadSettings",
+      }),
+    onSuccess: (test) =>
+      toast(test, {
+        id: "uploadSettings",
+      }),
   });
 
   const saveSystemSettings = useMutation({
     mutationKey: ["systemSaveSettings"],
     mutationFn: handleSystemSave,
-    onError: (error) => console.error(error.message),
+    onError: (error) =>
+      toast.error(error.message, {
+        id: "systemSettings",
+      }),
   });
 
   const getSystemSettings = useQuery({
     queryKey: ["getSystemSettings"],
     queryFn: handleSystemRecall,
   });
+
+  useEffect(() => {
+    if (getSystemSettings.isError)
+      toast.error(getSystemSettings.error.message, {
+        id: "systemSettings",
+      });
+  }, [getSystemSettings?.error?.message, getSystemSettings.isError]);
+
   return {
     uploadSettings: uploadSettingsMutation.mutate,
     saveSystemSettings: saveSystemSettings.mutate,