{"size": 11772, "ext": "js", "max_stars_repo_path": "src/components/Header/Header.js", "max_stars_repo_name": "musclecar289/v2c-dashboard", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Header/Header.js", "max_issues_repo_name": "musclecar289/v2c-dashboard", "max_issues_repo_issues_event_min_datetime": "2020-09-13T15:30:21.000Z", "max_issues_repo_issues_event_max_datetime": "2020-10-23T19:22:20.000Z", "max_forks_repo_path": "src/components/Header/Header.js", "max_forks_repo_name": "musclecar289/v2c-dashboard", "max_forks_repo_forks_event_min_datetime": "2020-11-15T05:32:22.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-22T03:55:26.000Z"}
{"max_stars_count": null, "max_issues_count": 12, "max_forks_count": 3, "avg_line_length": 36.6728971963, "max_line_length": 78, "alphanum_fraction": 0.4072375127}
import React, { Fragment, useContext } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
// import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
// import MenuIcon from '@material-ui/icons/Menu';
// import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
import { Button, Paper } from '@material-ui/core';
import { Brightness4, Brightness7 } from '@material-ui/icons';

import { ThemeContext } from '../../context/themeContext';
import { AuthContext } from '../../context/authContext';

import logo from '../../assets/images/v2c_logo.png';

const useStyles = makeStyles((theme) => ({
    grow: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    iconButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        fontFamily: 'Inter',
    },
    appBar: {},
    imgContainer: {
        width: '35px',
        height: '35px',
        marginRight: '10px',
        '& > img': {
            width: '100%',
            height: '100%',
        },
    },
    search: {
        position: 'relative',
        borderRadius: theme.shape.borderRadius,
        backgroundColor: fade(theme.palette.common.white, 0.15),
        '&:hover': {
            backgroundColor: fade(theme.palette.common.white, 0.25),
        },
        marginRight: theme.spacing(2),
        marginLeft: 0,
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            marginLeft: theme.spacing(3),
            width: 'auto',
        },
    },
    searchIcon: {
        padding: theme.spacing(0, 2),
        height: '100%',
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    inputRoot: {
        color: 'inherit',
    },
    inputInput: {
        padding: theme.spacing(1, 1, 1, 0),
        // vertical padding + font size from searchIcon
        paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('md')]: {
            width: '20ch',
        },
    },
    sectionDesktop: {
        display: 'none',
        [theme.breakpoints.up('md')]: {
            display: 'flex',
        },
    },
    sectionMobile: {
        display: 'flex',
        [theme.breakpoints.up('md')]: {
            display: 'none',
        },
    },
}));

const Header = (props) => {
    const classes = useStyles();
    const history = useHistory();
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
    const { themeColor, toggleThemeColor } = useContext(ThemeContext);
    const { isAuthenticated } = useContext(AuthContext);

    const isMenuOpen = Boolean(anchorEl);
    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

    const handleProfileMenuOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleMobileMenuClose = () => {
        setMobileMoreAnchorEl(null);
    };

    const handleMenuClose = () => {
        setAnchorEl(null);
        handleMobileMenuClose();
    };

    const handleMobileMenuOpen = (event) => {
        setMobileMoreAnchorEl(event.currentTarget);
    };

    const menuId = 'primary-search-account-menu';
    const renderMenu = (
        <Menu
            anchorEl={anchorEl}
            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
            id={menuId}
            keepMounted
            transformOrigin={{ vertical: 'top', horizontal: 'right' }}
            open={isMenuOpen}
            onClose={handleMenuClose}
        >
            <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
            <MenuItem
                onClick={() => {
                    handleMenuClose();
                    history.push('/dashboard');
                }}
            >
                Dashboard
            </MenuItem>
        </Menu>
    );

    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>
                <IconButton aria-label="show 4 new mails" color="inherit">
                    <Badge badgeContent={4} color="secondary">
                        <MailIcon />
                    </Badge>
                </IconButton>
                <p>Messages</p>
            </MenuItem>
            <MenuItem>
                <IconButton
                    aria-label="show 11 new notifications"
                    color="inherit"
                >
                    <Badge badgeContent={11} color="secondary">
                        <NotificationsIcon />
                    </Badge>
                </IconButton>
                <p>Notifications</p>
            </MenuItem>
            <MenuItem onClick={handleProfileMenuOpen}>
                <IconButton
                    aria-label="account of current user"
                    aria-controls="primary-search-account-menu"
                    aria-haspopup="true"
                    color="inherit"
                >
                    <AccountCircle />
                </IconButton>
                <p>Profile</p>
            </MenuItem>
        </Menu>
    );

    return (
        <header>
            <Paper elevation={0} square className={classes.appBar}>
                <AppBar position="fixed">
                    <Toolbar>
                        {/*                         {isAuthenticated && (
                            <IconButton
                                edge="start"
                                className={classes.menuButton}
                                color="inherit"
                                aria-label="open drawer"
                            >
                                <MenuIcon />
                            </IconButton>
                        )} */}
                        <Link
                            to="/"
                            style={{
                                color: 'inherit',
                                display: 'flex',
                                alignItems: 'flex-end',
                            }}
                        >
                            <div className={classes.imgContainer}>
                                <img src={logo} alt="v2c logo" />
                            </div>
                            <Typography
                                className={classes.title}
                                variant="h6"
                                noWrap
                            >
                                V2C
                            </Typography>
                        </Link>
                        {/* <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
            />
          </div> */}
                        <div className={classes.grow} />

                        <IconButton
                            color="inherit"
                            onClick={() => toggleThemeColor()}
                            className={classes.iconButton}
                        >
                            {themeColor === 'light' ? (
                                <Brightness4 />
                            ) : (
                                <Brightness7 />
                            )}
                        </IconButton>
                        {!isAuthenticated && (
                            <Link to="/login">
                                <Button variant="contained" color="secondary">
                                    Sign in
                                </Button>
                            </Link>
                        )}
                        {isAuthenticated && (
                            <Fragment>
                                <div className={classes.sectionDesktop}>
                                    <IconButton
                                        aria-label="show 4 new mails"
                                        color="inherit"
                                    >
                                        <Badge
                                            badgeContent={4}
                                            color="secondary"
                                        >
                                            <MailIcon />
                                        </Badge>
                                    </IconButton>
                                    <IconButton
                                        aria-label="show 17 new notifications"
                                        color="inherit"
                                    >
                                        <Badge
                                            badgeContent={17}
                                            color="secondary"
                                        >
                                            <NotificationsIcon />
                                        </Badge>
                                    </IconButton>
                                    <IconButton
                                        edge="end"
                                        aria-label="account of current user"
                                        aria-controls={menuId}
                                        aria-haspopup="true"
                                        onClick={handleProfileMenuOpen}
                                        color="inherit"
                                    >
                                        <AccountCircle />
                                    </IconButton>
                                </div>
                                <div className={classes.sectionMobile}>
                                    <IconButton
                                        aria-label="show more"
                                        aria-controls={mobileMenuId}
                                        aria-haspopup="true"
                                        onClick={handleMobileMenuOpen}
                                        color="inherit"
                                    >
                                        <MoreIcon />
                                    </IconButton>
                                </div>
                            </Fragment>
                        )}
                    </Toolbar>
                </AppBar>
            </Paper>
            {isAuthenticated && renderMobileMenu}
            {isAuthenticated && renderMenu}
        </header>
    );
};

export default Header;
