123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257 |
- import {AppBar, Box, Toolbar, IconButton, Typography, Menu, Container, Avatar, Button, Tooltip, MenuItem, Badge} from '@mui/material';
- import MenuIcon from '@mui/icons-material/Menu';
- import SearchIcon from '@mui/icons-material/Search';
- import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
- import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
- import ManageSearchIcon from '@mui/icons-material/ManageSearch';
- import Link from "react-router-dom/es/Link";
- import {useState} from "react";
- import '../scss/Header.scss';
- import {actionAuthLogout} from "../reducers/AuthReducer";
- import {connect} from "react-redux";
- import {actionUserRemove} from "../reducers/UserReducer";
- import {actionFullUserFindOne} from "../actions/ActionUserFind";
- import {backURL} from "../actions/PathDB";
- import userDefault from "../img/header/userDefault.png"
- const pages = ['catalog', 'about us', 'our team', 'faq', 'contact']
- const settingsDefaultUserAuth = ['Profile', 'Logout']
- const Header = ({user={}, createUser}) => {
- if (localStorage.authToken && localStorage.userId && Object.keys(user).length === 0){
- createUser(localStorage.userId)
- }
- const [anchorElNav, setAnchorElNav] = useState(null);
- const [anchorElUser, setAnchorElUser] = useState(null);
- const handleOpenNavMenu = (event) => {
- setAnchorElNav(event.currentTarget);
- };
- const handleOpenUserMenu = (event) => {
- setAnchorElUser(event.currentTarget);
- };
- const handleCloseNavMenu = () => {
- setAnchorElNav(null);
- };
- const handleCloseUserMenu = () => {
- setAnchorElUser(null);
- };
- const LogoItem = () => {
- return (
- <Link to='/' className="Header__Logo"> ABRAXAS </Link>
- )
- }
- const LinkItem = ({page, color='white'}) => {
- return (
- <Button
- key={page}
- onClick={handleCloseNavMenu}
- sx={{ my: 2, color: color, display: 'block'}}
- >
- <Link
- to={`/${Array.from(page.toLowerCase()).map(i => i === ' ' ? '-' : i).join('')}`}
- className="Header__Link"> {page}
- </Link>
- </Button>
- )
- }
- const IconItems = ({cart={}, size="large", color='default', valueWishList=0}) => {
- return (
- <>
- <Link to='/search'>
- <IconButton size={size} aria-label="search" color={color}>
- <SearchIcon />
- </IconButton>
- </Link>
- <Link to='/my-orders'>
- <IconButton size={size} aria-label="my-orders" color={color}>
- <ManageSearchIcon />
- </IconButton>
- </Link>
- <Link to='/wish-list'>
- <IconButton size={size} aria-label="wish-list" color={color}>
- <Badge
- color="success"
- badgeContent={valueWishList}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'right',
- }}
- >
- <FavoriteBorderIcon />
- </Badge>
- </IconButton>
- </Link>
- <Link to='/basket'>
- <IconButton size={size} aria-label="basket" color={color}>
- <Badge
- color="success"
- badgeContent={+Object.entries(cart).reduce((a, b) => {
- return a + b[1].count
- }, 0)}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'right',
- }}
- >
- <ShoppingCartIcon/>
- </Badge>
- </IconButton>
- </Link>
- </>
- )
- }
- const CIconItems = connect(state => ({cart: state.cart}))(IconItems)
- const ItemAuth = ({link, text}) => {
- return (
- <Link style={{textDecoration: 'none', color: '#000'}} to={`/${link}`}>
- <MenuItem key={text} onClick={handleCloseNavMenu}>
- <Typography textAlign="center" color='#fff'>{text}</Typography>
- </MenuItem>
- </Link>
- )
- }
- const UserIcon = ({auth}) => {
- return (
- !localStorage.authToken ?
- <Link style={{textDecoration: 'none'}} to={'/my-account'}>
- <IconButton sx={{ p: 0 }}>
- <Avatar alt="User" src={userDefault} />
- </IconButton>
- </Link> :
- <>
- <Tooltip title="Open settings">
- <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
- {auth.avatar === null ?
- <Avatar alt="User" src={userDefault}/> :
- <Avatar alt="User" src={user?.avatar?.url && backURL + '/' + user?.avatar?.url}/>
- }
- </IconButton>
- </Tooltip>
- <Menu
- sx={{ mt: '55px', ml: '90%'}}
- id="menu-appbar"
- anchorEl={anchorElUser}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- keepMounted
- transformOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- open={Boolean(anchorElUser)}
- onClose={handleCloseUserMenu}
- >
- {settingsDefaultUserAuth.map(item => {
- if (item === 'Logout') {
- return <CButtonLogOut/>
- }
- return <ItemAuth text={item}
- link={Array.from(item.toLowerCase()).map(i => i === ' ' ? '-' : i).join('')}/>
- })}
- </Menu>
- </>
- )
- }
- const CUserIcon = connect(state => ({auth: state.auth}))(UserIcon)
- const ButtonLogOut = ({actionLogOut, actionUserRemove}) => {
- return (
- <Button
- onClick={() => {actionLogOut(); actionUserRemove(); handleCloseNavMenu()}}
- style={{textDecoration: 'none', color: '#fff', textAlign: "center", width: '100%'}}
- >
- Log out
- </Button>
- )
- }
- const CButtonLogOut = connect(null, {actionLogOut: actionAuthLogout, actionUserRemove: actionUserRemove})(ButtonLogOut)
- return (
- <AppBar sx={{padding: '10px 0', backgroundColor: 'rgb(131,179,175)'}} className='Header' position="fixed" enableColorOnDark={true}>
- <Container maxWidth="xl">
- <Toolbar disableGutters>
- <Typography
- variant="h6"
- noWrap
- component="div"
- sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
- >
- <LogoItem/>
- </Typography>
- <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
- <IconButton
- size="large"
- aria-label="account of current user"
- aria-controls="menu-appbar"
- aria-haspopup="true"
- onClick={handleOpenNavMenu}
- color="inherit"
- >
- <MenuIcon />
- </IconButton>
- <Menu className='Header__Burger'
- id="menu-appbar"
- anchorEl={anchorElNav}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'left',
- }}
- keepMounted
- transformOrigin={{
- vertical: 'top',
- horizontal: 'left',
- }}
- open={Boolean(anchorElNav)}
- onClose={handleCloseNavMenu}
- sx={{
- display: { xs: 'block', md: 'none' },
- }}
- >
- {pages.map((page) => (
- <MenuItem key={page} onClick={handleCloseNavMenu}>
- <LinkItem page={page} color={'#fff'}/>
- </MenuItem>
- ))}
- <MenuItem onClick={handleCloseNavMenu}>
- <CIconItems size={'large'} color={'inherit'} />
- </MenuItem>
- </Menu>
- </Box>
- <Typography
- variant="h6"
- noWrap
- component="div"
- sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
- >
- <LogoItem />
- </Typography>
- <Box className='Header__Links' sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
- {pages.map((page) => (
- <LinkItem page={page} color={'#fff'}/>
- ))}
- </Box>
- <Box className='Header__Icons' sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
- <CIconItems size={'large'} />
- </Box>
- <Box sx={{ flexGrow: 0 }}>
- <CUserIcon/>
- </Box>
- </Toolbar>
- </Container>
- </AppBar>
- );
- };
- const CHeader = connect(state => ({user: state.user}), {createUser: actionFullUserFindOne})(Header)
- export default CHeader;
|