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