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
|
import React, { useState } from 'react';
import { useHistory } 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 Avatar from '../Avatar/Avatar';
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)
}
}));
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 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 />
</IconButton>
);
const notifications = (
<IconButton onClick={handleNotifications}>
<Notifications />
</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}>
{
user?.avatarUrl
? <Avatar className={classes.avatar} user={user} />
: <AccountCircle className={classes.avatar} />
}
</IconButton>
);
return isMobile ? (
<>
<MobileHeader logo={logo} menu={menu} />
<BottomBar feed={feed} profile={profile} notifications={notifications} />
<Drawer isOpen={isDrawerOpen} setIsOpen={setIsDrawerOpen} />
</>
) : (
<BrowserHeader logo={logo} profile={profile} notifications={notifications} feed={feed} />
);
});
export default Header;
|
