Merge pull request #354 from qa-guru/QAGDEV-679

QAGDEV-679 - [FE] Fix bug with loading main screen v2.0

Author: nik1999777

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

@@ -1,14 +1,23 @@
-import { FC, ReactNode, createContext, useContext, useState } from "react";
+import {
+  FC,
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useSnackbar } from "notistack";
 
+import { userRolesVar } from "cache";
 import AuthService from "api/rest/auth-service";
 import {
   UserCreateInput,
   useCheckResetPasswordTokenLazyQuery,
   useCreateUserMutation,
   useResetPasswordMutation,
   useSetPasswordMutation,
+  useUserRolesQuery,
 } from "api/graphql/generated/graphql";
 
 import { RESPONSE_STATUS, ROUTES } from "../constants";
@@ -25,6 +34,7 @@ interface AuthContextType {
   resetPassword: (email: string) => Promise<void>;
   setNewPassword: (newPassword: string) => Promise<void>;
   confirmToken: (token: string) => Promise<void>;
+  isAuth: boolean;
 }
 
 const AuthContext = createContext<AuthContextType>({
@@ -35,6 +45,7 @@ const AuthContext = createContext<AuthContextType>({
   resetPassword: async () => {},
   setNewPassword: async () => {},
   confirmToken: async () => {},
+  isAuth: false,
 });
 
 export const useAuth = () => {
@@ -47,6 +58,7 @@ 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();
@@ -56,12 +68,42 @@ export const AuthProvider: FC<IAuthProvider> = ({ children }) => {
   const [createUser] = useCreateUserMutation();
   const [checkToken] = useCheckResetPasswordTokenLazyQuery();
 
+  const { loading: rolesLoading } = useUserRolesQuery({
+    skip: !isAuth,
+    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 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 {
@@ -88,6 +130,7 @@ 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 {
@@ -197,6 +240,7 @@ export const AuthProvider: FC<IAuthProvider> = ({ children }) => {
   return (
     <AuthContext.Provider
       value={{
+        isAuth,
         isLoading,
         login,
         logout,

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

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

src/routes/index.tsx

@@ -11,14 +11,11 @@ import {
   SetPasswordPage,
   SignUpPage,
 } from "pages/auth";
-import {
-  Maybe,
-  UserRole,
-  useUserRolesQuery,
-} from "api/graphql/generated/graphql";
+import { Maybe, UserRole } from "api/graphql/generated/graphql";
 import { AppSpinner } from "shared/components/spinners";
 import Layout from "shared/components/layout";
 import ScrollPageSectionPage from "pages/scroll-page-section";
+import { useAuth } from "features/authorization/context/auth-context";
 
 import StudentRoutes from "./student";
 import MentorRoutes from "./mentor";
@@ -34,13 +31,17 @@ interface IRoutnig {
 }
 
 const ProtectedRoute: FC<IProtectedRoute> = ({ children }) => {
-  const isAuth = localStorage.getItem("isAuth");
+  const { isLoading, isAuth } = useAuth();
+
+  if (isLoading) {
+    return <AppSpinner />;
+  }
 
-  if (isAuth) {
-    return <Navigate to="/" replace />;
+  if (!isAuth) {
+    return <Navigate to="/authorization" replace />;
   }
 
-  return <Layout isLogging>{children}</Layout>;
+  return <>{children}</>;
 };
 
 export const roleRoutes: { [key in UserRole]?: ReactElement[] } = {
@@ -63,28 +64,6 @@ export const getUserRoutes = (userRoles: Maybe<Array<Maybe<UserRole>>>) => {
   return Array.from(routesSet);
 };
 
-export const useUserRoutes = () => {
-  const location = useLocation();
-  const isAuthPage =
-    location.pathname === "/authorization" ||
-    location.pathname === "/signup" ||
-    location.pathname === "/reset" ||
-    location.pathname === "/reset/token" ||
-    location.pathname === "/reset/password";
-
-  const { data, loading } = useUserRolesQuery({
-    skip: isAuthPage,
-    onCompleted: (data) => {
-      userRolesVar(data?.user?.roles);
-    },
-  });
-
-  const roles = data?.user?.roles ?? [];
-  const usersRoutes = getUserRoutes(roles);
-
-  return { usersRoutes, loading };
-};
-
 const Routing: FC<IRoutnig> = () => {
   const location = useLocation();
   const [errorBoundaryKey, setErrorBoundaryKey] = useState<string>(
@@ -95,9 +74,11 @@ const Routing: FC<IRoutnig> = () => {
     setErrorBoundaryKey(location.pathname);
   }, [location]);
 
-  const { usersRoutes, loading } = useUserRoutes();
+  const userRoles = userRolesVar();
+  const usersRoutes = getUserRoutes(userRoles);
+  const { isLoading } = useAuth();
 
-  if (loading) {
+  if (isLoading) {
     return <AppSpinner />;
   }
 
@@ -111,7 +92,14 @@ const Routing: FC<IRoutnig> = () => {
       }
     >
       <Routes>
-        <Route path="/" element={<Layout />}>
+        <Route
+          path="/"
+          element={
+            <ProtectedRoute>
+              <Layout />
+            </ProtectedRoute>
+          }
+        >
           {usersRoutes?.map((route) => (
             <Route
               key={route.key}
@@ -120,46 +108,11 @@ const Routing: FC<IRoutnig> = () => {
             />
           ))}
         </Route>
-        <Route
-          path="/authorization"
-          element={
-            <ProtectedRoute>
-              <LoginPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/signup"
-          element={
-            <ProtectedRoute>
-              <SignUpPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/reset"
-          element={
-            <ProtectedRoute>
-              <ResetPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/reset/token"
-          element={
-            <ProtectedRoute>
-              <ConfirmTokenPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/reset/password"
-          element={
-            <ProtectedRoute>
-              <SetPasswordPage />
-            </ProtectedRoute>
-          }
-        />
+        <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="*"
           element={