Skip to content
Snippets Groups Projects
Verified Commit b331727c authored by Defendi Alberto's avatar Defendi Alberto
Browse files

Move Dashboard related components to dedicated folder.

parent 26b064f4
No related branches found
No related tags found
2 merge requests!56Refined auth flow and new website pages.,!44New route type (RestrictedRoute) and better api calls.
Hide whitespace changes
Inline Side-by-side
Showing
with 28 additions and 1024 deletions
src/components/AuthUser/Dashboard/Dashboard.tsx
+ 5
− 3
View file @ b331727c
import React, { FC } from 'react'; import React, { FC } from 'react';
import Container from '@material-ui/core/Container'; import Container from '@material-ui/core/Container';
import { Route, useRouteMatch } from 'react-router-dom'; import { Route, useRouteMatch } from 'react-router-dom';
import { NonAuthRoutes } from 'api/routes'; import { AuthRoutes } from 'api/routes';
import { HomePage } from './HomePage/HomePage'; import { HomePage } from 'components/AuthUser/Dashboard/HomePage/HomePage';
import { ProfilePage } from 'components/AuthUser/Dashboard/ProfilePage/ProfilePage';
export const Dashboard: FC = () => { export const Dashboard: FC = () => {
const { path } = useRouteMatch(); const { path } = useRouteMatch();
return ( return (
<Container maxWidth="sm"> <Container maxWidth="sm">
<Route path={`${path}/home`} component={HomePage} /> <Route exact path={`${path}${AuthRoutes.home}`} component={HomePage} />
<Route path={`${path}${AuthRoutes.profile}`} component={ProfilePage} />
</Container> </Container>
); );
}; };
src/components/AuthUser/Dashboard/HomePage/HomePage.tsx
+ 16
− 9
View file @ b331727c
import React, { FC } from 'react'; import React, { FC } from 'react';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar'; import { AuthRoutes } from 'api/routes';
import CssBaseline from '@material-ui/core/CssBaseline'; import {
import Toolbar from '@material-ui/core/Toolbar'; AppBar,
import List from '@material-ui/core/List'; Toolbar,
import Typography from '@material-ui/core/Typography'; Typography,
import ListItem from '@material-ui/core/ListItem'; Button,
import ListItemText from '@material-ui/core/ListItemText'; Drawer,
List,
ListItem,
ListItemText,
} from '@material-ui/core';
import { Link } from 'react-router-dom';
const drawerWidth = 240; const drawerWidth = 240;
...@@ -41,12 +46,14 @@ export const HomePage: FC = () => { ...@@ -41,12 +46,14 @@ export const HomePage: FC = () => {
return ( return (
<div className={classes.root}> <div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}> <AppBar position="fixed" className={classes.appBar}>
<Toolbar> <Toolbar>
<Typography variant="h6" noWrap> <Typography variant="h6" noWrap>
Moveaid Moveaid
</Typography> </Typography>
<Button variant="contained">
<Link to={`/dashboard${AuthRoutes.profile}`}>Profile</Link>
</Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Drawer <Drawer
......
src/components/AuthUser/HomePage/HomePage.tsx deleted 100644 → 0
+ 0
− 104
View file @ 26b064f4
import React, { FC } from 'react';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
const drawerWidth = 240;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
drawerContainer: {
overflow: 'auto',
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
}),
);
export const HomePage: FC = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<Typography variant="h6" noWrap>
Moveaid
</Typography>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<Toolbar />
<div className={classes.drawerContainer}>
<List>
{['Reservation'].map((text) => (
<ListItem button key={text}>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
</Drawer>
<main className={classes.content}>
<Toolbar />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus
dolor purus non enim praesent elementum facilisis leo vel. Risus at
ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum
quisque non tellus. Convallis convallis tellus id interdum velit
laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed
adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies
integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate
eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo
quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat
vivamus at augue. At augue eget arcu dictum varius duis at consectetur
lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien
faucibus et molestie ac.
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse
sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat
mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis
risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas
purus viverra accumsan in. In hendrerit gravida rutrum quisque non
tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant
morbi tristique senectus et. Adipiscing elit duis tristique
sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
posuere sollicitudin aliquam ultrices sagittis orci a.
</Typography>
</main>
</div>
);
};
src/components/AuthUser/HomePage/MapElement.tsx deleted 100644 → 0
+ 0
− 122
View file @ 26b064f4
/* eslint-disable react/jsx-props-no-spreading */
import * as React from 'react';
export const MapElement: React.FC = (props: React.SVGProps<SVGSVGElement>) => (
<svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
width={425}
height={364.74}
viewBox="0 0 923.8 753.71"
{...props}
>
<title>map</title>
<ellipse
cx={1007.29}
cy={789.73}
rx={19.99}
ry={48.53}
transform="rotate(-45 849.945 919.851)"
fill="#fff"
opacity={0.1}
/>
<ellipse cx={872.63} cy={705.7} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={872.63} cy={688.53} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={872.63} cy={671.36} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={872.63} cy={654.19} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={872.63} cy={637.02} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={872.63} cy={619.85} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={872.63} cy={602.68} rx={10.73} ry={14.05} fill="#3f3d56" />
<path
d="M912.8 485.18a51.13 51.13 0 004-5.88l-28.2-4.63 30.5.22a51.54 51.54 0 001-40.73l-40.91 21.23 37.71-27.74a51.41 51.41 0 10-84.9 57.53 51.16 51.16 0 00-5.86 9.37l36.6 19-39-13.1a51.45 51.45 0 008.29 48.27 51.4 51.4 0 1080.8 0 51.41 51.41 0 000-63.56z"
fill="#fff"
/>
<path
d="M821 516.96a51.16 51.16 0 0011 31.78 51.4 51.4 0 1080.8 0c6.89-8.74-91.8-37.55-91.8-31.78z"
opacity={0.1}
/>
<path
fill="#444053"
d="M846.97 0v720l-244-34-296.61 60.51-2.39.49-236-65V56l245-56 268 56 10.19-2.15L846.97 0z"
/>
<path
fill="#fff"
d="M805.97 39.32v644.21l-218.31-30.42-265.39 54.14-2.14.43-211.16-58.15V89.42l219.22-50.1 239.78 50.1 9.12-1.92 228.88-48.18z"
/>
<path
opacity={0.1}
d="M602.97 686l-296.61 60.51L312.97 0l268 56 10.19-2.15L602.97 686z"
/>
<g
opacity={0.3}
fill="none"
stroke="#444053"
strokeMiterlimit={10}
strokeWidth={3}
>
<path d="M573.35 138l.12 209.5h87v-86h149l17.5-22.44M88.97 204.5h323.5l20-9h8v202h140l6 18v91h108V619M483.2 619V397.5M826.97 559.66H483.2M740.87 138v481M87.97 517.14h739M177.91 619V138M349.69 138v481M88.97 259.5l571.5 2M255.3 138.87V619" />
<path d="M87.97 370.82h261.72L483.2 517.14M512.12 138v259.5M483.2 443.98h343.77" />
</g>
<path fill="#fff" d="M585.97 442h-101v-44l95.5-.5 6 17-.5 27.5z" />
<path
d="M535.97 214a55.28 55.28 0 00-55.28 55.28c0 30.53 55.28 129.72 55.28 129.72s55.28-99.15 55.28-129.72A55.28 55.28 0 00535.97 214zm0 78.86a24.32 24.32 0 1124.32-24.32 24.32 24.32 0 01-24.32 24.31z"
fill="#fff"
/>
<path
d="M535.97 214a55.28 55.28 0 00-55.28 55.28c0 30.53 55.28 129.72 55.28 129.72s55.28-99.15 55.28-129.72A55.28 55.28 0 00535.97 214zm0 78.86a24.32 24.32 0 1124.32-24.32 24.32 24.32 0 01-24.32 24.31z"
opacity={0.1}
/>
<path
d="M535.97 222a55.28 55.28 0 00-55.28 55.28c0 30.53 55.28 129.72 55.28 129.72s55.28-99.15 55.28-129.72A55.28 55.28 0 00535.97 222zm0 78.86a24.32 24.32 0 1124.32-24.32 24.32 24.32 0 01-24.32 24.31z"
fill="#fff"
/>
<ellipse
cx={649.86}
cy={806.61}
rx={33.45}
ry={13.78}
transform="rotate(-23.3 403.328 1104.861)"
fill="#fff"
opacity={0.1}
/>
<ellipse cx={511.39} cy={727.97} rx={7.4} ry={9.68} fill="#3f3d56" />
<ellipse cx={511.39} cy={716.13} rx={7.4} ry={9.68} fill="#3f3d56" />
<ellipse cx={511.39} cy={704.3} rx={7.4} ry={9.68} fill="#3f3d56" />
<ellipse cx={511.39} cy={692.47} rx={7.4} ry={9.68} fill="#3f3d56" />
<ellipse cx={511.39} cy={680.63} rx={7.4} ry={9.68} fill="#3f3d56" />
<ellipse cx={511.39} cy={668.8} rx={7.4} ry={9.68} fill="#3f3d56" />
<ellipse cx={511.39} cy={656.97} rx={7.4} ry={9.68} fill="#3f3d56" />
<path
d="M483.7 575.98a36.12 36.12 0 01-2.76-4l19.44-3.2-21 .16a35.54 35.54 0 01-.68-28.07l28.2 14.58-26-19.12a35.43 35.43 0 1158.51 39.65 35.55 35.55 0 014 6.46l-25.21 13.11 26.9-9a35.45 35.45 0 01-5.71 33.27 35.43 35.43 0 11-55.69 0 35.44 35.44 0 010-43.81z"
fill="#fff"
/>
<path
d="M546.97 597.85a35.28 35.28 0 01-7.58 21.91 35.43 35.43 0 11-55.69 0c-4.75-6 63.27-25.85 63.27-21.91z"
opacity={0.1}
/>
<ellipse
cx={186.29}
cy={767.73}
rx={19.99}
ry={48.53}
transform="rotate(-45 28.942 897.852)"
fill="#fff"
opacity={0.1}
/>
<ellipse cx={51.63} cy={683.7} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={51.63} cy={666.53} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={51.63} cy={649.36} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={51.63} cy={632.19} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={51.63} cy={615.02} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={51.63} cy={597.85} rx={10.73} ry={14.05} fill="#3f3d56" />
<ellipse cx={51.63} cy={580.68} rx={10.73} ry={14.05} fill="#3f3d56" />
<path
d="M91.8 463.18a51.13 51.13 0 004-5.88l-28.2-4.63 30.5.22a51.54 51.54 0 001-40.73l-40.91 21.23 37.71-27.74A51.41 51.41 0 1011 463.18a51.16 51.16 0 00-5.86 9.37l36.6 19-39-13.1a51.45 51.45 0 008.29 48.27 51.4 51.4 0 1080.8 0 51.41 51.41 0 000-63.56z"
fill="#fff"
/>
<path
d="M0 494.96a51.16 51.16 0 0011 31.78 51.4 51.4 0 1080.8 0C98.69 518 0 489.19 0 494.96z"
opacity={0.1}
/>
</svg>
);
src/components/AuthUser/HomePage/NavBar.tsx deleted 100644 → 0
+ 0
− 69
View file @ 26b064f4
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Tabs, Tab } from '@material-ui/core';
import HomeIcon from '@material-ui/icons/Home';
import ImportContactsIcon from '@material-ui/icons/ImportContacts';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
const useStyles = makeStyles(() => ({
tabs: {
color: 'white',
paddingLeft: '25px',
paddingRight: '25px',
paddingTop: '8px',
paddingBottom: '35px',
width: '100%',
flexWrap: 'wrap',
},
tabPan: {
paddingLeft: '56px',
paddingRight: '56px',
},
tabIcon: {
paddingRight: '10px',
fontSize: '38px',
},
rightAlign: {
marginLeft: 'auto',
},
}));
export const NavBar: FC = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (
event: React.ChangeEvent<unknown>,
newValue: number,
): void => {
setValue(newValue);
};
return (
<Tabs
variant="scrollable"
scrollButtons="on"
onChange={handleChange}
value={value}
className={classes.tabs}
TabIndicatorProps={{ style: { display: 'none' } }}
>
<Tab
label="HomePage"
icon={<HomeIcon className={classes.tabIcon} />}
className={classes.tabPan}
/>
<Tab
label="Reservation"
icon={<ImportContactsIcon className={classes.tabIcon} />}
className={`${classes.tabPan} ${classes.rightAlign}`}
/>
<Tab
label="Profile"
className={classes.tabPan}
icon={<AccountCircleIcon className={classes.tabIcon} />}
/>
</Tabs>
);
};
src/components/AuthUser/HomePage/NavBarLogin.tsx deleted 100644 → 0
+ 0
− 56
View file @ 26b064f4
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Tabs, Tab } from '@material-ui/core';
import LockIcon from '@material-ui/icons/Lock';
const useStyles = makeStyles(() => ({
tabs: {
color: 'white',
paddingLeft: '25px',
paddingRight: '25px',
paddingTop: '8px',
paddingBottom: '35px',
},
tabPan: {
paddingLeft: '56px',
paddingRight: '56px',
},
tabIcon: {
paddingRight: '10px',
fontSize: '38px',
},
rightAlign: {
marginLeft: 'auto',
backgroundColor: '#FFFFFF',
},
}));
export const NavBarLogin: FC = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (
event: React.ChangeEvent<unknown>,
newValue: number,
): void => {
setValue(newValue);
};
return (
<Tabs
textColor="primary"
onChange={handleChange}
value={value}
className={classes.tabs}
TabIndicatorProps={{ style: { display: 'none' } }}
>
<Tab label="" className={classes.tabPan} />
<Tab
label="Login"
icon={<LockIcon className={classes.tabIcon} />}
className={`${classes.tabPan} ${classes.rightAlign}`}
/>
</Tabs>
);
};
src/components/AuthUser/HomePage/Numbers.tsx deleted 100644 → 0
+ 0
− 137
View file @ 26b064f4
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Typography, CardContent, Card, Hidden } from '@material-ui/core';
import LocalTaxiIcon from '@material-ui/icons/LocalTaxi';
import LocationCityIcon from '@material-ui/icons/LocationCity';
import PeopleIcon from '@material-ui/icons/People';
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 Numbers: FC = () => {
const classes = useStyles();
return (
<Grid item container alignItems="stretch" style={{ paddingTop: '20px' }}>
<Grid item xs={1} lg={2} />
<Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
<CardContent>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={12}>
<LocalTaxiIcon color="primary" className={classes.bodyIcon} />
</Grid>
</Grid>
<Typography variant="h4" align="center">
300
</Typography>
<Typography variant="h6" align="center">
Rides Offered
</Typography>
</CardContent>
</Grid>
<Grid item xs={2} lg={1} />
<Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
<CardContent>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={12}>
<LocationCityIcon color="primary" className={classes.bodyIcon} />
</Grid>
</Grid>
<Typography variant="h4" align="center">
25000
</Typography>
<Typography variant="h6" align="center">
Kilometers
</Typography>
</CardContent>
</Grid>
<Grid item xs={1} />
<Hidden lgUp>
<Grid item xs={4} />
</Hidden>
<Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
<CardContent>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={12}>
<PeopleIcon color="primary" className={classes.bodyIcon} />
</Grid>
</Grid>
<Typography variant="h4" align="center">
225
</Typography>
<Typography variant="h6" align="center">
People who used our service
</Typography>
</CardContent>
</Grid>
<Grid item xs={4} lg={2} />
</Grid>
);
};
src/components/AuthUser/HomePage/Steps.tsx deleted 100644 → 0
+ 0
− 132
View file @ 26b064f4
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Typography, CardContent, Card, Hidden } from '@material-ui/core';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import BookmarkIcon from '@material-ui/icons/Bookmark';
import RoomIcon from '@material-ui/icons/Room';
const useStyles = makeStyles(() => ({
bodyIcon: {
fontSize: '90px',
paddingBottom: '10px',
paddingTop: '10px',
},
paddingBot: {
paddingBottom: '40px',
},
noShadow: {
border: 'none',
boxShadow: 'none',
backgroundColor: 'transparent',
},
}));
export const Steps: FC = () => {
const classes = useStyles();
return (
<Grid item container alignItems="stretch">
<Grid item xs={1} lg={2} />
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
<Typography variant="h4" align="center">
STEP 1
</Typography>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={12}>
<VpnKeyIcon color="primary" className={classes.bodyIcon} />
</Grid>
</Grid>
<Typography variant="h6">
Log In or Register an account on the site. Fill all the fields
related to your personal information.
</Typography>
</CardContent>
</Grid>
<Grid item xs={1} />
<Hidden lgUp>
<Grid
item
xs={12}
component={Card}
className={`${classes.paddingBot} ${classes.noShadow}`}
/>
<Grid item xs={1} />
</Hidden>
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
<Typography variant="h4" align="center">
STEP 2
</Typography>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={12}>
<BookmarkIcon color="primary" className={classes.bodyIcon} />
</Grid>
</Grid>
<Typography variant="h6">
Book in the reservation section a free ride at least 48h than your
appointment
</Typography>
</CardContent>
</Grid>
<Grid item xs={1} />
<Hidden lgUp>
<Grid
item
xs={12}
component={Card}
className={`${classes.paddingBot} ${classes.noShadow}`}
/>
<Grid item xs={1} />
</Hidden>
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
<Typography variant="h4" align="center">
STEP 3
</Typography>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={12}>
<RoomIcon color="primary" className={classes.bodyIcon} />
</Grid>
</Grid>
<Typography variant="h6">
Wait your free drive compfortably at home and reach the place you
have booked in the reservation easily!
</Typography>
</CardContent>
</Grid>
<Grid item xs={1} lg={2} />
</Grid>
);
};
src/components/AuthUser/ProfilePage/ProfilePage.md deleted 100644 → 0
+ 0
− 5
View file @ 26b064f4
Profile page for all type of users
```js
<ProfilePage />
```
\ No newline at end of file
src/components/AuthUser/ProfilePage/ProfilePage.test.tsx deleted 100644 → 0
+ 0
− 10
View file @ 26b064f4
import React from 'react';
import { render } from '@testing-library/react';
import { ProfilePage } from './ProfilePage';
describe('<ProfilePage />', () => {
it('renders without crashing', () => {
const wrapper = render(<ProfilePage />);
expect(wrapper.queryByTestId('ProfilePage')).toBeTruthy();
});
});
src/components/AuthUser/ProfilePage/ProfilePage.tsx deleted 100644 → 0
+ 0
− 23
View file @ 26b064f4
import React, { FC } from 'react';
import Button from '@material-ui/core/Button';
import axios from 'axios';
import { NonAuthRoutes } from 'api/routes';
import { useHistory } from 'react-router-dom';
export const ProfilePage: FC = () => {
const history = useHistory();
const logout = (): void => {
axios
.post('/api/web/login/logout')
.then(() => history.replace(NonAuthRoutes.home));
};
return (
<div data-testid="ProfilePage">
<Button variant="outlined" color="default" onClick={logout}>
Logout
</Button>
</div>
);
};
src/components/AuthUser/ReservationPage/Reservation/Reservation.tsx deleted 100644 → 0
+ 0
− 60
View file @ 26b064f4
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from '@material-ui/core';
const useStyles = makeStyles(() => ({
noShadow: {
border: 'none',
boxShadow: 'none',
backgroundColor: 'transparent',
},
}));
function createData(
name: string,
value: string,
): { name: string; value: string } {
return { name, value };
}
const rows = [
createData('From:', 'Via Di Quel Bozen, 45, 39037'),
createData('Date:', '29 / 07 / 2021'),
createData('Time:', '12:15'),
createData('To:', 'Via del Krankenhaus, 7, 39037'),
];
export const Reservation: FC = () => {
const classes = useStyles();
return (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>DriveToHospital </TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.value}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
src/components/AuthUser/ReservationPage/ReservationPage.test.tsx deleted 100644 → 0
+ 0
− 10
View file @ 26b064f4
import React from 'react';
import { render } from '@testing-library/react';
import { ReservationPage } from './ReservationPage';
describe('<ReservationPage />', () => {
it('renders without crashing', () => {
const wrapper = render(<ReservationPage />);
expect(wrapper.queryByTestId('Reservation')).toBeTruthy();
});
});
src/components/AuthUser/ReservationPage/ReservationPage.tsx deleted 100644 → 0
+ 0
− 257
View file @ 26b064f4
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
CssBaseline,
Grid,
Typography,
Hidden,
createMuiTheme,
responsiveFontSizes,
MuiThemeProvider,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField,
Button,
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';
import { Reservation } from 'components/AuthUser/ReservationPage/Reservation/Reservation';
import { NavBar } from '../HomePage/NavBar';
let themeResp = createMuiTheme();
themeResp = responsiveFontSizes(themeResp);
const useStyles = makeStyles(() => ({
root: {
minHeight: '36vh',
backgroundImage: `url(${'/assets/bg7.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',
},
extendedIcon: {
fontSize: '50px',
},
fab: {
margin: '10px 90px 80px 10px',
bottom: '0',
right: '0',
position: 'fixed',
padding: '45px',
},
fabSmall: {
margin: '10px 45px 70px 10px',
bottom: '0',
right: '0',
position: 'fixed',
padding: '35px',
},
}));
export const ReservationPage: FC = () => {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClickOpen = (): void => {
setOpen(true);
};
const handleClose = (): void => {
setOpen(false);
};
return (
<div data-testid="Reservation">
<Grid container direction="column" className={classes.paddingBottom}>
<div className={classes.root}>
<CssBaseline />
<Grid item>
<NavBar />
</Grid>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">
Book New Reservation
</DialogTitle>
<DialogContent>
<DialogContentText>
Write here below the details of your next reservation
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Name Reservation"
type="text"
fullWidth
/>
<TextField
autoFocus
margin="dense"
id="name"
label="Date"
type="date"
fullWidth
InputLabelProps={{ shrink: true }}
/>
<TextField
autoFocus
margin="dense"
id="name"
label="Department Time"
type="time"
fullWidth
InputLabelProps={{ shrink: true }}
/>
<TextField
autoFocus
margin="dense"
id="name"
label="Destination"
type="text"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary" variant="contained">
Subscribe
</Button>
</DialogActions>
</Dialog>
<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}>
Plan Here Your
</Typography>
<Typography variant="h1" className={classes.whiteText}>
RESERVATIONS
</Typography>
</Grid>
<Grid item xs={1} />
</Grid>
</MuiThemeProvider>
</div>
<Hidden mdDown>
<Fab
color="primary"
size="large"
aria-label="add"
className={classes.fab}
onClick={handleClickOpen}
>
<AddIcon className={classes.extendedIcon} />
</Fab>
</Hidden>
<Hidden lgUp>
<Fab
color="primary"
size="small"
aria-label="add"
className={classes.fabSmall}
>
<AddIcon />
</Fab>
</Hidden>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} />
<Grid item xs={8}>
<Typography variant="h3">Your Next Reservations</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 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 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">
Your Past Reservations
</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>
</div>
);
};
src/components/AuthUser/SignInForm/SignInForm.tsx
+ 7
− 12
View file @ b331727c
...@@ -4,26 +4,19 @@ import { SubmitHandler, useForm } from 'react-hook-form'; ...@@ -4,26 +4,19 @@ import { SubmitHandler, useForm } from 'react-hook-form';
import { Button } from '@material-ui/core'; import { Button } from '@material-ui/core';
import { InputField } from 'components/AuthUser/InputField/InputField'; import { InputField } from 'components/AuthUser/InputField/InputField';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { AuthRoutes } from 'api/routes'; import { AuthRoutes, NonAuthRoutes } from 'api/routes';
import { AuthContext } from 'components/AuthUser/AuthContext'; import { AuthContext } from 'components/AuthUser/AuthContext';
import { useStyles } from './useStyles'; import { useStyles } from './useStyles';
import { fetchCookie } from './fetchCookie';
import { CredentialsType } from './CredentialsType'; import { CredentialsType } from './CredentialsType';
const defaultValues: CredentialsType = { const defaultValues = {
username: '', username: '',
password: '', password: '',
}; };
export const SignInForm: FC = () => { export const SignInForm: FC = () => {
const [isCookieFetched, setIsCookieFetched] = useState<string>('');
useEffect(() => {
if (!isCookieFetched) fetchCookie(setIsCookieFetched);
}, [isCookieFetched]);
const history = useHistory(); const history = useHistory();
const { setRole } = useContext(AuthContext); const { setRole, setIsAuth } = useContext(AuthContext);
const { control, errors, setError, handleSubmit } = useForm<CredentialsType>({ const { control, errors, setError, handleSubmit } = useForm<CredentialsType>({
defaultValues, defaultValues,
...@@ -38,7 +31,7 @@ export const SignInForm: FC = () => { ...@@ -38,7 +31,7 @@ export const SignInForm: FC = () => {
{ {
username: values.username, username: values.username,
password: values.password, password: values.password,
csrfmiddlewaretoken: isCookieFetched, csrfmiddlewaretoken: localStorage.getItem('COOKIE'),
}, },
{ {
headers: { headers: {
...@@ -47,6 +40,7 @@ export const SignInForm: FC = () => { ...@@ -47,6 +40,7 @@ export const SignInForm: FC = () => {
}, },
) )
.then((response) => { .then((response) => {
console.log(response);
if (response.data.status === 'fail') { if (response.data.status === 'fail') {
setError('username', { setError('username', {
type: 'server', type: 'server',
...@@ -58,7 +52,8 @@ export const SignInForm: FC = () => { ...@@ -58,7 +52,8 @@ export const SignInForm: FC = () => {
}); });
} else if (response.data.status === 'success') { } else if (response.data.status === 'success') {
setRole(response.data.role); setRole(response.data.role);
history.replace(AuthRoutes.dashboard); setIsAuth(true);
history.replace(`${AuthRoutes.dashboard}${AuthRoutes.home}`);
} }
}); });
}; };
......
src/components/AuthUser/SignInForm/fetchCookie.ts deleted 100644 → 0
+ 0
− 15
View file @ 26b064f4
import axios from 'axios';
/**
*
* Ask and set csrf cookie to server.
* @param setIsCookieFetched function to set the state isCookieFetched.
* @returns null
*/
export const fetchCookie = async (
setIsCookieFetched: React.Dispatch<React.SetStateAction<string>>,
): Promise<unknown> => {
const response = await axios('/api/web/csrf');
setIsCookieFetched(response.data.token);
return null;
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment