Create header for Admin pages

Fix #118

Author: AdhamHaisami

client/src/component/AdminHeader/NavMobile.js

@@ -0,0 +1,103 @@
+import React, { useContext, useState } from 'react';
+
+import Axios from 'axios';
+
+import Alert from '@material-ui/lab/Alert';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+import { useHistory } from 'react-router-dom';
+
+import { userContext } from '../../utils/userProvider';
+
+import useStyles from './style';
+
+function NavMobile() {
+  const classes = useStyles();
+  const history = useHistory();
+  const [, setRole] = useContext(userContext);
+  const [error, setError] = useState();
+  const [openSnack, setOpenSnack] = useState(false);
+
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setOpenSnack(false);
+  };
+
+  const handleMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClick = (pageURL) => {
+    history.push(pageURL);
+    setAnchorEl(null);
+  };
+  const logOutClick = async () => {
+    try {
+      await Axios.post('api/v1/logout');
+      setRole('guest');
+      setOpenSnack(true);
+      history.push('/');
+    } catch (err) {
+      setError(
+        err.response ? err.response.data.message : 'Internal Server Error'
+      );
+    }
+  };
+
+  return (
+    <div>
+      <IconButton
+        edge="start"
+        className={classes.menuButton}
+        color="secondary"
+        aria-label="menu"
+        onClick={handleMenu}
+      >
+        <MenuIcon />
+      </IconButton>
+      <Menu
+        id="menu-appbar"
+        classes={{ paper: classes.menuPaper }}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        open={open}
+        onClose={() => setAnchorEl(null)}
+      >
+        <MenuItem onClick={() => handleMenuClick('/')}>Services</MenuItem>
+        <MenuItem onClick={() => handleMenuClick('/')}>Products</MenuItem>
+        <MenuItem onClick={() => handleMenuClick('/')}>Blogs</MenuItem>
+        <MenuItem
+          classes={{ root: 'logoutMobile' }}
+          className={classes.logoutMobile}
+          onClick={() => logOutClick()}
+        >
+          Logout
+        </MenuItem>
+      </Menu>
+      <Snackbar open={openSnack} autoHideDuration={8000} onClose={handleClose}>
+        <Alert onClose={handleClose} severity={error ? 'error' : 'success'}>
+          {error || 'LogOut Successfully!'}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
+}
+
+export default NavMobile;

client/src/component/AdminHeader/index.js

@@ -0,0 +1,125 @@
+import React, { useState, useContext } from 'react';
+import Axios from 'axios';
+
+import { Link, useHistory } from 'react-router-dom';
+import Alert from '@material-ui/lab/Alert';
+import Snackbar from '@material-ui/core/Snackbar';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { useTheme } from '@material-ui/core/styles';
+
+import ButtonComponent from '../Button';
+
+import { userContext } from '../../utils/userProvider';
+
+import NavMobile from './NavMobile';
+import useStyles from './style';
+
+const HeaderForAdmin = () => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
+  const history = useHistory();
+  const [, setRole] = useContext(userContext);
+  const [error, setError] = useState();
+  const [open, setOpen] = useState(false);
+
+  const handleMenuClick = (pageURL) => {
+    history.push(pageURL);
+  };
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setOpen(false);
+  };
+  const logOutClick = async () => {
+    try {
+      await Axios.post('api/v1/logout');
+      setRole('guest');
+      setOpen(true);
+      history.push('/');
+    } catch (err) {
+      setError(
+        err.response ? err.response.data.message : 'Internal Server Error'
+      );
+    }
+  };
+
+  return (
+    <div>
+      <AppBar position="static" color="transparent">
+        <Toolbar>
+          <div className={classes.header}>
+            <div className={classes.headerLeftSide}>
+              {isMobile ? (
+                <NavMobile />
+              ) : (
+                <div>
+                  <Link className={classes.options} to="/">
+                    Services
+                  </Link>
+                  <Link className={classes.options} to="/">
+                    Products
+                  </Link>
+                  <Link className={classes.options} to="/">
+                    Blogs
+                  </Link>
+                </div>
+              )}
+            </div>
+            <Link className={classes.title} to="/">
+              Beauty
+            </Link>
+
+            <div className={classes.headerRightSide}>
+              {!isMobile && (
+                <>
+                  <IconButton
+                    className={classes.icons}
+                    aria-label="account of current user"
+                    aria-controls="menu-appbar"
+                    aria-haspopup="true"
+                    color="secondary"
+                    onClick={() => handleMenuClick()}
+                  >
+                    <AccountCircle />
+                  </IconButton>
+                  <ButtonComponent
+                    className={classes.logout}
+                    variant="outlined"
+                    onClick={() => logOutClick()}
+                  >
+                    Logout
+                  </ButtonComponent>
+                </>
+              )}
+              {isMobile && (
+                <IconButton
+                  className={classes.icons}
+                  aria-label="account of current user"
+                  aria-controls="menu-appbar"
+                  aria-haspopup="true"
+                  color="secondary"
+                  onClick={() => handleMenuClick()}
+                >
+                  <AccountCircle />
+                </IconButton>
+              )}
+            </div>
+          </div>
+          <Snackbar open={open} autoHideDuration={8000} onClose={handleClose}>
+            <Alert onClose={handleClose} severity={error ? 'error' : 'success'}>
+              {error || 'LogOut Successfully!'}
+            </Alert>
+          </Snackbar>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+};
+
+export default HeaderForAdmin;

client/src/component/AdminHeader/style.js

@@ -0,0 +1,69 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+    [theme.breakpoints.up('sm')]: {
+      marginTop: '5px',
+    },
+  },
+  header: {
+    [theme.breakpoints.up('sm')]: {
+      flexGrow: 1,
+    },
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    width: '100%',
+  },
+  title: {
+    display: 'block',
+    fontSize: '2em',
+    color: '#fff',
+    textDecoration: 'none',
+    fontWeight: 'bold',
+    '&:hover': {
+      color: 'f8f8ff',
+      transform: 'scale(1.1)',
+      boxShadow: '#888888',
+    },
+    '&::first-letter': {
+      fontSize: '130%',
+      color: theme.palette.primary.main,
+    },
+  },
+  headerLeftSide: {
+    justifyContent: 'space-between',
+  },
+
+  options: {
+    padding: '1em',
+    color: '#fff',
+    textDecoration: 'none',
+    borderRadius: '1.5em',
+    '&:hover': {
+      background: '#101010',
+    },
+  },
+  menuPaper: {
+    backgroundColor: '#0e1717',
+  },
+  signup: {
+    marginLeft: '1em',
+    color: '#fff',
+    '&:hover': {
+      color: 'f8f8ff',
+      transform: 'scale(1.1)',
+      boxShadow: '#888888',
+    },
+  },
+  logout: {
+    marginLeft: '1em',
+  },
+  logoutMobile: {
+    backgroundColor: 'red',
+  },
+}));
+
+export default useStyles;

client/src/component/index.js

@@ -10,6 +10,7 @@ import ServiceCardForHomePage from './seviceCardHomePage';
 import SelectInput from './Select';
 import BlogsCard from './BlogCard';
 import BlogsCardForBlogs from './BlogCardForBlogs';
+import HeaderForAdmin from './AdminHeader';
 
 export {
   InputDate,
@@ -24,4 +25,5 @@ export {
   SelectInput,
   BlogsCard,
   BlogsCardForBlogs,
+  HeaderForAdmin,
 };