Updated loading states and error states accross app

src/hooks/useNPEDAuth.ts

@@ -3,10 +3,13 @@ import type { NPEDFieldType } from "../types/types";
 import { useNPEDContext } from "../context/NPEDUserContext";
 import { useEffect } from "react";
 import { CAM_BASE } from "../utils/config";
+import { toast } from "sonner";
 
 async function fetchNPEDDetails() {
   const fetchUrl = `${CAM_BASE}/api/fetch-config?id=NPED`;
-  const response = await fetch(fetchUrl);
+  const response = await fetch(fetchUrl, {
+    signal: AbortSignal.timeout(500),
+  });
   if (!response.ok) throw new Error("Cannot reach fetch-config endpoint");
 
   return response.json();
@@ -14,43 +17,37 @@ async function fetchNPEDDetails() {
 
 async function signIn(loginDetails: NPEDFieldType) {
   const { frontId, rearId, username, password, clientId } = loginDetails;
+
   const NPEDLoginURLFront = `${CAM_BASE}/api/update-config?id=${frontId}`;
   const NPEDLoginURLRear = `${CAM_BASE}/api/update-config?id=${rearId}`;
-  const frontCameraPayload = {
-    id: frontId,
+
+  const payload = (id: string) => ({
+    id,
     fields: [
       { property: "propEnabled", value: true },
       { property: "propUsername", value: username },
       { property: "propPassword", value: password },
       { property: "propClientID", value: clientId },
     ],
-  };
-
-  const rearCameraPayload = {
-    id: rearId,
-    fields: [
-      { property: "propEnabled", value: true },
-      { property: "propUsername", value: username },
-      { property: "propPassword", value: password },
-      { property: "propClientID", value: clientId },
-    ],
-  };
-  const frontCameraResponse = await fetch(NPEDLoginURLFront, {
-    method: "POST",
-    body: JSON.stringify(frontCameraPayload),
   });
 
-  const rearCameraResponse = await fetch(NPEDLoginURLRear, {
-    method: "POST",
-    body: JSON.stringify(rearCameraPayload),
-  });
+  const [frontRes, rearRes] = await Promise.all([
+    fetch(NPEDLoginURLFront, {
+      method: "POST",
+      body: JSON.stringify(payload(frontId)),
+    }),
+    fetch(NPEDLoginURLRear, {
+      method: "POST",
+      body: JSON.stringify(payload(rearId)),
+    }),
+  ]);
 
-  if (!frontCameraResponse.ok) throw new Error("cannot reach NPED endpoint");
-  if (!rearCameraResponse.ok) throw new Error("cannot reach NPED endpoint");
+  if (!frontRes.ok || !rearRes.ok)
+    throw new Error("Cannot reach NPED endpoint");
 
   return {
-    frontResponse: frontCameraResponse.json(),
-    rearResponse: rearCameraResponse.json(),
+    frontResponse: frontRes.json(),
+    rearResponse: rearRes.json(),
   };
 }
 
@@ -81,12 +78,34 @@ export const useNPEDAuth = () => {
   const signInMutation = useMutation({
     mutationKey: ["NPEDSignin"],
     mutationFn: signIn,
-    onSuccess: async (data) => setUser(await data.frontResponse),
+    onMutate: () => {
+      toast.loading("Signing in...");
+    },
+    onSuccess: async (data) => {
+      toast.dismiss();
+      toast.success("Signed in successfully!");
+      setUser(await data.frontResponse);
+    },
+    onError: (error) => {
+      toast.dismiss();
+      if (error.message.includes("timed out")) {
+        toast.error("Connection timed out. Please check your network.");
+      } else {
+        toast.error(`Sign-in failed: ${error.message}`);
+      }
+    },
   });
 
   const signOutMutation = useMutation({
     mutationKey: ["auth", "NPEDSignOut"],
     mutationFn: signOut,
+    onSuccess: () => {
+      toast.success("Signed out successfully");
+      setUser(null);
+    },
+    onError: (error) => {
+      toast.error(`Sign-out failed: ${error.message}`);
+    },
   });
 
   const fetchdataQuery = useQuery({
@@ -102,6 +121,10 @@ export const useNPEDAuth = () => {
     }
   }, [fetchdataQuery.data, fetchdataQuery.isSuccess, setUser]);
 
+  useEffect(() => {
+    if (fetchdataQuery.isError) toast.error(fetchdataQuery.error.message);
+  }, [fetchdataQuery?.error?.message, fetchdataQuery.isError]);
+
   return {
     signIn: signInMutation.mutate,
     signInAsync: signInMutation.mutateAsync,
@@ -109,6 +132,8 @@ export const useNPEDAuth = () => {
     isError: signInMutation.isError,
     error: signInMutation.error,
     data: signInMutation.data,
+    fetchdataQueryError: fetchdataQuery.error,
+    fetchdataQueryLoading: fetchdataQuery.isLoading,
     user,
     setUser,
     signOut: signOutMutation.mutate,