Updated loading states and error states accross app

src/hooks/useCameraWifiandModem.ts

@@ -1,10 +1,15 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import type { ModemConfig, WifiConfig } from "../types/types";
+import { useEffect } from "react";
+import { toast } from "sonner";
 
 const getWiFiSettings = async () => {
   const response = await fetch(
-    `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`
+    `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`,
+    {
+      signal: AbortSignal.timeout(500),
+    }
   );
   if (!response.ok) {
     throw new Error("Cannot fetch Wifi settings");
@@ -29,7 +34,10 @@ const updateWifiSettings = async (wifiConfig: WifiConfig) => {
 
 const getModemSettings = async () => {
   const response = await fetch(
-    `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`
+    `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`,
+    {
+      signal: AbortSignal.timeout(500),
+    }
   );
   if (!response.ok) {
     throw new Error("Cannot fetch modem settings");
@@ -61,7 +69,13 @@ export const useWifiAndModem = () => {
   const wifiMutation = useMutation({
     mutationKey: ["updateWifiSettings"],
     mutationFn: (wifiConfig: WifiConfig) => updateWifiSettings(wifiConfig),
-    onError: (error) => console.log(error),
+    onError: (error) => {
+      toast.error("Failed to update WiFi settings");
+      console.error(error);
+    },
+    onSuccess: () => {
+      toast.success("WiFi settings updated successfully");
+    },
   });
 
   const modemQuery = useQuery({
@@ -72,8 +86,22 @@ export const useWifiAndModem = () => {
   const modemMutation = useMutation({
     mutationKey: ["updateModemSettings"],
     mutationFn: (modemConfig: ModemConfig) => updateModemSettings(modemConfig),
+    onError: (error) => {
+      toast.error("Failed to update Modem settings");
+      console.error(error);
+    },
+    onSuccess: () => {
+      toast.success("Modem settings updated successfully");
+    },
   });
 
+  useEffect(() => {
+    if (wifiQuery.isError) toast.error("Cannot get WiFi settings");
+  }, [wifiQuery?.error?.message, wifiQuery.isError]);
+
+  useEffect(() => {
+    if (modemQuery.isError) toast.error("Cannot get Modem settings");
+  }, [modemQuery?.error?.message, modemQuery.isError]);
   return {
     wifiQuery,
     wifiMutation,