aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Drawer/Drawer.tsx90
-rw-r--r--src/components/Drawer/UserInfo.tsx38
-rw-r--r--src/components/Header/Header.tsx22
-rw-r--r--src/components/Header/MobileHeader.tsx20
-rw-r--r--src/components/Header/SearchBar.tsx7
5 files changed, 160 insertions, 17 deletions
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
new file mode 100644
index 0000000..9b416b0
--- /dev/null
+++ b/src/components/Drawer/Drawer.tsx
@@ -0,0 +1,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;
+
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 5621dbf..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,8 +9,7 @@ import {
AccountCircle,
Notifications,
Home,
- Menu,
- Search
+ Menu
} from '@material-ui/icons';
import { makeStyles, useTheme } from '@material-ui/core/styles';
@@ -19,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 => ({
@@ -39,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('/');
@@ -57,6 +58,10 @@ const Header: React.FC = React.memo(() => {
history.push('/notifications');
};
+ const handleMenu = (): void => {
+ setIsDrawerOpen(true);
+ };
+
const feed = (
<IconButton onClick={handleFeed}>
<Home />
@@ -70,17 +75,11 @@ const Header: React.FC = React.memo(() => {
);
const menu = (
- <IconButton>
+ <IconButton onClick={handleMenu}>
<Menu />
</IconButton>
);
- const search = (
- <IconButton>
- <Search />
- </IconButton>
- );
-
const logo = (
<Typography variant="h5" className={classes.logo} onClick={handleHome}>
Which
@@ -99,8 +98,9 @@ const Header: React.FC = React.memo(() => {
return isMobile ? (
<>
- <MobileHeader logo={logo} menu={menu} search={search} />
+ <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/components/Header/MobileHeader.tsx b/src/components/Header/MobileHeader.tsx
index a20d54a..752e4bc 100644
--- a/src/components/Header/MobileHeader.tsx
+++ b/src/components/Header/MobileHeader.tsx
@@ -1,16 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
import {
AppBar,
Toolbar,
+ IconButton,
useScrollTrigger,
Slide
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
+import { Search, Clear } from '@material-ui/icons';
+import SearchBar from './SearchBar';
interface PropTypes {
menu: JSX.Element;
logo: JSX.Element;
- search: JSX.Element;
}
const useStyles = makeStyles({
@@ -24,15 +26,23 @@ const useStyles = makeStyles({
const MobileHeader: React.FC<PropTypes> = React.memo(props => {
const classes = useStyles();
const trigger = useScrollTrigger();
- const { menu, search, logo } = props;
+ const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
+
+ const { menu, logo } = props;
+
+ const handleToggle = () => {
+ setIsSearchOpen(value => !value);
+ };
return (
<Slide appear={false} direction="down" in={!trigger}>
<AppBar position="fixed">
<Toolbar className={classes.root}>
{menu}
- {logo}
- {search}
+ {isSearchOpen ? <SearchBar callback={handleToggle} /> : logo}
+ <IconButton onClick={handleToggle}>
+ {isSearchOpen ? <Clear /> : <Search />}
+ </IconButton>
</Toolbar>
</AppBar>
</Slide>
diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx
index 8bfe0fb..ea6e6ac 100644
--- a/src/components/Header/SearchBar.tsx
+++ b/src/components/Header/SearchBar.tsx
@@ -15,6 +15,10 @@ import { User } from 'which-types';
import { get } from '../../requests';
import UserStrip from '../UserStrip/UserStrip';
+interface PropTypes {
+ callback?: () => void;
+}
+
const INTERVAL = 300;
const LIMIT = 7;
@@ -37,7 +41,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-const SearchBar: React.FC = React.memo(() => {
+const SearchBar: React.FC<PropTypes> = React.memo(({ callback }) => {
const [results, setResults] = useState<User[]>([]);
const [query, setQuery] = useState<string>('');
const [debouncedQuery, setDebouncedQuery] = useState<string>(query);
@@ -72,6 +76,7 @@ const SearchBar: React.FC = React.memo(() => {
const { username } = results[index];
history.push(`/profile/${username}`);
handleClose();
+ if (callback) callback();
};
const SearchResults = (
generated by cgit v1.2.3 (git 2.25.1) at 2025-02-01 22:00:19 +0000