joyfulManiak

Untitled

Dec 4th, 2020
797
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * @module  components/MobileHamburgerMenu
  3.  * @author  jedelson
  4.  * @description Navbar component that can be used in any top-level component
  5.  */
  6.  
  7. // dependencies
  8. import React, { useState } from 'react'
  9. import PropTypes from 'prop-types'
  10. import { connect } from 'react-redux'
  11. import { useHistory } from 'react-router-dom'
  12. import { useLocation } from 'react-router-dom'
  13. import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  14.  
  15. // components
  16. import Nametag from '../../ui-templates/Nametag/Nametag'
  17.  
  18. // styles / assets
  19. import { StyledMobileHamburgerMenu, StyledMobilePanel, StyledLink, StyledLogoutLink } from './MobileHamburgerMenu.styled'
  20.  
  21. // utils
  22. import { isCreator } from '../../../utils/accountTypes'
  23. import { urls } from '../../../utils/enums'
  24. import { invalidateSession } from '../../../actions/accountActions'
  25.  
  26. const mapStateToProps = (store) => ({
  27.     username: store.account.username,
  28.     profilePhoto: store.account.profilePhoto,
  29.     accountType: store.account.accountType,
  30.     name: store.account.name
  31. })
  32.  
  33. const mapDispatchToProps = (dispatch) => ({
  34.   handleLogout: () => dispatch(invalidateSession()),
  35. })
  36.  
  37. const MobileHamburgerMenu = (props) => {
  38.     const { username, profilePhoto, name, handleLogout, accountType } = props
  39.     const [isToggled, setToggle] = useState(false)
  40.  
  41.     const location = useLocation()
  42.     const history = useHistory()
  43.  
  44.     const onClick = () => {
  45.       setToggle(!isToggled)
  46.       document.body.style.overflow = "hidden"
  47.     }
  48.  
  49.     const closeClick = () => {
  50.         setToggle(!isToggled)
  51.         document.body.style.overflow = "auto"
  52.     }
  53.  
  54.     const logout = () => {
  55.       handleLogout()
  56.       history.push(urls.DISCOVER)
  57.     }
  58.  
  59.     const menuClick = (url) => {
  60.       history.push(url)
  61.       setToggle(!isToggled)
  62.       document.body.style.overflow = "auto"
  63.     }
  64.  
  65.   return (
  66.     <StyledMobileHamburgerMenu>
  67.         <div className="hamburger" onClick={onClick}>
  68.             <FontAwesomeIcon icon={['fal', 'bars']} />
  69.         </div>
  70.         <StyledMobilePanel $isToggled={isToggled}>
  71.             <div className="close" onClick={closeClick}>
  72.                 <FontAwesomeIcon icon={['fal', 'times']} />
  73.             </div>
  74.            
  75.             <div className="nametag">
  76.                 <Nametag
  77.                     linkTo={isCreator(accountType) ? `${urls.CREATOR_PROFILE}/${username}` : null}
  78.                     profilePhoto={profilePhoto}
  79.                     name={name}
  80.                     photoSize="medium-alt"
  81.                     nameSize="xlarge"
  82.                     nameWeight="bold"
  83.                     direction="column"
  84.                     altText={name}
  85.                 />
  86.             </div>
  87.  
  88.             {isCreator(accountType) && (
  89.               <StyledLink to={isCreator(accountType) ? `${urls.CREATOR_PROFILE}/${username}` : null} $isCurrent={location.pathname === urls.CREATOR_PROFILE}>
  90.                 Profile
  91.               </StyledLink>
  92.             )}
  93.  
  94.             <StyledLink onClick={menuClick(urls.SETTINGS)} $isCurrent={location.pathname === urls.SETTINGS}>
  95.               Settings
  96.             </StyledLink>
  97.  
  98.             <hr />
  99.  
  100.             <StyledLink to={urls.CREATOR_PROFILE} $isCurrent={location.pathname === urls.CREATOR_PROFILE}>
  101.               Roadmap
  102.             </StyledLink>
  103.  
  104.             {isCreator(accountType) && (
  105.               <StyledLink to={urls.CREATOR_PROFILE} $isCurrent={location.pathname === urls.CREATOR_PROFILE}>
  106.                 Creator Tips
  107.               </StyledLink>
  108.             )}
  109.  
  110.             <StyledLink to={urls.CREATOR_PROFILE} $isCurrent={location.pathname === urls.CREATOR_PROFILE}>
  111.               Help Center
  112.             </StyledLink>
  113.  
  114.             <hr />
  115.            
  116.             <StyledLogoutLink onClick={logout}>
  117.               Log out
  118.             </StyledLogoutLink>
  119.            
  120.         </StyledMobilePanel>
  121.         {isToggled && <div className="overlay" onClick={closeClick}></div>}
  122.     </StyledMobileHamburgerMenu>
  123.   )
  124. }
  125.  
  126. MobileHamburgerMenu.propTypes = {
  127.     username: PropTypes.string.isRequired,
  128.     profilePhoto: PropTypes.string,
  129.     name: PropTypes.string.isRequired,
  130.     handleLogout: PropTypes.func,
  131.   }
  132.  
  133.   export default connect(mapStateToProps, mapDispatchToProps)(MobileHamburgerMenu)
  134.  
RAW Paste Data