diff --git a/src/components/SettingForms/NPED/NPEDFields.tsx b/src/components/SettingForms/NPED/NPEDFields.tsx
index 6485a36..ee0c9ee 100644
--- a/src/components/SettingForms/NPED/NPEDFields.tsx
+++ b/src/components/SettingForms/NPED/NPEDFields.tsx
@@ -27,11 +27,11 @@ const NPEDFields = () => {
rearId: "NPED",
};
- const handleSubmit = (values: NPEDFieldType) => {
+ const handleSubmit = async (values: NPEDFieldType) => {
const valuesToSend = {
...values,
};
- signIn(valuesToSend);
+ await signIn(valuesToSend);
};
const validateValues = (values: NPEDFieldType) => {
@@ -54,7 +54,7 @@ const NPEDFields = () => {
validate={validateValues}
enableReinitialize
>
- {({ errors, touched }) => (
+ {({ errors, touched, isSubmitting }) => (
+ )}
)}
diff --git a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
index 92898ab..ece30e3 100644
--- a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
+++ b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
@@ -19,7 +19,7 @@ const WiFiSettingsForm = () => {
encryption: "WPA2",
};
- const handleSubmit = (values: WifiSettingValues) => {
+ const handleSubmit = async (values: WifiSettingValues) => {
const wifiConfig = {
id: "ModemAndWifiManager-wifi",
fields: [
@@ -34,7 +34,7 @@ const WiFiSettingsForm = () => {
],
};
- wifiMutation.mutate(wifiConfig);
+ await wifiMutation.mutateAsync(wifiConfig);
};
return (
{
onSubmit={handleSubmit}
enableReinitialize
>
- {() => (
+ {({ isSubmitting }) => (
)}
diff --git a/src/components/SightingOverview/SightingCanvas.tsx b/src/components/SightingOverview/SightingCanvas.tsx
deleted file mode 100644
index 42d1058..0000000
--- a/src/components/SightingOverview/SightingCanvas.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useLatestSighting } from "../../hooks/useLatestSighting";
-
-const SightingCanvas = () => {
- const { canvasRef } = useLatestSighting();
- return (
-
-
-
- );
-};
-
-export default SightingCanvas;
diff --git a/src/hooks/useCameraBlackboard.ts b/src/hooks/useCameraBlackboard.ts
index e490411..f344ff1 100644
--- a/src/hooks/useCameraBlackboard.ts
+++ b/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 };
diff --git a/src/hooks/useCameraConfig.ts b/src/hooks/useCameraConfig.ts
index a7b3f37..1dc9c0f 100644
--- a/src/hooks/useCameraConfig.ts
+++ b/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}`;
diff --git a/src/hooks/useCameraWifiandModem.ts b/src/hooks/useCameraWifiandModem.ts
index 0abb631..bdd4430 100644
--- a/src/hooks/useCameraWifiandModem.ts
+++ b/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,
diff --git a/src/hooks/useCameraZoom.ts b/src/hooks/useCameraZoom.ts
index 9134c0f..f9c334a 100644
--- a/src/hooks/useCameraZoom.ts
+++ b/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({
diff --git a/src/hooks/useLatestSighting.ts b/src/hooks/useLatestSighting.ts
deleted file mode 100644
index b4c49e7..0000000
--- a/src/hooks/useLatestSighting.ts
+++ /dev/null
@@ -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(null);
- const canvasRef = useRef(null);
- const sightingImageRef = useRef(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 };
-}
diff --git a/src/hooks/useSystemConfig.ts b/src/hooks/useSystemConfig.ts
index 6e3a2da..9fd4b3c 100644
--- a/src/hooks/useSystemConfig.ts
+++ b/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,