From 9f9e4ee8693cb0a715302cc910b9e8be04e7edac Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Thu, 13 May 2021 16:13:25 +0200
Subject: [PATCH] Configure role setting context.
---
src/App.tsx | 35 +++--
src/components/AuthUser/AuthContext.tsx | 13 ++
src/components/AuthUser/Homepage/HomePage.tsx | 132 ------------------
3 files changed, 36 insertions(+), 144 deletions(-)
create mode 100644 src/components/AuthUser/AuthContext.tsx
delete mode 100644 src/components/AuthUser/Homepage/HomePage.tsx
diff --git a/src/App.tsx b/src/App.tsx
index f641a24..0fd4963 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,6 @@
import React, { FC, useEffect, useState } from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import { HomePage } from 'components/AuthUser/HomePage/HomePage';
import { AuthUser } from 'components/AuthUser/AuthUser';
import { LandingPage } from 'components/NonAuthUser/LandingPage/LandingPage';
import { PrivateRoute } from 'api/PrivateRoute/PrivateRoute';
@@ -12,6 +11,9 @@ import { Roles } from 'api/userRoles';
import { Unauthorized } from 'components/NonAuthUser/Unauthorized/Unauthorized';
import axios from 'axios';
import { ReservationPage } from 'components/AuthUser/ReservationPage/ReservationPage';
+import { HomePage } from 'components/AuthUser/HomePage/HomePage';
+import { SignInForm } from 'components/AuthUser/SignInForm/SignInForm';
+import { AuthContext } from 'components/AuthUser/AuthContext';
const theme = createMuiTheme({
palette: {
@@ -49,6 +51,10 @@ const configDjangoCookieName = (): void => {
export const App: FC = () => {
const [isCookieFetched, setisCookieFetched] = useState<string>('');
+
+ const [role, setRole] = useState('');
+ const value = { role, setRole };
+
configDjangoCookieName();
useEffect(() => {
const fetchCookie = async (): Promise<unknown> => {
@@ -67,18 +73,23 @@ export const App: FC = () => {
<Router>
<div data-testid="App">
<Switch>
- <Route path={NonAuthRoutes.auth} component={AuthUser} />
<Route exact path={NonAuthRoutes.home} component={LandingPage} />
- <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 value={value}>
+ <Route exact path={NonAuthRoutes.auth} component={AuthUser} />
+
+ <Route exact path="/signIn" component={SignInForm} />
+
+ <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.unauthorized} component={Unauthorized} />
<Route component={NotFound} />
diff --git a/src/components/AuthUser/AuthContext.tsx b/src/components/AuthUser/AuthContext.tsx
new file mode 100644
index 0000000..83df775
--- /dev/null
+++ b/src/components/AuthUser/AuthContext.tsx
@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+export type AuthData = {
+ role: string;
+ setRole: (role: string) => void;
+};
+
+export const AuthContext = createContext<AuthData>({
+ role: '',
+ setRole: () => {
+ // Do nothing
+ },
+});
diff --git a/src/components/AuthUser/Homepage/HomePage.tsx b/src/components/AuthUser/Homepage/HomePage.tsx
deleted file mode 100644
index 95073eb..0000000
--- a/src/components/AuthUser/Homepage/HomePage.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import {
- CssBaseline,
- Grid,
- Typography,
- Hidden,
- createMuiTheme,
- responsiveFontSizes,
- MuiThemeProvider,
- Container,
-} from '@material-ui/core';
-
-import { MapElement } from 'components/AuthUser/HomePage/MapElement';
-import { NavBar } from 'components/AuthUser/HomePage/NavBar';
-import { NavBarLogin } from 'components/AuthUser/HomePage/NavBarLogin';
-import { Steps } from 'components/AuthUser/HomePage/Steps';
-import { Reservation } from 'components/AuthUser/ReservationPage/Reservation/Reservation';
-import { Numbers } from 'components/AuthUser/HomePage/Numbers';
-
-let themeResp = createMuiTheme();
-themeResp = responsiveFontSizes(themeResp);
-
-const useStyles = makeStyles(() => ({
- root: {
- minHeight: '100vh',
- backgroundImage: `url(${'/assets/bg3.png'})`,
- backgroundRepeat: 'no-repeat',
- backgroundSize: 'cover',
- },
- rightAlign: {
- marginLeft: 'auto',
- },
- whiteText: {
- color: 'white',
- },
- imageIcon: {
- maxHeight: '50%',
- },
- paddingBottom: {
- paddingBottom: '65px',
- },
- paddingTop: {
- paddingTop: '65px',
- },
- bodyIcon: {
- fontSize: '90px',
- paddingBottom: '10px',
- paddingTop: '10px',
- },
- contIcon: {
- width: '100%',
- left: '0',
- right: '0',
- },
- noShadow: {
- border: 'none',
- boxShadow: 'none',
- backgroundColor: 'transparent',
- },
-}));
-
-export const HomePage: FC = () => {
- const classes = useStyles();
-
- return (
- <Grid container direction="column" className={classes.paddingBottom}>
- <div className={classes.root}>
- <CssBaseline />
-
- <Grid item>
- <NavBar />
- </Grid>
-
- <MuiThemeProvider theme={themeResp}>
- <Grid item container className={classes.paddingBottom}>
- <Grid item xs={1} md={2} lg={2} />
-
- <Grid item xs={10} md={6} lg={4}>
- <Typography variant="h2" className={classes.whiteText}>
- Book Free Rides Now With
- </Typography>
- <Typography variant="h1" className={classes.whiteText}>
- MOVE AID
- </Typography>
- </Grid>
-
- <Grid item xs={false} md={3} lg={5}>
- <Hidden mdDown>
- <Container>
- <MapElement />
- </Container>
- </Hidden>
- </Grid>
-
- <Grid item xs={1} />
- </Grid>
-
- <Steps />
- </MuiThemeProvider>
- </div>
-
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3">Your Next Reservation</Typography>
- </Grid>
- <Grid item xs={2} />
- </Grid>
-
- <Grid item container style={{ paddingTop: '20px' }}>
- <Grid item xs={1} lg={2} />
- <Grid item xs={10} lg={8}>
- <Reservation />
- </Grid>
- <Grid item xs={1} lg={2} />
- </Grid>
-
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3" align="right">
- Some Our Numbers
- </Typography>
- </Grid>
- <Grid item xs={2} />
- </Grid>
-
- <Numbers />
- </Grid>
- );
-};
--
GitLab