[FE] Fix bug with loading main screen v3.0

Author: nik1999777

src/features/authorization/context/auth-context.tsx

@@ -1,11 +1,4 @@
-import {
-  FC,
-  ReactNode,
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { FC, ReactNode, createContext, useContext, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useSnackbar } from "notistack";
 
@@ -34,7 +27,6 @@ interface AuthContextType {
   resetPassword: (email: string) => Promise<void>;
   setNewPassword: (newPassword: string) => Promise<void>;
   confirmToken: (token: string) => Promise<void>;
-  isAuth: boolean;
 }
 
 const AuthContext = createContext<AuthContextType>({
@@ -45,7 +37,6 @@ const AuthContext = createContext<AuthContextType>({
   resetPassword: async () => {},
   setNewPassword: async () => {},
   confirmToken: async () => {},
-  isAuth: false,
 });
 
 export const useAuth = () => {
@@ -58,7 +49,6 @@ export const useAuth = () => {
 
 export const AuthProvider: FC<IAuthProvider> = ({ children }) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isAuth, setIsAuth] = useState<boolean>(false);
   const navigate = useNavigate();
   const { enqueueSnackbar } = useSnackbar();
   const location = useLocation();
@@ -69,41 +59,20 @@ export const AuthProvider: FC<IAuthProvider> = ({ children }) => {
   const [checkToken] = useCheckResetPasswordTokenLazyQuery();
 
   const { loading: rolesLoading } = useUserRolesQuery({
-    skip: !isAuth,
+    skip: !(localStorage.getItem("isAuth") === "true"),
     onCompleted: (data) => {
       userRolesVar(data?.user?.roles);
     },
   });
 
-  useEffect(() => {
-    const checkAuth = () => {
-      const auth = localStorage.getItem("isAuth");
-
-      if (auth) {
-        setIsAuth(true);
-      } else {
-        setIsAuth(false);
-      }
-
-      setIsLoading(false);
-    };
-
-    checkAuth();
-  }, []);
-
-  useEffect(() => {
-    if (!rolesLoading && !isLoading) {
-      setIsLoading(false);
-    }
-  }, [rolesLoading, isLoading]);
+  const loading = isLoading || rolesLoading;
 
   const login = async (username: string, password: string) => {
     setIsLoading(true);
     await AuthService.login(username, password)
       .then((response) => {
         if (response.status === RESPONSE_STATUS.SUCCESSFUL) {
           localStorage.setItem("isAuth", "true");
-          setIsAuth(true);
           setIsLoading(false);
           navigate(ROUTES.HOME);
         } else {
@@ -130,7 +99,6 @@ export const AuthProvider: FC<IAuthProvider> = ({ children }) => {
       .then((response) => {
         if (response.status === RESPONSE_STATUS.SUCCESSFUL) {
           localStorage.removeItem("isAuth");
-          setIsAuth(false);
           setIsLoading(false);
           navigate(ROUTES.AUTHORIZATION);
         } else {
@@ -240,8 +208,7 @@ export const AuthProvider: FC<IAuthProvider> = ({ children }) => {
   return (
     <AuthContext.Provider
       value={{
-        isAuth,
-        isLoading,
+        isLoading: loading,
         login,
         logout,
         signup,

src/features/authorization/views/views.styled.ts

@@ -25,7 +25,7 @@ export const StyledWrapper = styled(Stack)(({ theme }) => ({
   top: 0,
   bottom: "60px",
   width: "100%",
-  height: "100dvh",
+  height: "calc(100dvh - 60px)",
 }));
 
 export const StyledLogo = styled(Logo)(({ theme }) => ({
@@ -76,7 +76,7 @@ export const StyledSignupWrapper = styled(Stack)(({ theme }) => ({
   top: 0,
   bottom: "60px",
   width: "100%",
-  minHeight: "100dvh",
+  minHeight: "calc(100dvh - 60px)",
   [theme.breakpoints.down(1380)]: {
     position: "inherit",
   },

src/routes/index.tsx

@@ -31,11 +31,7 @@ interface IRoutnig {
 }
 
 const ProtectedRoute: FC<IProtectedRoute> = ({ children }) => {
-  const { isLoading, isAuth } = useAuth();
-
-  if (isLoading) {
-    return <AppSpinner />;
-  }
+  const isAuth = localStorage.getItem("isAuth");
 
   if (!isAuth) {
     return <Navigate to="/authorization" replace />;
@@ -74,9 +70,9 @@ const Routing: FC<IRoutnig> = () => {
     setErrorBoundaryKey(location.pathname);
   }, [location]);
 
+  const { isLoading } = useAuth();
   const userRoles = userRolesVar();
   const usersRoutes = getUserRoutes(userRoles);
-  const { isLoading } = useAuth();
 
   if (isLoading) {
     return <AppSpinner />;
@@ -108,11 +104,46 @@ const Routing: FC<IRoutnig> = () => {
             />
           ))}
         </Route>
-        <Route path="/authorization" element={<LoginPage />} />
-        <Route path="/signup" element={<SignUpPage />} />
-        <Route path="/reset" element={<ResetPage />} />
-        <Route path="/reset/token" element={<ConfirmTokenPage />} />
-        <Route path="/reset/password" element={<SetPasswordPage />} />
+        <Route
+          path="/authorization"
+          element={
+            <Layout isLogging>
+              <LoginPage />
+            </Layout>
+          }
+        />
+        <Route
+          path="/signup"
+          element={
+            <Layout isLogging>
+              <SignUpPage />
+            </Layout>
+          }
+        />
+        <Route
+          path="/reset"
+          element={
+            <Layout isLogging>
+              <ResetPage />
+            </Layout>
+          }
+        />
+        <Route
+          path="/reset/token"
+          element={
+            <Layout isLogging>
+              <ConfirmTokenPage />
+            </Layout>
+          }
+        />
+        <Route
+          path="/reset/password"
+          element={
+            <Layout isLogging>
+              <SetPasswordPage />
+            </Layout>
+          }
+        />
         <Route
           path="*"
           element={