Merge pull request #77 from which-ecosystem/redesign

Mobile search and basic drawer

1 files changed, 90 insertions, 0 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;
+