fix : Toploader issues

src/App.tsx

@@ -36,7 +36,7 @@ function getTheme() {
 
 function App() {
   const [theme, setThemeState] = useState("dark");
-  var { setLoaderStatus } = useLoader();
+  var { addLoader } = useLoader();
   var { setToastStatus } = useToast();
   const [sidebarState, setSidebarState] = useState<boolean>(false);
   const redirect = useNavigate();
@@ -53,7 +53,7 @@ function App() {
       console.log(e);
       var status = await createAccountGoogle(
         e["credential"],
-        setLoaderStatus,
+        addLoader,
         setToastStatus
       );
       console.log(status);

src/apis/eventApi.tsx

@@ -14,15 +14,15 @@ import {
 */
 
 export const myEvents = async (
-  setLoading: (status: boolean) => void,
+  addLoader: (loader: Promise<any>) => void,
   setToast: (
     status: boolean,
     message: string | null,
     hideAfter: number | null
   ) => void
 ): Promise<[] | null> => {
-  setLoading(true);
   var res = publicRouter.post("/api/v2/events/myEvents");
+  addLoader(res);
   var val = await validateResponse(res);
   if (val.status == ResponseStatus.SUCCESS) {
     if (val.contentType == ResponseType.DATA) {
@@ -45,20 +45,20 @@ export const myEvents = async (
 
 export const getEvents = async (
   eventId: string | null | undefined,
-  setLoading: (status: boolean) => void,
+  addLoader: (loader: Promise<any>) => void,
   setToast: (
     status: boolean,
     message: string | null,
     hideAfter: number | null
   ) => void
 ): Promise<Array<_EventInfo> | null> => {
   setToast(false, null, null);
-  setLoading(true);
   if (eventId) {
     var res = publicRouter.get("/api/v2/events/get?id=" + eventId);
   } else {
     var res = publicRouter.get("/api/v2/events/getAll");
   }
+  addLoader(res);
   var val = await validateResponse(res);
 
   var d2: Array<_EventInfo> = [];
@@ -85,11 +85,9 @@ export const getEvents = async (
         console.log(data2);
         d2.push(data2);
       }
-      setLoading(false);
       return d2;
     }
   }
   setToast(true, val.data.message, 3000);
-  setLoading(false);
   return null;
 };

src/apis/userApi.tsx

@@ -16,42 +16,40 @@ import {
 /* STATUS AND DETAILS ENDPOINT */
 
 export const userDetails = async (
-  setLoading: (status: boolean) => void,
+  addLoader: (loader: Promise<any>) => void,
   setToast: (
     status: boolean,
     message: string | null,
     hideAfter: number | null
   ) => void
 ): Promise<_UserDetails | null> => {
-  setLoading(true);
   var res = publicRouter.post("/api/v2/users/details");
+  addLoader(res);
   var val = await validateResponse(res);
   if (val.status == ResponseStatus.FAILED) {
     setToast(true, val.data.message, 3000);
   }
   if (val.contentType == ResponseType.DATA) {
     var step = (val.data.data as any)["step"] as number;
     localStorage.setItem("step", step + "");
-    setLoading(false);
     return val.data.data as _UserDetails;
   }
-  setLoading(false);
   return null;
 };
 
 /* LOGIN ENDPOINT */
 
 export const loginEmail = async (
   user: _UserLogin,
-  setLoading: (status: boolean) => void,
+  addLoader: (loader: Promise<any>) => void,
   setToast: (
     status: boolean,
     message: string | null,
     hideAfter: number | null
   ) => void
 ): Promise<LoginStatus> => {
-  setLoading(true);
   var res = publicRouter.post("/api/v2/users/login", user);
+  addLoader(res);
   var val = await validateResponse(res);
   setToast(true, val.data.message, 3000);
   if (val.status == ResponseStatus.SUCCESS) {
@@ -61,12 +59,10 @@ export const loginEmail = async (
       var step = (val.data.data as any)["step"] as string;
       set_token(userId, token);
       localStorage.setItem("step", step);
-      setLoading(false);
       if (step == "2") return LoginStatus.STEP2;
       else return LoginStatus.STEP1;
     }
   }
-  setLoading(false);
   return LoginStatus.ERROR;
 };
 
@@ -76,15 +72,15 @@ export const loginEmail = async (
 
 export const completeRegistration = async (
   user: _UserStep2,
-  setLoading: (status: boolean) => void,
+  addLoader: (loader: Promise<any>) => void,
   setToast: (
     status: boolean,
     message: string | null,
     hideAfter: number | null
   ) => void
 ): Promise<boolean> => {
-  setLoading(true);
   var res = publicRouter.post("/api/v2/users/createAccount/complete", user);
+  addLoader(res);
   var val = await validateResponse(res);
   setToast(true, val.data.message, 3000);
   if (val.status == ResponseStatus.SUCCESS) {
@@ -93,26 +89,24 @@ export const completeRegistration = async (
       var step = (val.data.data as any)["step"] as string;
       localStorage.setItem("step", step);
     }
-    setLoading(false);
     return true;
   }
-  setLoading(false);
   return false;
 };
 
 /* Create account bby enering name,email and password manually */
 
 export const createAccount = async (
   user: _UserStep1,
-  setLoading: (status: boolean) => void,
+  addLoader: (loader: Promise<any>) => void,
   setToast: (
     status: boolean,
     message: string | null,
     hideAfter: number | null
   ) => void
 ): Promise<boolean> => {
-  setLoading(true);
   var res = publicRouter.post("/api/v2/users/createAccount", user);
+  addLoader(res);
   var val = await validateResponse(res);
   setToast(true, val.data.message, 3000);
   if (val.status == ResponseStatus.SUCCESS) {
@@ -122,29 +116,27 @@ export const createAccount = async (
       var step = (val.data.data as any)["step"] as string;
       set_token(userId, token);
       localStorage.setItem("step", step);
-      setLoading(false);
       return true;
     }
   }
-  setLoading(false);
   return false;
 };
 
 /* Create account by entering details via google */
 
 export const createAccountGoogle = async (
   credential: string,
-  setLoading: (status: boolean) => void,
+  addLoader: (loader: Promise<any>) => void,
   setToast: (
     status: boolean,
     message: string | null,
     hideAfter: number | null
   ) => void
 ): Promise<LoginStatus> => {
-  setLoading(true);
   var res = publicRouter.post("/api/v2/users/createAccount/google", {
     credential: credential,
   });
+  addLoader(res);
   var val = await validateResponse(res);
   setToast(true, val.data.message, 3000);
   if (val.status == ResponseStatus.SUCCESS) {
@@ -154,11 +146,9 @@ export const createAccountGoogle = async (
       var step = (val.data.data as any)["step"] as string;
       set_token(userId, token);
       localStorage.setItem("step", step);
-      setLoading(false);
       if (step == "2") return LoginStatus.STEP2;
       else return LoginStatus.STEP1;
     }
   }
-  setLoading(false);
   return LoginStatus.ERROR;
 };

src/components/eventlist/EventList.tsx

@@ -8,11 +8,11 @@ import { useToast } from "../toast/useToast";
 interface EventListProps {}
 
 const EventList: React.FC<EventListProps> = ({}) => {
-  var { setLoaderStatus } = useLoader();
+  var { addLoader } = useLoader();
   var { setToastStatus } = useToast();
   const [events, setEvents] = useState<Array<_Event>>([]);
   useEffect(() => {
-    getEvents(null, setLoaderStatus, setToastStatus).then((e) => {
+    getEvents(null, addLoader, setToastStatus).then((e) => {
       if (e) setEvents(e);
       else console.log("error : no event data got");
     });

src/components/toploader/useLoader.tsx

@@ -1,8 +1,11 @@
 import { ReactNode, createContext, useContext, useState } from "react";
 
 interface LoaderState {
-  status: { status: boolean };
-  setStatus: React.Dispatch<React.SetStateAction<{ status: boolean }>>;
+  status: boolean;
+  loaders: Promise<any>[];
+  setStatus: React.Dispatch<
+    React.SetStateAction<{ status: boolean; loaders: Promise<any>[] }>
+  >;
 }
 
 const LoaderStateContext = createContext<LoaderState | undefined>(undefined);
@@ -14,10 +17,13 @@ interface LoaderStateProviderProps {
 export const LoaderStateProvider: React.FC<LoaderStateProviderProps> = ({
   children,
 }) => {
-  const [status, setStatus] = useState({ status: false });
-
+  const [status, setStatus] = useState({
+    status: false,
+    loaders: [] as Promise<any>[],
+  });
   const loaderState: LoaderState = {
-    status,
+    status: status.status,
+    loaders: status.loaders,
     setStatus,
   };
 
@@ -33,15 +39,27 @@ export const useLoader = () => {
   if (!context) {
     throw new Error("useLoaderState must be used within a SharedStateProvider");
   }
-  function setLoaderStatus(status: boolean) {
-    context!.setStatus({ status: status });
+  function setStatusFalse(loader: Promise<any>) {
+    context!.loaders.splice(context!.loaders.indexOf(loader), 1);
+    if (context!.loaders.length == 0)
+      context!.setStatus({ status: false, loaders: context!.loaders });
+    else context!.setStatus({ status: true, loaders: context!.loaders });
+  }
+  function addLoader(loader: Promise<any>) {
+    context!.loaders.push(loader);
+    context!.setStatus({ status: true, loaders: context!.loaders });
+    loader
+      .then(() => {
+        setStatusFalse(loader);
+      })
+      .catch(() => {
+        setStatusFalse(loader);
+      });
   }
   const props = {
-    status: context!.status.status,
-    setLoaderStatus: setLoaderStatus,
-    // setLoaderPercentage: setLoaderPercentage,
+    status: context!.status,
+    addLoader: addLoader,
   };
-  //   window.lstatus = status;
 
   return props;
 };

src/pages/dashboard/Dashboard.tsx

@@ -14,34 +14,32 @@ interface DashboardProps {
 }
 
 const Dashboard: React.FC<DashboardProps> = ({}) => {
-  var { setLoaderStatus } = useLoader();
+  var { addLoader } = useLoader();
   var { setToastStatus } = useToast();
   const [user, setUserDetails] = useState<_UserDetails | null>();
   const [parEvents, setParEvents] = useState<[] | null>(null);
   var redirect = useNavigate();
 
   useEffect(() => {
-    userDetails(setLoaderStatus, setToastStatus).then(
-      (val: _UserDetails | null) => {
-        setUserDetails(val);
-        if (!val) {
-          setToastStatus(true, "Please login to continue!", 3000);
-          redirect("/register");
-          return;
-        } else if (val.step < 2) {
-          setToastStatus(
-            true,
-            "Your registration is not complete! Please complete the registration to contine",
-            3000
-          );
-          redirect("/register/details");
-          return;
-        }
-        myEvents(setLoaderStatus, setToastStatus).then((pars) => {
-          setParEvents(pars);
-        });
+    userDetails(addLoader, setToastStatus).then((val: _UserDetails | null) => {
+      setUserDetails(val);
+      if (!val) {
+        setToastStatus(true, "Please login to continue!", 3000);
+        redirect("/register");
+        return;
+      } else if (val.step < 2) {
+        setToastStatus(
+          true,
+          "Your registration is not complete! Please complete the registration to contine",
+          3000
+        );
+        redirect("/register/details");
+        return;
       }
-    );
+      myEvents(addLoader, setToastStatus).then((pars) => {
+        setParEvents(pars);
+      });
+    });
   }, []);
   return (
     <div className={style.dashboard}>

src/pages/event/Event.tsx

@@ -13,13 +13,13 @@ interface EventProps {
 }
 
 const Event: React.FC<EventProps> = ({}) => {
-  var { setLoaderStatus } = useLoader();
+  var { addLoader } = useLoader();
   var { setToastStatus } = useToast();
 
   const [event, setEvent] = useState<_EventInfo | null>(null);
   var { eventId } = useParams();
   useEffect(() => {
-    getEvents(eventId, setLoaderStatus, setToastStatus).then((val) => {
+    getEvents(eventId, addLoader, setToastStatus).then((val) => {
       if (val) setEvent(val[0]);
       else console.log("error : no event data got");
     });

src/pages/login/Login.tsx

@@ -22,12 +22,12 @@ const Login: React.FC<LoginProps> = ({}) => {
     email: "",
     password: "",
   });
-  var { setLoaderStatus } = useLoader();
+  var { addLoader } = useLoader();
   var { setToastStatus } = useToast();
   var redirect = useNavigate();
   const onSubmit = async (e: any) => {
     e.preventDefault();
-    var status = await loginEmail(data, setLoaderStatus, setToastStatus);
+    var status = await loginEmail(data, addLoader, setToastStatus);
     if (status == LoginStatus.STEP2) {
       redirect("/dashboard");
     } else if (status == LoginStatus.STEP1) {