1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import React, { useMemo, useEffect, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import {
SwipeableDrawer,
List,
ListItem,
Typography,
Divider
} from '@material-ui/core';
import { ExitToApp as LogoutIcon, Info } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';
import UserInfo from './UserInfo';
import { useAuth } from '../../hooks/useAuth';
interface PropTypes {
isOpen: boolean;
setIsOpen: (value: boolean) => void;
}
const useStyles = makeStyles(theme => ({
item: {
padding: theme.spacing(2, 14, 2, 2)
},
icon: {
marginRight: theme.spacing(1)
}
}));
const Drawer: React.FC<PropTypes> = React.memo(({ isOpen, setIsOpen }) => {
const classes = useStyles();
const history = useHistory();
const { user, logout } = useAuth();
const handleOpen = useCallback(() => {
setIsOpen(true);
}, [setIsOpen]);
const handleClose = useCallback(() => {
setIsOpen(false);
}, [setIsOpen]);
useEffect(() => {
// Close drawer on navigations
return history.listen(() => handleClose());
}, [history, handleClose])
const handleLogout = useCallback(() => {
logout();
history.push('/login');
}, [logout, history]);
const handleAbout = useCallback(() => {
history.push('/');
}, [history]);
const iOS = useMemo(() => {
return /iPad|iPhone|iPod/.test(navigator.userAgent);
}, []);
return (
<SwipeableDrawer
anchor="left"
open={isOpen}
onOpen={handleOpen}
onClose={handleClose}
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
>
{user && <UserInfo user={user} />}
<Divider />
<List>
{user && (
<ListItem button className={classes.item} onClick={handleLogout}>
<LogoutIcon className={classes.icon} />
<Typography>Logout</Typography>
</ListItem>
)}
<ListItem button className={classes.item} onClick={handleAbout}>
<Info className={classes.icon} />
<Typography>About</Typography>
</ListItem>
</List>
</SwipeableDrawer>
);
});
export default Drawer;
|
