From a6d5dfa40507019742196d09944b3c149bbf6d85 Mon Sep 17 00:00:00 2001 From: Aswanth Vc Date: Wed, 6 Dec 2023 23:28:00 +0530 Subject: [PATCH] fix : Toploader issues --- src/App.tsx | 4 +-- src/apis/eventApi.tsx | 10 +++---- src/apis/userApi.tsx | 30 +++++++------------ src/components/eventlist/EventList.tsx | 4 +-- src/components/toploader/useLoader.tsx | 40 +++++++++++++++++++------- src/pages/dashboard/Dashboard.tsx | 40 ++++++++++++-------------- src/pages/event/Event.tsx | 4 +-- src/pages/login/Login.tsx | 4 +-- src/pages/register/Register.tsx | 4 +-- src/pages/register/RegisterStep2.tsx | 4 +-- 10 files changed, 74 insertions(+), 70 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0b62f968..2578a08f 100644 --- a/src/App.tsx +++ b/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(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); diff --git a/src/apis/eventApi.tsx b/src/apis/eventApi.tsx index a910e242..60bf9220 100644 --- a/src/apis/eventApi.tsx +++ b/src/apis/eventApi.tsx @@ -14,15 +14,15 @@ import { */ export const myEvents = async ( - setLoading: (status: boolean) => void, + addLoader: (loader: Promise) => 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,7 +45,7 @@ export const myEvents = async ( export const getEvents = async ( eventId: string | null | undefined, - setLoading: (status: boolean) => void, + addLoader: (loader: Promise) => void, setToast: ( status: boolean, message: string | null, @@ -53,12 +53,12 @@ export const getEvents = async ( ) => void ): Promise | 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; }; diff --git a/src/apis/userApi.tsx b/src/apis/userApi.tsx index 8b9b936c..f57e22a9 100644 --- a/src/apis/userApi.tsx +++ b/src/apis/userApi.tsx @@ -16,15 +16,15 @@ import { /* STATUS AND DETAILS ENDPOINT */ export const userDetails = async ( - setLoading: (status: boolean) => void, + addLoader: (loader: Promise) => 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); @@ -32,10 +32,8 @@ export const userDetails = async ( 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; }; @@ -43,15 +41,15 @@ export const userDetails = async ( export const loginEmail = async ( user: _UserLogin, - setLoading: (status: boolean) => void, + addLoader: (loader: Promise) => void, setToast: ( status: boolean, message: string | null, hideAfter: number | null ) => void ): Promise => { - 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) => void, setToast: ( status: boolean, message: string | null, hideAfter: number | null ) => void ): Promise => { - 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,10 +89,8 @@ 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; }; @@ -104,15 +98,15 @@ export const completeRegistration = async ( export const createAccount = async ( user: _UserStep1, - setLoading: (status: boolean) => void, + addLoader: (loader: Promise) => void, setToast: ( status: boolean, message: string | null, hideAfter: number | null ) => void ): Promise => { - 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,11 +116,9 @@ 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; }; @@ -134,17 +126,17 @@ export const createAccount = async ( export const createAccountGoogle = async ( credential: string, - setLoading: (status: boolean) => void, + addLoader: (loader: Promise) => void, setToast: ( status: boolean, message: string | null, hideAfter: number | null ) => void ): Promise => { - 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; }; diff --git a/src/components/eventlist/EventList.tsx b/src/components/eventlist/EventList.tsx index e45258ed..714046c4 100644 --- a/src/components/eventlist/EventList.tsx +++ b/src/components/eventlist/EventList.tsx @@ -8,11 +8,11 @@ import { useToast } from "../toast/useToast"; interface EventListProps {} const EventList: React.FC = ({}) => { - var { setLoaderStatus } = useLoader(); + var { addLoader } = useLoader(); var { setToastStatus } = useToast(); const [events, setEvents] = useState>([]); 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"); }); diff --git a/src/components/toploader/useLoader.tsx b/src/components/toploader/useLoader.tsx index cc1544a9..f76310b2 100644 --- a/src/components/toploader/useLoader.tsx +++ b/src/components/toploader/useLoader.tsx @@ -1,8 +1,11 @@ import { ReactNode, createContext, useContext, useState } from "react"; interface LoaderState { - status: { status: boolean }; - setStatus: React.Dispatch>; + status: boolean; + loaders: Promise[]; + setStatus: React.Dispatch< + React.SetStateAction<{ status: boolean; loaders: Promise[] }> + >; } const LoaderStateContext = createContext(undefined); @@ -14,10 +17,13 @@ interface LoaderStateProviderProps { export const LoaderStateProvider: React.FC = ({ children, }) => { - const [status, setStatus] = useState({ status: false }); - + const [status, setStatus] = useState({ + status: false, + loaders: [] as Promise[], + }); 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) { + 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) { + 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; }; diff --git a/src/pages/dashboard/Dashboard.tsx b/src/pages/dashboard/Dashboard.tsx index 3099aa15..bb7f1f8b 100644 --- a/src/pages/dashboard/Dashboard.tsx +++ b/src/pages/dashboard/Dashboard.tsx @@ -14,34 +14,32 @@ interface DashboardProps { } const Dashboard: React.FC = ({}) => { - 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 (
diff --git a/src/pages/event/Event.tsx b/src/pages/event/Event.tsx index dc9699ca..e700c0f0 100644 --- a/src/pages/event/Event.tsx +++ b/src/pages/event/Event.tsx @@ -13,13 +13,13 @@ interface EventProps { } const Event: React.FC = ({}) => { - 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"); }); diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index 7dfe313a..24692e92 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -22,12 +22,12 @@ const Login: React.FC = ({}) => { 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) { diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx index c4d0b7c9..36210a25 100644 --- a/src/pages/register/Register.tsx +++ b/src/pages/register/Register.tsx @@ -17,12 +17,12 @@ const Register: React.FC = ({}) => { email: "", password: "", }); - var { setLoaderStatus } = useLoader(); + var { addLoader } = useLoader(); var { setToastStatus } = useToast(); var redirect = useNavigate(); const onSubmit = async (e: any) => { e.preventDefault(); - if (await createAccount(data, setLoaderStatus, setToastStatus)) { + if (await createAccount(data, addLoader, setToastStatus)) { redirect("/register/details"); } }; diff --git a/src/pages/register/RegisterStep2.tsx b/src/pages/register/RegisterStep2.tsx index 1878dc78..346036b4 100644 --- a/src/pages/register/RegisterStep2.tsx +++ b/src/pages/register/RegisterStep2.tsx @@ -23,12 +23,12 @@ const RegisterStep2: React.FC = ({}) => { year: 0, gctian: false, }); - var { setLoaderStatus } = useLoader(); + var { addLoader } = useLoader(); var { setToastStatus } = useToast(); var redirect = useNavigate(); const onSubmit = async (e: any) => { e.preventDefault(); - if (await completeRegistration(data, setLoaderStatus, setToastStatus)) { + if (await completeRegistration(data, addLoader, setToastStatus)) { redirect("/dashboard"); } };