Refactor navbar.js<\/h4>\n\n\n\n
We’ll start by adding a NavWrapper around the Nav component:<\/p>\n\n\n
\n\/\/ frontend\/src\/components\/navbar.js\n\nimport { Link } from "gatsby"\nimport React from "react"\nimport styled from "styled-components"\nimport { isLoggedIn, logout } from "..\/services\/auth"\nimport onClickOutside from "react-onclickoutside";\n\nconst NavWrapper = styled.div`\n background-color: transparent;\n border-top: 5px solid #59338f;\n border-left: 2px solid #59338f;\n border-bottom: 5px solid #59338f;\n`\n\nconst Nav = styled.nav`\n a {\n color: #000000 !important;\n }\n\n ul {\n li {\n padding: 0.5rem 1.5rem 0.2rem 0.5rem;\n border-bottom: 1px solid gray;\n text-align: left;\n }\n li:last-child {\n border-bottom: none;\n }\n }\n`\nexport const Navbar = (props) => {\n const { closeMenu } = props;\n Navbar.handleClickOutside = () => closeMenu();\n const handleLogout = () => {\n logout();\n closeMenu();\n };\n\n return(\n <NavWrapper>\n <Nav>\n <ul>\n <li><Link to="\/">Home<\/Link><\/li>\n {isLoggedIn() ? <li><Link to="\/app\/profile">Profile<\/Link><\/li> : ''}\n {!isLoggedIn() ? <li><Link to="\/app\/login">Login<\/Link><\/li> : ''}\n {isLoggedIn() ? <li><Link to="#" onClick={handleLogout}>Logout<\/Link><\/li> : ''}\n <\/ul>\n <\/Nav>\n <\/NavWrapper>\n )\n}\n\nconst clickOutsideConfig = {\n handleClickOutside: () => Navbar.handleClickOutside\n};\n\nexport default onClickOutside(Navbar, clickOutsideConfig);\n<\/pre><\/div>\n\n\nThe NavWrapper is going to allow us to slide the menu in and out and we’ve refactored the Nav component to style the menu’s unordered list.<\/p>\n\n\n\n
Walk through of navbar.js updates<\/h5>\n\n\n\n
Line 7)<\/strong> We are importing a new node module called react-onclickoutside<\/a><\/code>. Quoting from this modules docs:<\/p>\n\n\n\nThis is a React Higher Order Component (HOC) that you can use with your own React components if you want to have them listen for clicks that occur somewhere in the document, outside of the element itself (for instance, if you need to hide a menu when people click anywhere else on your page).<\/p>react-onclickoutside<\/a><\/cite><\/blockquote>\n\n\n\nBut before we can import the react-onclickoutside<\/a> module we need to install it.<\/p>\n\n\n\nnpm install react-onclickoutside --save\n<\/pre><\/div>\n\n\nNow when the user clicks anywhere outside the the navbar.js component the click event will be registered with the header.js component, (more on that later), and close the flyout menu.<\/p>\n\n\n\n
Lines 9-30)<\/strong> Here we are restyling the menu as an unordered list.<\/p>\n\n\n\nLines 32-38)<\/strong> <\/p>\n\n\n\n- We added the props<\/strong> argument for the Navbar.js<\/strong> component which will destructure a reference to the closeMenu<\/strong> handler, (in parent component header.js<\/strong>), listening for a click event outside Navbar.js<\/strong> which we will use to close the menu.<\/li>
- handleLogout<\/strong> will handle logging out of the app as well as closing the menu on logout.<\/li><\/ul>\n\n\n\n
Lines 45-47)<\/strong> Adding inline javascript logic testing for the isLoggedIn state which determines which link is displayed when. In line 44 we added an onClick event handler referencing the handleLogout<\/strong> function.<\/p>\n\n\n\nLines 54-58)<\/strong> We configure and integrate the react-onclickoutside component<\/strong> with our navbar.js component<\/strong>.<\/p>\n\n\n\nNow we can move on to refactoring the header.js<\/strong> component.<\/p>\n\n\n\nRefactor header.js<\/h4>\n\n\n\n
In the header.js file we will:<\/p>\n\n\n\n
- Import useState to allow us to track the current state of the slide menu<\/li>
- Import React Icons<\/li>
- Add a hamburger icon for hide\/showing the menu links with the component name MenuHandle<\/li>
- Create styled components:
- MenuHandle<\/li>
- MenuWrapper<\/li>
- Refactor HeaderWrapper<\/li><\/ul><\/li><\/ul>\n\n\n
\n\/\/ frontend\/src\/components\/header.js\n\nimport { Link } from "gatsby"\nimport PropTypes from "prop-types"\nimport React, { useState } from "react"\nimport { useStaticQuery, graphql } from "gatsby"\nimport styled from "styled-components"\nimport Navbar from ".\/navbar"\n\n\/\/ Import hamburger icon from react-icon library\nimport { MdMenu } from "react-icons\/md"\n\n\/\/ Component to wrap the hamburger icon for open\/closing menu\nconst MenuHandle = styled.div`\n position: absolute;\n right: 2.0rem;\n top: 1.0rem;\n z-index: 10;\n margin-bottom: 1.0rem;\n width: 30px;\n height: 30px;\n font-size: 3.0rem;\n cursor: pointer;\n`\n\n\/\/ Component wrapping the menu\nconst MenuWrapper = styled.div`\n background-color: white;\n position: absolute;\n z-index: 5;\n top: 70px;\n\n \/\/ Depending on the state of the menu, (open\/close), slide the menu in or out\n right: ${(props) => (props.menuIsOpen ? '0' : '-14rem')};\n\n \/\/ Define the transition between the open\/close states of the menu\n transition: ${(props) => props.menuIsOpen ? 'all 1.00s ease-out' : 'all 0.6s ease-out'};\n`\n\n\/\/ Refactor the HeaderWrapper by removing display flex\nconst HeaderWrapper = styled.div`\n position: relative;\n padding: 1.0rem 2.0rem;\n width: 100%;\n background-color: #9c5ea9;\n a {\n color: #ffffff;\n text-decoration: none;\n }\n`\nconst SiteTitle = styled.div`\n font-family: Arial, Helvetica, sans-serif;\n`\nconst HeaderH1 = styled.div`\n font-size: 2.5rem;\n line-height: 2.6rem;\n`\n\nexport const PureHeader = ({ data }) => {\n \/\/ Use state to track open\/close status of the menu\n const [menuIsOpen, setMenuIsOpen] = useState(false);\n\n \/\/ Handle click event to toggle state of the menu\n let handleMenuClick = () => {\n setMenuIsOpen(!menuIsOpen)\n }\n return (\n <HeaderWrapper>\n\n {\/* Hamburger icon with event listener *\/}\n <MenuHandle onClick={() => handleMenuClick()}><MdMenu \/><\/MenuHandle>\n\n {\/* Pass menu state into MenuWrapper component *\/}\n <MenuWrapper menuIsOpen={menuIsOpen}>\n <Navbar \/>\n <\/MenuWrapper>\n\n <SiteTitle>\n <HeaderH1>\n <Link\n to="\/"\n \n >\n {data.site.siteMetadata.title}\n <\/Link>\n <\/HeaderH1>\n\n <\/SiteTitle>\n <\/HeaderWrapper>\n )\n \n}\n\nexport const Header = props => {\n const data = useStaticQuery(graphql`\n query {\n site {\n siteMetadata {\n title\n }\n }\n }\n `)\n\n return <PureHeader {...props} data={data}><\/PureHeader>\n}\n\nHeader.propTypes = {\n siteTitle: PropTypes.string,\n}\n\nHeader.defaultProps = {\n siteTitle: ``,\n}\n\nexport default Header\n<\/pre><\/div>\n\n\nWalk through refactoring of header.js<\/h5>\n\n\n\n
We are going to need graphic icons as we go along for the app including the hamburger icon which we can use now for control of the mobile menu. For icons we install the React Icons<\/a> library.<\/p>\n\n\n\ncd frontend\nnpm install react-icons --save\n<\/pre><\/div>\n\n\nLine 5)<\/strong> We refactored our React import to include react’s useState hook<\/a>. This hook allows us to track the current open\/close states of the mobile menu.<\/p>\n\n\n\nLine 11)<\/strong> Import the MdMenu<\/strong> from react-icons<\/strong>.<\/p>\n\n\n\nLines 14-50)<\/strong> Using style-components to make the mobile menu look pretty.<\/p>\n\n\n\nLines 34-38)<\/strong> Since we are using styled-components<\/strong> we can access the props argument listening for the the open\/close states of the mobile menu and define the style accordingly.<\/p>\n\n\n\nLine 61)<\/strong> Define and intialize the menuIsOpen<\/strong> state to false.<\/p>\n\n\n\nLines 64-66)<\/strong> Handle the menu click event by toggling the menuIsOpen<\/strong> state with the not operator.<\/p>\n\n\n\nLine 71)<\/strong> We add the MenuHandle component with its onClick listener and handleMenuClick handler<\/p>\n\n\n\nWith the refactoring of navbar.js<\/strong> and header.js<\/strong> complete we need to rebuild the front end container:<\/p>\n\n\n\ndocker-compose build frontend\n<\/pre><\/div>\n\n\nOnce the build is complete we can boot up the app and test the new mobile menu.<\/p>\n\n\n
\nmake dev\n\n# or \ndocker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d\n<\/pre><\/div>\n\n\nNote of warning. Sometimes after a rebuild the Django server will try to connect to the postgres database before postgres is ready to accept connections causing the Django server to crash. A work-around to fix this issue is to boot postgres first, Django server second and finally the frontend.<\/p>\n\n\n
\ndocker-compose up -d database\ndocker-compose up -d server\nmake dev\n<\/pre><\/div>\n\n\nNow we should be able to test the new menu by hitting http:\/\/localhost:8000 where by clicking on the menu hamburger icon the menu opens and closes. Also on when a menu link is clicked the menu should close.<\/p>\n\n\n\n![\"\"](\"http:\/\/10.0.0.14:5557\/wp-content\/uploads\/2021\/09\/chap_14_mobile_menu.jpg\")
<\/figure>\n\n\n\nWhat’s next? We need to add an additional testing utility called Enzyme<\/a> that will allows us to use shallow testing on HOC components. You see, if we were to run our frontend unit tests now, the tests would fail since we implemented react-onclickoutside<\/a> which is a Higher-Order Component and consequently our frontend tests fail now. But fear not, the Enzyme<\/a> testing utility will allows us to work around this issue.<\/p>\n\n\n\n