Cleanup.

- Wrap components in dashboard.
- Move mui theme in App.style.ts.
- Move api calls to separate files.
- Insert AuthContext provider.

src/App.tsx

 import React, { FC, useEffect, useState } from 'react';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { AuthUser } from 'components/AuthUser/AuthUser';
 import { LandingPage } from 'components/NonAuthUser/LandingPage/LandingPage';
 import { PrivateRoute } from 'api/PrivateRoute/PrivateRoute';
 import { AuthRoutes, NonAuthRoutes } from 'api/routes';
 import { NotFound } from 'components/NonAuthUser/NotFound/NotFound';
-import { ProfilePage } from 'components/AuthUser/ProfilePage/ProfilePage';
+import { ProfilePage } from 'components/AuthUser/Dashboard/ProfilePage/ProfilePage';
 import { Roles } from 'api/userRoles';
 import { Unauthorized } from 'components/NonAuthUser/Unauthorized/Unauthorized';
-import { ReservationPage } from 'components/AuthUser/ReservationPage/ReservationPage';
-import { HomePage } from 'components/AuthUser/HomePage/HomePage';
-import { SignInForm } from 'components/AuthUser/SignInForm/SignInForm';
+import { HomePage } from 'components/AuthUser/Dashboard/HomePage/HomePage';
 import { AuthContext } from 'components/AuthUser/AuthContext';
 import { configDjangoCookieName } from 'api/configDjangoCookieName';
+import { fetchCookie } from 'api/fetchCookie';
+import { Dashboard } from 'components/AuthUser/Dashboard/Dashboard';
+import { isAuthenticated } from 'api/isAuthenticated';
+import { muiTheme } from 'App.style';
+import { getRole } from 'api/getRole';
 
-const theme = createMuiTheme({
-  palette: {
-    primary: {
-      main: '#5e5ce4',
-    },
-    secondary: {
-      main: '#e2e45c',
-    },
-  },
-
-  typography: {
-    fontSize: 16,
-  },
-
-  overrides: {
-    MuiTabs: {
-      indicator: {
-        backgroundColor: 'white',
-      },
-    },
-    MuiTab: {
-      wrapper: {
-        flexDirection: 'row',
-      },
-    },
-  },
-});
-
+/**
+ * Entry point of the app.
+ */
 export const App: FC = () => {
+  let isMounted = true;
   configDjangoCookieName();
   const [role, setRole] = useState('');
-  const value = { role, setRole };
+  const [isAuth, setIsAuth] = useState<boolean>(false);
+  const [isCookieFetched, setIsCookieFetched] = useState<string>('');
+
+  const value = { role, setRole, isAuth, setIsAuth };
+
+  useEffect(() => {
+    if (!isCookieFetched && isMounted) fetchCookie(setIsCookieFetched);
+
+    // Initialize asking the server if this session is already logged in.
+    isAuthenticated(setIsAuth);
+    getRole(setRole);
+
+    return () => {
+      isMounted = false;
+    };
+  }, [isCookieFetched]);
 
   return (
-    <ThemeProvider theme={theme}>
-      <Router>
-        <div data-testid="App">
+    <ThemeProvider theme={muiTheme}>
+      <AuthContext.Provider value={value}>
+        <Router>
           <Switch>
             <Route exact path={NonAuthRoutes.home} component={LandingPage} />
-            <AuthContext.Provider value={value}>
-              <Route path={NonAuthRoutes.auth} component={AuthUser} />
-              <PrivateRoute
-                path={AuthRoutes.dashboard}
-                Component={HomePage}
-                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
-              />
-              <PrivateRoute
-                path={AuthRoutes.profile}
-                Component={ProfilePage}
-                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
-              />
-            </AuthContext.Provider>
-            <Route path={AuthRoutes.reservation} component={ReservationPage} />
+
+            <Route path={NonAuthRoutes.auth} component={AuthUser} />
+            <PrivateRoute
+              Component={Dashboard}
+              path={AuthRoutes.dashboard}
+              requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+            />
+            <PrivateRoute
+              Component={HomePage}
+              path={AuthRoutes.dashboard}
+              requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+            />
+            <PrivateRoute
+              Component={ProfilePage}
+              path={AuthRoutes.profile}
+              requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+            />
             <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
             <Route component={NotFound} />
           </Switch>
-        </div>
-      </Router>
+        </Router>
+      </AuthContext.Provider>
     </ThemeProvider>
   );
 };