import React, { useState, useEffect, useContext } from "react"; import AppBar from "@material-ui/core/AppBar"; import Toolbar from "@material-ui/core/Toolbar"; import Typography from "@material-ui/core/Typography"; import CssBaseline from "@material-ui/core/CssBaseline"; import useMediaQuery from "@material-ui/core/useMediaQuery"; import MobileNavigation from "./MobileNavigation"; import useScrollTrigger from "@material-ui/core/useScrollTrigger"; //icons import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; import { connect } from "react-redux"; import { logoutUser } from "../../actions/authActions"; import { Link, useLocation } from "react-router-dom"; import Button from "@material-ui/core/Button"; import { makeStyles } from "@material-ui/core/styles"; import { useTheme } from "@material-ui/styles"; import { createActiveSubject } from "../../actions/subjectActions"; import { Switch } from "@material-ui/core"; import { DarkThemeContext } from "../../providers/DarkThemeProvider"; const useStyles = makeStyles((theme) => ({ toolBar: { ...theme.mixins.toolbar, marginTop: "1rem", [theme.breakpoints.down("sm")]: { marginTop: "-1rem", }, }, AppBar: { display: "flex", justifyContent: "center", padding: 0, margin: 0, height: "5rem", [theme.breakpoints.down("sm")]: { height: "3rem", }, }, Button: { display: "flex", justifyContent: "center", alignItems: "center", height: "5rem", "&:hover": { backgroundColor: "transparent", }, [theme.breakpoints.down("sm")]: { marginTop: 0, height: "3rem", }, }, logo: { fontWeight: 400, fontSize: "2.5em", fontFamily: "Lobster, cursive", color: "white", [theme.breakpoints.down("sm")]: { fontSize: "1.5rem", marginTop: 0, }, }, logout: { marginLeft: "auto", marginRight: "1rem", [theme.breakpoints.down("sm")]: { height: "2rem", }, }, bottomAppBar: { top: "auto", bottom: 0, }, })); function ElevationScroll(props) { const { children } = props; const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0, }); return React.cloneElement(children, { elevation: trigger ? 4 : 0, }); } const AuthHeader = (props) => { const classes = useStyles(props); const { darkMode, setDarkMode } = useContext(DarkThemeContext); const [value, setValue] = useState(0); const theme = useTheme(); const matches = useMediaQuery(theme.breakpoints.down("sm")); const handleChange = (newValues) => { setValue(newValues); }; const location = useLocation(); useEffect(() => { if (location.pathname === "/" && value !== 0) { setValue(0); } else if (location.pathname === "/subject" && value !== 1) { setValue(1); } else if (location.pathname === "/semester" && value !== 2) { setValue(2); } else if (location.pathname === "/about" && value !== 3) { setValue(3); } }, [value, location]); const renderAdminTab = () => { if (!matches && props.isAuthenticated) { return ( <React.Fragment> <Tabs value={value} onChange={handleChange} aria-label="simple tabs example"> <Tab value={0} component={Link} to="/" label="Today" /> <Tab value={1} component={Link} to="/subject" label="Subjects" /> <Tab value={2} component={Link} to="/semester" label="Semester" /> <Tab value={3} component={Link} to="/about" label="About" /> </Tabs> </React.Fragment> ); } }; const renderAdminBottomTab = () => { if (matches && props.isAuthenticated) { return ( <React.Fragment> <MobileNavigation /> </React.Fragment> ); } }; return ( <React.Fragment> <CssBaseline /> <ElevationScroll> <AppBar color="secondary" className={classes.AppBar}> <Toolbar disableGutters> <Button onClick={() => setValue(0)} className={classes.Button} value={0} component={Link} to="/" disableRipple > <Typography variant="h5" className={classes.logo}> BUNK MANAGER </Typography> </Button> {props.tablePage? null: renderAdminTab()} {props.isAuthenticated && <Button onClick={() => props.logoutUser()} className={classes.logout} variant="contained" color="primary"> LOGOUT </Button>} {/* Switch to change the theme */} {/* <Switch color="primary" checked={darkMode} onChange={() => setDarkMode(!darkMode)} /> */} </Toolbar> </AppBar> </ElevationScroll> <div className={classes.toolBar} /> {renderAdminBottomTab()} </React.Fragment> ); }; const mapStateToProps = (state) => { return { isAuthenticated: state.auth.isAuthenticated, tablePage: state.table.isTableOpen } } export default connect(mapStateToProps, { logoutUser, createActiveSubject, })(AuthHeader);