day 55

config/jest/jest.config.ts

@@ -46,7 +46,7 @@ export default {
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   testPathIgnorePatterns: [
-    '.fttemplates/**',
+    '.fttemplates/\\*\\*',
   ],
 
   // All imported modules in your tests should be mocked automatically

src/app/App.tsx

@@ -5,14 +5,15 @@ import { Navbar } from 'widgets/Navbar';
 
 import { Sidebar } from 'widgets/Sidebar';
 import { Suspense, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { userActions } from 'entities/User';
+import { useDispatch, useSelector } from 'react-redux';
+import { getUserInited, userActions } from 'entities/User';
 import { useNavigate } from 'react-router-dom';
 
 export function App() {
   const { theme } = useTheme();
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const inited = useSelector(getUserInited);
 
   useEffect(() => {
     dispatch(userActions.initAuthData());
@@ -24,7 +25,7 @@ export function App() {
         <Navbar />
         <div className="content-page">
           <Sidebar />
-          <AppRouter />
+          {inited && <AppRouter />}
         </div>
       </Suspense>
     </div>

src/app/providers/router/ui/AppRouter.tsx

@@ -1,35 +1,34 @@
-import { getUserAuthData } from 'entities/User';
-import { memo, Suspense, useMemo } from 'react';
-import { useSelector } from 'react-redux';
+import { memo, Suspense, useCallback } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { routeConfig } from 'shared/config/routeConfig/routerConfig';
+import {
+  AppRoutesProps,
+  routeConfig,
+} from 'shared/config/routeConfig/routerConfig';
 import { PageLoader } from 'shared/ui/PageLoader';
+import { RequireAuth } from './RequiredAuth';
 
 const AppRouter = memo(() => {
-  const isAuth = useSelector(getUserAuthData);
+  const renderWithWrapper = useCallback((route: AppRoutesProps) => {
+    const element = (
+      <Suspense fallback={<PageLoader />}>
+        <div className="page-wrapper">{route.element}</div>
+      </Suspense>
+    );
 
-  const routes = useMemo(
-    () => Object.values(routeConfig).filter((route) => {
-      if (route.authOnly && !isAuth) {
-        return false;
-      }
-
-      return true;
-    }),
-    [isAuth],
-  );
+    return (
+      <Route
+        key={route.path}
+        path={route.path}
+        element={
+          route.authOnly ? <RequireAuth>{element}</RequireAuth> : element
+        }
+      />
+    );
+  }, []);
 
   return (
     <Suspense fallback={<PageLoader />}>
-      <Routes>
-        {routes.map(({ element, path }) => (
-          <Route
-            key={path}
-            element={<div className="page-wrapper">{element}</div>}
-            path={path}
-          />
-        ))}
-      </Routes>
+      <Routes>{Object.values(routeConfig).map(renderWithWrapper)}</Routes>
     </Suspense>
   );
 });

src/app/providers/router/ui/RequiredAuth.tsx

@@ -0,0 +1,15 @@
+import { getUserAuthData } from 'entities/User';
+import { useSelector } from 'react-redux';
+import { Navigate, useLocation } from 'react-router-dom';
+import { RoutePath } from 'shared/config/routeConfig/routerConfig';
+
+export function RequireAuth({ children }: { children: JSX.Element }) {
+  const auth = useSelector(getUserAuthData);
+  const location = useLocation();
+
+  if (!auth) {
+    return <Navigate to={RoutePath.main} state={{ from: location }} replace />;
+  }
+
+  return children;
+}

src/entities/User/index.ts

@@ -1,3 +1,4 @@
 export { userReducer, userActions } from './model/slice/userSlice';
 export { UserSchema, User } from './model/types/userSchema';
 export { getUserAuthData } from './model/selectors/getUserAuthData/getUserAuthData';
+export { getUserInited } from './model/selectors/getUserInited/getUserInited';

src/entities/User/model/selectors/getUserInited/getUserInited.ts

@@ -0,0 +1,3 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+
+export const getUserInited = (state: StateSchema) => state.user._inited;

src/entities/User/model/slice/userSlice.ts

@@ -3,7 +3,7 @@ import { USER_LOCALSTORAGE_KEY } from 'shared/const/localStorage';
 import { User, UserSchema } from '../types/userSchema';
 
 const initialState: UserSchema = {
-
+  _inited: false,
 };
 
 export const userSlice = createSlice({
@@ -18,6 +18,7 @@ export const userSlice = createSlice({
       if (user) {
         state.authData = JSON.parse(user);
       }
+      state._inited = true;
     },
     logout: (state) => {
       state.authData = undefined;

src/entities/User/model/types/userSchema.ts

@@ -5,4 +5,6 @@ export interface User {
 
 export interface UserSchema {
   authData?: User;
+
+  _inited?: boolean;
 }

src/shared/config/routeConfig/routerConfig.tsx

@@ -4,7 +4,7 @@ import { NotFoundPage } from 'pages/NotFoundPage';
 import { ProfilePage } from 'pages/ProfilePage';
 import { RouteProps } from 'react-router-dom';
 
-type AppRoutesProps = RouteProps & {
+export type AppRoutesProps = RouteProps & {
   authOnly?: boolean;
 }