From e8b66d8fcea497be8b1820cde8ec187383b70c60 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 12 Aug 2020 03:27:24 +0300
Subject: feat: create basic drawer

---
 src/components/Drawer/Drawer.tsx | 86 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/Drawer/Drawer.tsx

(limited to 'src/components/Drawer/Drawer.tsx')

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;
+
-- 
cgit v1.2.3


From fc63251148397c2c9b2318c898b25d08066ee6b1 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 12 Aug 2020 03:31:56 +0300
Subject: feat: close drawer on history updates

---
 src/components/Drawer/Drawer.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

(limited to 'src/components/Drawer/Drawer.tsx')

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index eded40c..76b5120 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import {
   SwipeableDrawer,
@@ -33,23 +33,27 @@ const Drawer: React.FC<PropTypes> = React.memo(({ isOpen, setIsOpen }) => {
   const history = useHistory();
   const { user, logout } = useAuth();
 
-  const handleOpen = () => {
+  const handleOpen = useCallback(() => {
     setIsOpen(true);
-  };
+  }, [setIsOpen]);
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     setIsOpen(false);
-  };
+  }, [setIsOpen]);
 
-  const handleLogout = () => {
+  useEffect(() => {
+    // Close drawer on navigations
+    return history.listen(() => handleClose());
+  }, [history, handleClose])
+
+  const handleLogout = useCallback(() => {
     logout();
-    handleClose();
-  };
+    history.push('/login');
+  }, [logout, history]);
 
-  const handleAbout = () => {
+  const handleAbout = useCallback(() => {
     history.push('/');
-    handleClose();
-  };
+  }, [history]);
 
   const iOS = useMemo(() => {
     return /iPad|iPhone|iPod/.test(navigator.userAgent);
-- 
cgit v1.2.3


From 68c7660e13fc5613ef26de752bc360a792b3f935 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 12 Aug 2020 03:39:48 +0300
Subject: feat: prevent duplicate snackbars

---
 src/components/Drawer/Drawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/Drawer/Drawer.tsx')

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 76b5120..9b416b0 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -44,7 +44,7 @@ const Drawer: React.FC<PropTypes> = React.memo(({ isOpen, setIsOpen }) => {
   useEffect(() => {
     // Close drawer on navigations
     return history.listen(() => handleClose());
-  }, [history, handleClose])
+  }, [history, handleClose]);
 
   const handleLogout = useCallback(() => {
     logout();
-- 
cgit v1.2.3