feat(client): add ConditionRoute

packages/client/src/interfaces/lazyLoading.d.ts

@@ -1,5 +1,5 @@
+export type LazyLoadingState = 'loading' | 'error' | 'data';
 export interface LazyLoading<T> {
-  loading: boolean;
+  state: LazyLoadingState;
   data: T;
-  error: boolean;
 }

packages/client/src/providers/api/AuthProvider/AuthProvider.context.ts

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 import { AuthProps } from './AuthProvider.types';
 
 const defaultValues: AuthProps = {
-  checkAuth: () => Promise.resolve(false),
+  checkAuth: () => Promise.resolve(undefined),
   logout: () => {},
   login: () => Promise.resolve(false),
   register: () => Promise.resolve(false),

packages/client/src/providers/api/AuthProvider/AuthProvider.types.d.ts

@@ -27,6 +27,6 @@ interface AuthProviderProps {
 export interface AuthProps {
   login: (user: LoginData) => Promise<string | boolean>;
   register: (user: RegistrationData) => Promise<string | boolean>;
-  checkAuth: () => Promise<boolean>;
+  checkAuth: () => Promise<User | undefined>;
   logout: () => void;
 }

packages/client/src/providers/api/AuthProvider/index.tsx

@@ -1,5 +1,5 @@
 import { AxiosResponse } from 'axios';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 
 import { localStorageKeys } from '../../../constants';
 import { useCurrentUser } from '../../../hooks';
@@ -21,28 +21,24 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
 
   const checkAuth = useCallback(async () => {
     if (currentUser) {
-      return true;
+      return currentUser;
     }
     if (expiration) {
       return axios
         .get<never, AxiosResponse<LoginUserInfo>>('/auth/me')
         .then(({ data: { user, expirationDate } }) => {
           setCurrentUser(user, expirationDate);
-          return true;
+          return user;
         })
         .catch(() => {
           setCurrentUser(undefined);
-          return false;
+          return undefined;
         });
     }
     setCurrentUser(undefined);
-    return false;
+    return undefined;
   }, [axios, expiration, currentUser, setCurrentUser]);
 
-  useEffect(() => {
-    checkAuth();
-  }, [checkAuth]);
-
   const login = useCallback(
     async (userData: LoginData) => {
       const {

packages/client/src/providers/index.tsx

@@ -12,17 +12,17 @@ interface ProvidersProps {
 }
 
 const Providers = ({ children }: ProvidersProps) => (
-  <StylesProvider>
-    <UserProvider>
-      <AxiosProvider>
-        <AuthProvider>
+  <UserProvider>
+    <AxiosProvider>
+      <AuthProvider>
+        <StylesProvider>
           <I18nextProvider i18n={i18n}>
             <SnackbarProvider>{children}</SnackbarProvider>
           </I18nextProvider>
-        </AuthProvider>
-      </AxiosProvider>
-    </UserProvider>
-  </StylesProvider>
+        </StylesProvider>
+      </AuthProvider>
+    </AxiosProvider>
+  </UserProvider>
 );
 
 export default Providers;

packages/client/src/routes/ConditionRoute/Condition.types.d.ts

@@ -0,0 +1,20 @@
+import { RouteProps } from 'react-router';
+
+import { User } from '../../providers/api/CurrentUserProvider/CurrentUserProvider.types';
+
+export interface ConditionFuncProps {
+  currentUser: User | undefined;
+}
+
+export type ConditionFunc = (props: ConditionFuncProps) => boolean;
+
+export interface BasicConditionProps {
+  condition: ConditionFunc;
+  redirectTo: string;
+}
+
+export interface BasicRouteProps extends RouteProps {
+  path: string;
+}
+
+export interface ConditionRouteProps extends BasicConditionProps, BasicRouteProps {}

packages/client/src/routes/ConditionRoute/index.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+import { PageLoader } from '../../elements';
+import { useAuth } from '../../hooks';
+import { LazyLoading } from '../../interfaces/lazyLoading';
+import { ConditionRouteProps } from './Condition.types';
+
+const ConditionRoute = ({ redirectTo, condition, ...props }: ConditionRouteProps) => {
+  const { checkAuth } = useAuth();
+  const [{ data, state }, setLazyLoading] = useState<LazyLoading<boolean>>({
+    data: false,
+    state: 'loading',
+  });
+
+  useEffect(() => {
+    let isActive = true;
+
+    checkAuth()
+      .then((currentUser) => {
+        if (isActive) {
+          const routeCondition = condition({ currentUser });
+          setLazyLoading(() => ({ state: 'data', data: routeCondition }));
+        }
+      })
+      .catch(() => {
+        if (isActive) {
+          setLazyLoading((prev) => ({ ...prev, state: 'error' }));
+        }
+      });
+
+    return () => {
+      isActive = false;
+    };
+  }, [checkAuth, condition]);
+
+  switch (true) {
+    case state === 'loading':
+      return <PageLoader />;
+    case state === 'data' && data:
+      return <Route {...props} />;
+    default:
+      return <Redirect to={{ pathname: redirectTo }} />;
+  }
+};
+
+export default ConditionRoute;

packages/client/src/routes/conditions.ts

@@ -0,0 +1,43 @@
+import { routes } from '../constants';
+import { Role } from '../enums/role.enum';
+import { BasicConditionProps, ConditionFunc } from './ConditionRoute/Condition.types';
+
+type onlyAuthenticatedConditionType = (requiredRoles?: [Role]) => ConditionFunc;
+
+export const onlyAuthenticatedCondition: onlyAuthenticatedConditionType = (
+  requiredRoles?: [Role],
+) => {
+  return ({ currentUser }) => {
+    if (!currentUser) {
+      return false;
+    }
+    if (!requiredRoles || !requiredRoles.length) {
+      return true;
+    }
+
+    return (
+      currentUser &&
+      currentUser.roles &&
+      requiredRoles.some((role) => currentUser.roles.includes(role))
+    );
+  };
+};
+
+const onlyUnauthenticatedCondition: ConditionFunc = ({ currentUser }) => !currentUser;
+
+const allowAllCondition: ConditionFunc = () => true;
+
+export const onlyAuthenticated: BasicConditionProps = {
+  condition: onlyAuthenticatedCondition(),
+  redirectTo: routes.LOGIN,
+};
+
+export const onlyUnauthenticated: BasicConditionProps = {
+  condition: onlyUnauthenticatedCondition,
+  redirectTo: routes.HOME,
+};
+
+export const allowAll: BasicConditionProps = {
+  condition: allowAllCondition,
+  redirectTo: routes.HOME,
+};

packages/client/src/routes/index.tsx

@@ -3,10 +3,8 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import { GlobalLayout } from '../elements';
 import { useCurrentUser } from '../hooks';
-import { AuthProvider } from '../providers/api';
-import PrivateRoute from './PrivateRoute';
-import PublicRoute from './PublicRoute';
-import { authorizedRoutes, unauthorizedRoutes } from './routesConfig';
+import ConditionRoute from './ConditionRoute';
+import { routesArray } from './routesConfig';
 
 const NotFoundPage = () => {
   const [currentUser] = useCurrentUser();
@@ -16,17 +14,12 @@ const NotFoundPage = () => {
 const Routes = () => (
   <BrowserRouter>
     <GlobalLayout>
-      <AuthProvider>
-        <Switch>
-          {unauthorizedRoutes.map((routeProps) => (
-            <PublicRoute key={routeProps.path} {...routeProps} />
-          ))}
-          {authorizedRoutes.map((routeProps) => (
-            <PrivateRoute key={routeProps.path} {...routeProps} />
-          ))}
-          <Route component={NotFoundPage} />
-        </Switch>
-      </AuthProvider>
+      <Switch>
+        {routesArray.map((props) => (
+          <ConditionRoute key={props.path} {...props} />
+        ))}
+        <Route component={NotFoundPage} />
+      </Switch>
     </GlobalLayout>
   </BrowserRouter>
 );

packages/client/src/routes/routesConfig.ts

@@ -1,21 +1,30 @@
-import { RouteProps as RouterRouteProps } from 'react-router';
-
 import { routes } from '../constants';
 import { Dashboard, Login, Registration } from '../containers';
+import { Role } from '../enums/role.enum';
+import { BasicRouteProps, ConditionRouteProps } from './ConditionRoute/Condition.types';
+import {
+  allowAll,
+  onlyAuthenticated,
+  onlyAuthenticatedCondition,
+  onlyUnauthenticated,
+} from './conditions';
 
-interface RouteProps extends RouterRouteProps {
-  path: string;
+interface OnlyAuthenticatedRouteProps extends BasicRouteProps {
+  roles?: [Role];
 }
-
-export const authorizedRoutes = [
+const onlyAuthenticatedRoutes: Array<ConditionRouteProps> = (<Array<OnlyAuthenticatedRouteProps>>[
   {
     path: routes.HOME,
     component: Dashboard,
     exact: true,
   },
-];
+]).map(({ roles, ...props }) => ({
+  ...props,
+  ...onlyAuthenticated,
+  condition: onlyAuthenticatedCondition(roles),
+}));
 
-export const unauthorizedRoutes: Array<RouteProps> = [
+const onlyUnauthenticatedRoutes: Array<ConditionRouteProps> = (<Array<BasicRouteProps>>[
   {
     path: routes.LOGIN,
     component: Login,
@@ -24,4 +33,15 @@ export const unauthorizedRoutes: Array<RouteProps> = [
     path: routes.REGISTRATION,
     component: Registration,
   },
+]).map((props) => ({ ...props, ...onlyUnauthenticated }));
+
+const allowAllRoutes: Array<ConditionRouteProps> = (<Array<BasicRouteProps>>[{}]).map((props) => ({
+  ...props,
+  ...allowAll,
+}));
+
+export const routesArray: Array<ConditionRouteProps> = [
+  ...onlyAuthenticatedRoutes,
+  ...onlyUnauthenticatedRoutes,
+  ...allowAllRoutes,
 ];