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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
import React, { useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import {
IconButton,
Typography,
useMediaQuery
} from '@material-ui/core';
import {
AccountCircle,
Notifications,
Home,
Menu
} from '@material-ui/icons';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { useAuth } from '../../hooks/useAuth';
import MobileHeader from './MobileHeader';
import BottomBar from './BottomBar';
import BrowserHeader from './BrowserHeader';
import Drawer from '../Drawer/Drawer';
const useStyles = makeStyles(theme => ({
logo: {
fontWeight: 'bold',
cursor: 'pointer',
color: 'white'
},
avatar: {
width: theme.spacing(3),
height: theme.spacing(3)
},
activeIcon: {
color: 'white'
}
}));
const Header: React.FC = React.memo(() => {
const classes = useStyles();
const { user } = useAuth();
const theme = useTheme();
const history = useHistory();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
const [path, setPath] = useState<string>(useLocation().pathname);
useEffect(() => {
return history.listen(location => {
setPath(location.pathname);
});
}, [history]);
const handleHome = (): void => {
history.push('/');
};
const handleFeed = (): void => {
history.push('/feed');
};
const handleProfile = (): void => {
if (user) history.push(`/profile/${user.username}`);
else history.push('/login');
};
const handleNotifications = (): void => {
history.push('/notifications');
};
const handleMenu = (): void => {
setIsDrawerOpen(true);
};
const feed = (
<IconButton onClick={handleFeed}>
<Home className={path === '/feed' ? classes.activeIcon : ''} />
</IconButton>
);
const notifications = (
<IconButton onClick={handleNotifications}>
<Notifications className={path === '/notifications' ? classes.activeIcon : ''} />
</IconButton>
);
const menu = (
<IconButton onClick={handleMenu}>
<Menu />
</IconButton>
);
const logo = (
<Typography variant="h5" className={classes.logo} onClick={handleHome}>
Which
</Typography>
);
const profile = (
<IconButton onClick={handleProfile}>
<AccountCircle className={[classes.avatar, path.includes('/profile') ? classes.activeIcon : ''].join(' ')} />
</IconButton>
);
return isMobile ? (
<>
<MobileHeader logo={logo} menu={menu} />
<BottomBar feed={feed} profile={profile} notifications={notifications} />
<Drawer isOpen={isDrawerOpen} setIsOpen={setIsDrawerOpen} />
</>
) : (
<>
<BrowserHeader menu={menu} logo={logo} profile={profile} notifications={notifications} feed={feed} />
<Drawer isOpen={isDrawerOpen} setIsOpen={setIsDrawerOpen} />
</>
);
});
export default Header;
|
