fix: close drawer when executing an action

chain4travel · Oct 2, 2023 · 1132384 · 1132384
1 parent 39b8376
commit 1132384
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 17 deletions.
diff --git a/src/components/Navbar/LoginButton.tsx b/src/components/Navbar/LoginButton.tsx
@@ -15,21 +15,31 @@ import MHidden from '../@material-extend/MHidden'
 import { LoadAccountMenu } from '../LoadAccountMenu'
 import AliasPicker from './AliasPicker'
 
-export default function LoginIcon() {
+interface LoginIconProps {
+    handleCloseSidebar?: () => void
+}
+
+export default function LoginIcon({ handleCloseSidebar }: LoginIconProps) {
     const cAddress = useAppSelector(state => state.appConfig.walletStore?.activeWallet?.ethAddress)
     const auth = useAppSelector(state => state.appConfig.isAuth)
     const dispatch = useAppDispatch()
     const navigate = useNavigate()
     const account = useAppSelector(getAccount)
     const theme = useTheme()
     const logout = async () => {
+        handleCloseSidebar()
         await store.dispatch('logout')
         dispatch(updateAccount(null))
         dispatch(updateAuthStatus(false))
         dispatch(changeActiveApp('Network'))
         navigate('/')
     }
 
+    const navigateToSettings = () => {
+        navigate('/settings')
+        handleCloseSidebar()
+    }
+
     const handleKeyDown = e => {
         e.stopPropagation()
     }
@@ -38,7 +48,7 @@ export default function LoginIcon() {
         <>
             <MHidden width="smUp">
                 <MenuList sx={{ backgroundColor: 'transparent' }}>
-                    <MenuItem onClick={() => navigate('/settings')}>
+                    <MenuItem onClick={navigateToSettings}>
                         <IconButton>
                             <Icon path={mdiCogOutline} size={0.8} />
                         </IconButton>
@@ -67,10 +77,7 @@ export default function LoginIcon() {
                             label="beta"
                         />
                     </MenuItem>
-                    <MenuItem
-                        onClick={logout}
-                        sx={{ display: 'flex', justifyContent: 'space-between' }}
-                    >
+                    <MenuItem onClick={logout} sx={{ display: 'flex' }}>
                         <IconButton>
                             <Icon path={mdiLogout} size={0.8} />
                         </IconButton>

diff --git a/src/components/Navbar/NetworkSwitcher.tsx b/src/components/Navbar/NetworkSwitcher.tsx
@@ -21,7 +21,11 @@ import AddNewNetwork from './AddNewNetwork'
 import SelectedNetwork from './SelectNetwork'
 import useNetwork from '../../hooks/useNetwork'
 
-export default function NetworkSwitcher() {
+interface NetworkSwitcherProps {
+    handleCloseSidebar?: () => void
+}
+
+export default function NetworkSwitcher({ handleCloseSidebar }: NetworkSwitcherProps) {
     const {
         handleChangeNetwork,
         handleEditCustomNetwork,
@@ -38,6 +42,31 @@ export default function NetworkSwitcher() {
     } = useNetwork()
     const theme = useTheme()
 
+    const changeNetwork = networkName => {
+        handleChangeNetwork(networkName)
+        handleCloseSidebar()
+    }
+
+    const editNetwork = () => {
+        handleEditCustomNetwork()
+        handleCloseSidebar()
+    }
+
+    const removeNetwork = () => {
+        handleRemoveCustomNetwork()
+        handleCloseSidebar()
+    }
+
+    const openModal = () => {
+        handleOpenModal()
+        handleCloseSidebar()
+    }
+
+    const closeModal = () => {
+        handleCloseModal()
+        handleCloseSidebar()
+    }
+
     return (
         <>
             {/* Mobile */}
@@ -62,7 +91,7 @@ export default function NetworkSwitcher() {
                                 alignItems: 'baseline',
                                 color: theme.palette.text.primary,
                             }}
-                            onClick={() => handleChangeNetwork(network.name)}
+                            onClick={() => changeNetwork(network.name)}
                         >
                             <Stack
                                 direction="row"
@@ -93,10 +122,10 @@ export default function NetworkSwitcher() {
                                 <Box sx={{ flexGrow: 1 }} />
                                 {!network.readonly && network.url !== activeNetwork.url && (
                                     <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-                                        <IconButton onClick={() => handleEditCustomNetwork()}>
+                                        <IconButton onClick={editNetwork}>
                                             <Icon path={mdiPencilOutline} size={0.8} />
                                         </IconButton>
-                                        <IconButton onClick={() => handleRemoveCustomNetwork()}>
+                                        <IconButton onClick={removeNetwork}>
                                             <Icon path={mdiDeleteOutline} size={0.8} />
                                         </IconButton>
                                     </Box>
@@ -122,7 +151,7 @@ export default function NetworkSwitcher() {
                         </MenuItem>
                     ))}
                     <MenuItem
-                        onClick={handleOpenModal}
+                        onClick={openModal}
                         sx={{
                             typography: 'body1',
                             width: '100%',
@@ -136,11 +165,11 @@ export default function NetworkSwitcher() {
                         </IconButton>
                     </MenuItem>
                 </MenuList>
-                <DialogAnimate open={open} onClose={handleCloseModal}>
+                <DialogAnimate open={open} onClose={closeModal}>
                     <DialogTitle>Add New Network</DialogTitle>
                     <AddNewNetwork
                         networks={networks}
-                        handleClose={handleCloseModal}
+                        handleClose={closeModal}
                         switchNetwork={switchNetwork}
                         edit={edit}
                         networkToEdit={networkToEdit}

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -49,6 +49,11 @@ export default function Navbar() {
         }
     }
 
+    const navigateToLogin = () => {
+        navigate('/login')
+        handleCloseSidebar()
+    }
+
     useIdleTimer({
         onIdle,
         timeout: TIMEOUT_DURATION,
@@ -84,7 +89,7 @@ export default function Navbar() {
                     <MHidden width="smUp">
                         {!auth && (
                             <Box
-                                onClick={() => navigate('/login')}
+                                onClick={navigateToLogin}
                                 sx={{
                                     display: 'flex',
                                     alignItems: 'center',
@@ -120,7 +125,7 @@ export default function Navbar() {
                                 >
                                     <Box>
                                         <ThemeSwitcher />
-                                        <IconButton onClick={() => navigate('/login')}>
+                                        <IconButton onClick={navigateToLogin}>
                                             <Icon path={mdiWalletOutline} size={1} />
                                         </IconButton>
                                     </Box>
@@ -129,9 +134,11 @@ export default function Navbar() {
                                         <Icon path={mdiClose} size={1} />
                                     </MIconButton>
                                 </Stack>
-                                {activeNetwork && <NetworkSwitcher />}
+                                {activeNetwork && (
+                                    <NetworkSwitcher handleCloseSidebar={handleCloseSidebar} />
+                                )}
                             </Box>
-                            {auth && <LoginButton />}
+                            {auth && <LoginButton handleCloseSidebar={handleCloseSidebar} />}
                         </Drawer>
                         <MIconButton onClick={handleOpenSidebar}>
                             <Icon path={mdiMenu} size={1} />