Integrate Authorization.

src/App.tsx

@@ -16,23 +16,22 @@ import { Dashboard } from 'components/AuthUser/Dashboard/Dashboard';
 import { isAuthenticated } from 'api/isAuthenticated';
 import { muiTheme } from 'App.style';
 import { getRole } from 'api/getRole';
+import { withAuthorization } from 'components/Authorization/Authorization';
+import { useRole } from 'hooks/useRole';
+import { useAuth } from 'hooks/useAuth';
+
+const Personal = withAuthorization(Dashboard);
 
 /**
  * Entry point of the app.
  */
 export const App: FC = () => {
   configDjangoCookieName();
-  const [role, setRole] = useState('');
-  const [isAuth, setIsAuth] = useState<boolean>(false);
+  const [role, setRole] = useRole();
+  const [isAuth, setIsAuth] = useAuth();
 
   const value = { role, setRole, isAuth, setIsAuth };
 
-  useEffect(() => {
-    // Initialize asking the server if this session is already logged in.
-    isAuthenticated().then((responseState) => setIsAuth(responseState));
-    getRole().then((responseRole) => setRole(responseRole));
-  }, [isAuth, role]);
-
   return (
     <div data-testid="App">
       <ThemeProvider theme={muiTheme}>
@@ -42,20 +41,13 @@ export const App: FC = () => {
               <Route exact path={NonAuthRoutes.home} component={LandingPage} />
 
               <Route path={NonAuthRoutes.auth} component={AuthUser} />
-              <PrivateRoute
-                Component={Dashboard}
-                path={AuthRoutes.dashboard}
-                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
-              />
-              <PrivateRoute
-                Component={HomePage}
+              <Route
                 path={AuthRoutes.dashboard}
-                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
-              />
-              <PrivateRoute
-                Component={ProfilePage}
-                path={AuthRoutes.profile}
-                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+                render={() => (
+                  <Personal
+                    allowedRoles={['admin', 'driver', 'senior', 'operator']}
+                  />
+                )}
               />
               <Route
                 path={NonAuthRoutes.unauthorized}

src/components/AuthUser/AuthUser.tsx

 import React, { FC } from 'react';
 import Container from '@material-ui/core/Container';
-import { Route, useRouteMatch } from 'react-router-dom';
+import { Redirect, Route, useRouteMatch } from 'react-router-dom';
 import { AuthRoutes, NonAuthRoutes } from 'api/routes';
 import { SignInForm } from 'components/AuthUser/SignInForm/SignInForm';
 import { SignUpForm } from 'components/AuthUser/SignUpForm/SignUpForm';
@@ -14,10 +14,7 @@ export const AuthUser: FC = () => {
   const { path } = useRouteMatch();
   return (
     <Container maxWidth="sm">
-      <RestrictedRoute
-        path={`${path}${NonAuthRoutes.signIn}`}
-        Component={SignInForm}
-      />
+      <Route path={`${path}${NonAuthRoutes.signIn}`} component={SignInForm} />
       <Route path={`${path}${NonAuthRoutes.signUp}`} component={SignUpForm} />
       <Route path={`${path}${AuthRoutes.choseRole}`} component={ChoseRole} />
     </Container>