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>
  </>
  );