Refactored navbar by seperating mobile menu

Author: ujjavaldesai07

client/src/components/routes/navbar/mobileMenu.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import log from "loglevel";
+import {Grid, IconButton, Menu} from "@material-ui/core";
+import MenuItem from "@material-ui/core/MenuItem";
+import BagButton from "./bagButton";
+
+export default function MobileMenu(props) {
+
+    log.info(`[MobileMenu]: Rendering MobileMenu Component`)
+    return (
+        <Menu
+            anchorEl={props.mobileMoreAnchorEl}
+            anchorOrigin={{vertical: 'top', horizontal: 'right'}}
+            id={props.mobileMenuId}
+            keepMounted
+            transformOrigin={{vertical: 'top', horizontal: 'right'}}
+            open={props.isMobileMenuOpen}
+            onClose={props.handleMobileMenuClose}>
+            <MenuItem onClick={props.authBtnHandler} style={{padding: "0 0.7rem 0 0"}}>
+                <Grid container alignItems="center">
+                    <Grid item>
+                        <IconButton aria-label="account of current user"
+                                    aria-controls="primary-search-account-menu"
+                                    aria-haspopup="true"
+                                    color="inherit">
+                            {props.authIcon}
+                        </IconButton>
+                    </Grid>
+                    <Grid item>
+                        <p>{props.authLabel}</p>
+                    </Grid>
+                </Grid>
+            </MenuItem>
+            <MenuItem onClick={props.bagBtnHandler} style={{padding: "0 0.7rem 0 0"}}>
+                <Grid container alignItems="center">
+                    <Grid item xs={7}>
+                        <IconButton color="inherit">
+                            <BagButton/>
+                        </IconButton>
+                    </Grid>
+                    <Grid item>
+                        <p>Bag</p>
+                    </Grid>
+                </Grid>
+            </MenuItem>
+        </Menu>
+    );
+};

client/src/components/routes/navbar/navBar.js

@@ -2,8 +2,7 @@ import React, {useEffect} from "react";
 
 import SearchIcon from '@material-ui/icons/Search';
 import AccountCircle from '@material-ui/icons/AccountCircle';
-import MenuItem from '@material-ui/core/MenuItem';
-import {Menu, Grid} from '@material-ui/core';
+import {Grid} from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import MoreIcon from '@material-ui/icons/MoreVert';
 import Cookies from 'js-cookie';
@@ -35,23 +34,25 @@ import {TABS_DATA_API} from "../../../constants/api_routes";
 import {TABS_API_OBJECT_LEN} from "../../../constants/constants"
 import Avatar from '@material-ui/core/Avatar';
 import history from "../../../history";
+import MobileMenu from "./mobileMenu";
 
 const NavBar = props => {
     const classes = useNavBarStyles();
 
     const [mobileSearchState, setMobileSearchState] = React.useState(false);
-    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
     const [hamburgerBtnState, setHamburgerBtnState] = React.useState(false);
 
     const {isSignedIn, tokenId, firstName} = useSelector(state => state.signInReducer)
     const googleAuthReducer = useSelector(state => state.googleAuthReducer)
     const tabsAPIData = useSelector(state => state.tabsDataReducer)
 
-    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
     const dispatch = useDispatch()
 
     let authIcon = null
     let authLabel = null
+    const mobileMenuId = 'primary-search-account-menu-mobile';
+    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
+    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
 
     /**
      * set the cart from saved Cookie
@@ -97,7 +98,7 @@ const NavBar = props => {
                             oAuth: auth
                         }
                     })
-                }).catch(function (e) {
+                }).catch(function () {
                     log.error(`[Navbar] Failed to load google OAuth`)
                 })
             });
@@ -173,14 +174,6 @@ const NavBar = props => {
         authLabel = "Sign In"
     }
 
-    const handleMobileMenuClose = () => {
-        setMobileMoreAnchorEl(null);
-    };
-
-    const handleMobileMenuOpen = (event) => {
-        setMobileMoreAnchorEl(event.currentTarget);
-    };
-
     const changeAuthStatusHandler = () => {
         log.info(`[Navbar] handleSignOutClick isSignedIn = ${googleAuthReducer.isSignedInUsingOAuth}`)
         if (googleAuthReducer.isSignedInUsingOAuth) {
@@ -190,7 +183,6 @@ const NavBar = props => {
         } else {
             history.push("/signin")
         }
-
         handleMobileMenuClose();
     }
 
@@ -199,66 +191,34 @@ const NavBar = props => {
         setMobileMoreAnchorEl(null);
     }
 
-    const mobileMenuId = 'primary-search-account-menu-mobile';
-    const renderMobileMenu = (
-        <Menu
-            anchorEl={mobileMoreAnchorEl}
-            anchorOrigin={{vertical: 'top', horizontal: 'right'}}
-            id={mobileMenuId}
-            keepMounted
-            transformOrigin={{vertical: 'top', horizontal: 'right'}}
-            open={isMobileMenuOpen}
-            onClose={handleMobileMenuClose}>
-            <MenuItem onClick={changeAuthStatusHandler} style={{padding: "0 0.7rem 0 0"}}>
-                <Grid container alignItems="center">
-                    <Grid item>
-                        <IconButton aria-label="account of current user"
-                                    aria-controls="primary-search-account-menu"
-                                    aria-haspopup="true"
-                                    color="inherit">
-                            {authIcon}
-                        </IconButton>
-                    </Grid>
-                    <Grid item>
-                        <p>{authLabel}</p>
-                    </Grid>
-                </Grid>
-            </MenuItem>
-            <MenuItem onClick={changePageToShoppingBagHandler} style={{padding: "0 0.7rem 0 0"}}>
-                <Grid container alignItems="center">
-                    <Grid item xs={7}>
-                        <IconButton color="inherit">
-                            <BagButton/>
-                        </IconButton>
-                    </Grid>
-                    <Grid item>
-                        <p>Bag</p>
-                    </Grid>
-                </Grid>
-            </MenuItem>
-        </Menu>
-    );
+    const handleMobileMenuClose = () => {
+        setMobileMoreAnchorEl(null);
+    };
+
+    const handleMobileMenuOpen = (event) => {
+        setMobileMoreAnchorEl(event.currentTarget);
+    };
 
     const handleMobileSearchClose = () => {
         setMobileSearchState(false)
     }
 
+    const handleMobileSearchOpen = () => {
+        setMobileSearchState(true)
+    }
+
     const renderMobileSearchInputField = () => {
         if (mobileSearchState) {
             return <SearchBar size="medium" handleClose={handleMobileSearchClose}/>
         }
     }
 
-    const handleMobileSearchOpen = () => {
-        setMobileSearchState(true)
-    }
-
-    const handleHamburgerBtnClick = () => {
+    const handleSidebarOpen = () => {
         log.info(`[NavBar] opening sidebar`)
         setHamburgerBtnState(true)
     }
 
-    const sidebarCloseHandler = () => {
+    const handleSidebarClose = () => {
         log.info(`[NavBar] clickAwayListener is triggered`)
         setHamburgerBtnState(false)
     }
@@ -282,7 +242,7 @@ const NavBar = props => {
     log.info(`[NavBar]: Rendering NavBar Component`)
     return (
         <>
-            <SideBar open={hamburgerBtnState} closeHandler={sidebarCloseHandler}/>
+            <SideBar open={hamburgerBtnState} closeHandler={handleSidebarClose}/>
 
             <div style={{paddingBottom: 80}}>
                 <AppBar color="default" className={classes.appBarRoot}>
@@ -295,7 +255,7 @@ const NavBar = props => {
                                         className={classes.menuButton}
                                         color="inherit"
                                         aria-label="open drawer"
-                                        onClick={handleHamburgerBtnClick}>
+                                        onClick={handleSidebarOpen}>
                                         <MenuIcon fontSize="large"/>
                                     </IconButton>
                                 </Grid>
@@ -335,9 +295,9 @@ const NavBar = props => {
                                 {renderMobileSearchInputField()}
                             </Hidden>
 
-                            <div className={classes.growHalf}/>
-
                             <Hidden xsDown>
+                                <div className={classes.growHalf}/>
+
                                 {renderIndependentElem(changeAuthStatusHandler, authIcon, authLabel,
                                     2)}
 
@@ -348,22 +308,32 @@ const NavBar = props => {
                             </Hidden>
 
 
-                            <div className={classes.sectionMobile}>
-                                <IconButton
-                                    aria-label="show more"
-                                    aria-controls={mobileMenuId}
-                                    aria-haspopup="true"
-                                    onClick={handleMobileMenuOpen}
-                                    color="inherit"
-                                    edge="end">
-                                    <MoreIcon fontSize="large"/>
-                                </IconButton>
-                            </div>
+                            <Hidden smUp>
+                                <Grid item>
+                                    <IconButton
+                                        aria-label="show more"
+                                        aria-controls={mobileMenuId}
+                                        aria-haspopup="true"
+                                        onClick={handleMobileMenuOpen}
+                                        color="inherit"
+                                        edge="end">
+                                        <MoreIcon fontSize="large"/>
+                                    </IconButton>
+                                </Grid>
+                            </Hidden>
                         </Grid>
                     </Toolbar>
                 </AppBar>
 
-                {renderMobileMenu}
+                <MobileMenu mobileMenuId={mobileMenuId}
+                            authIcon={authIcon}
+                            authLabel={authLabel}
+                            authBtnHandler={changeAuthStatusHandler}
+                            bagBtnHandler={changePageToShoppingBagHandler}
+                            mobileMoreAnchorEl={mobileMoreAnchorEl}
+                            isMobileMenuOpen={isMobileMenuOpen}
+                            handleMobileMenuClose={handleMobileMenuClose}
+                />
             </div>
         </>
     );