diff options
| -rw-r--r-- | src/components/Drawer/Drawer.tsx | 86 | ||||
| -rw-r--r-- | src/components/Drawer/UserInfo.tsx | 38 | ||||
| -rw-r--r-- | src/components/Header/Header.tsx | 13 | ||||
| -rw-r--r-- | src/containers/Profile/MoreMenu.tsx | 72 | ||||
| -rw-r--r-- | src/containers/Profile/ProfileInfo.tsx | 2 |
5 files changed, 134 insertions, 77 deletions
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx new file mode 100644 index 0000000..eded40c --- /dev/null +++ b/src/components/Drawer/Drawer.tsx @@ -0,0 +1,86 @@ +import React, { useMemo } 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 = () => { + setIsOpen(true); + }; + + const handleClose = () => { + setIsOpen(false); + }; + + const handleLogout = () => { + logout(); + handleClose(); + }; + + const handleAbout = () => { + history.push('/'); + handleClose(); + }; + + 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; + diff --git a/src/components/Drawer/UserInfo.tsx b/src/components/Drawer/UserInfo.tsx new file mode 100644 index 0000000..027f076 --- /dev/null +++ b/src/components/Drawer/UserInfo.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Typography } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import { User } from 'which-types'; + +import Avatar from '../Avatar/Avatar'; + +interface PropTypes { + user: User; +} + +const useStyles = makeStyles(theme => ({ + root: { + padding: theme.spacing(4, 10), + textAlign: 'center' + }, + avatar: { + width: theme.spacing(14), + height: theme.spacing(14) + } +})); + + +const UserInfo: React.FC<PropTypes> = React.memo(({ user }) => { + const classes = useStyles(); + + return ( + <div className={classes.root}> + <Avatar user={user} className={classes.avatar} /> + <Typography variant="h5"> + {user.username} + </Typography> + </div> + ); +}); + +export default UserInfo; + diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 461a1f2..224f6b0 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import { IconButton, @@ -9,7 +9,7 @@ import { AccountCircle, Notifications, Home, - Menu, + Menu } from '@material-ui/icons'; import { makeStyles, useTheme } from '@material-ui/core/styles'; @@ -18,6 +18,7 @@ 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 => ({ @@ -38,6 +39,7 @@ const Header: React.FC = React.memo(() => { const theme = useTheme(); const history = useHistory(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false); const handleHome = (): void => { history.push('/'); @@ -56,6 +58,10 @@ const Header: React.FC = React.memo(() => { history.push('/notifications'); }; + const handleMenu = (): void => { + setIsDrawerOpen(true); + }; + const feed = ( <IconButton onClick={handleFeed}> <Home /> @@ -69,7 +75,7 @@ const Header: React.FC = React.memo(() => { ); const menu = ( - <IconButton> + <IconButton onClick={handleMenu}> <Menu /> </IconButton> ); @@ -94,6 +100,7 @@ const Header: React.FC = React.memo(() => { <> <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} /> diff --git a/src/containers/Profile/MoreMenu.tsx b/src/containers/Profile/MoreMenu.tsx deleted file mode 100644 index 1f41879..0000000 --- a/src/containers/Profile/MoreMenu.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import { useHistory } from 'react-router-dom'; -import IconButton from '@material-ui/core/IconButton'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; -import { makeStyles } from '@material-ui/core'; -import { useAuth } from '../../hooks/useAuth'; - -const ITEM_HEIGHT = 48; - -const useStyles = makeStyles({ - moreMenu: { - position: 'absolute', - right: 10, - zIndex: 100 - } -}); - -const MoreMenu: React.FC = () => { - const classes = useStyles(); - const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null); - const { logout } = useAuth(); - const history = useHistory(); - - const open = Boolean(anchorEl); - - const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { - setAnchorEl(event.currentTarget); - }; - - const handleLogout = () => { - logout(); - history.push('/login'); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - return ( - <div className={classes.moreMenu}> - <div> - <IconButton - aria-label="more" - aria-controls="long-menu" - aria-haspopup="true" - onClick={handleClick} - > - <MoreHorizIcon /> - </IconButton> - <Menu - id="long-menu" - anchorEl={anchorEl} - keepMounted - open={open} - onClose={handleClose} - PaperProps={{ - style: { - maxHeight: ITEM_HEIGHT * 4.5, - width: '20ch' - } - }} - > - <MenuItem onClick={handleLogout}>Log out</MenuItem> - </Menu> - </div> - </div> - ); -}; - -export default MoreMenu; diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx index a01c222..87af99d 100644 --- a/src/containers/Profile/ProfileInfo.tsx +++ b/src/containers/Profile/ProfileInfo.tsx @@ -5,7 +5,6 @@ import { User } from 'which-types'; import CameraAltIcon from '@material-ui/icons/CameraAlt'; import VerifiedIcon from '@material-ui/icons/CheckCircleOutline'; import Skeleton from '@material-ui/lab/Skeleton'; -import MoreMenu from './MoreMenu'; import Highlight from './Highlight'; import UploadImage from '../../components/UploadImage/UploadImage'; import Avatar from '../../components/Avatar/Avatar'; @@ -110,7 +109,6 @@ const ProfileInfo: React.FC<PropTypes> = ({ : userInfo?._id === user?._id ? ( <div> - <MoreMenu /> <div className={classes.avatarContainer}> <Badge overlap="circle" |