Notes

import React, { Fragment, useContext, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useMsal } from "@azure/msal-react";
import { callMsGraph } from "./../../graph";
import { loginRequest } from "./../../authConfig";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import MenuIcon from "@mui/icons-material/Menu";
import Container from "@mui/material/Container";
import Avatar from "@mui/material/Avatar";
import MenuItem from "@mui/material/MenuItem";
import JSI from "../../images/JSI.png";
import logOut from "../../images/LogOut.svg";
import LoginIcon from "@mui/icons-material/Login";
import LogoutIcon from "@mui/icons-material/Logout";
import personIcon from "../../images/person_outline.svg";
import HelpIcon from "../../images/help_outline.svg";
import AddIcon from "../../images/add.svg";
import NotificationsIcon from "@mui/icons-material/Notifications";
import { Link } from "react-router-dom";
import MainMenu from "./MainMenu";
import AuthContext from "../../context/auth/AuthContext";
const msal = require("@azure/msal-browser");
const pages = ["Notifications", "Logout"];
interface UserInfo {
userPrincipalName: string;
}

function NavBar(props: { isAuthenticated: boolean }) {
const authContext = useContext(AuthContext);
const { setAuthStatus, setAuthUser, isAuthenticated } = authContext;
const navigate = useNavigate();
const { instance, accounts } = useMsal();
const [graphData, setGraphData] = useState<UserInfo | null>(null);

function RequestProfileData() {
// Silently acquires an access token which is then attached to a request for MS Graph data
instance
.acquireTokenSilent({
...loginRequest,
account: accounts[0],
})
.then((response) => {
callMsGraph(response.accessToken).then((response1) => {
setGraphData(response1);
console.log("GRAPH DATA:", response1);
if (response1?.userPrincipalName && setAuthStatus) {
setAuthStatus(true, response1.userPrincipalName);
}
// getUserRoles(response.accessToken, response1.userPrincipalName).then(
// (response2) => {
// console.log("GRAPH ROLE DATA:", response2);
// }
// );
});
})
.catch((error) => {
if (error instanceof msal.InteractionRequiredAuthError) {
// fallback to interaction when silent call fails
return instance.acquireTokenRedirect(loginRequest);
} else {
console.log("GRAPH DATA error:", error);
}
});
}
// const authContext = useContext<IAuthContext>(AuthContext);
// let { user } = authContext;
const anchorRef = React.useRef<HTMLButtonElement>(null);
const [displayMenu, setDisplayMenu] = React.useState(false);
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
null
);

const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
console.log("Open Main Menu?");
setAnchorElNav(event.currentTarget);
setDisplayMenu(true);
};

const handleCloseNavMenu = () => {
setAnchorElNav(null);
};

const handleLogout = async () => {
// await signOut();
instance.logoutRedirect({
postLogoutRedirectUri: "/",
});
};
const handleLogin = async () => {
instance.loginRedirect(loginRequest).catch((e) => {
console.log("LOGIN Error", e);
});
};

const handleMenuClose = () => {
setDisplayMenu(false);
//generate Token
};

const openMainMenu = () => {
console.log("Clik Open Main menu1");
if (isAuthenticated) setDisplayMenu((old) => !old);
//generate Token
};

useEffect(() => {
RequestProfileData();
}, []);

return (
<AppBar position='static'>
<Container maxWidth='xl'>
<Toolbar disableGutters>
<IconButton
ref={anchorRef}
className='nav-bar__logo__img'
sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}
onClick={openMainMenu}
>
<Box
sx={{
mr: 2,
display: { xs: "none", md: "flex" },
}}
>
{" "}
<MenuIcon
sx={{
mr: 2,
color: "white",
}}
/>
</Box>
<Link id='HomeLink' to='/'>
<img src={JSI} alt='Logo' />{" "}
</Link>
</IconButton>

<Typography
variant='h6'
noWrap
component='a'
sx={{
mr: 2,
display: { xs: "none", md: "flex" },
flexGrow: 1,
fontWeight: 700,
color: "inherit",
textDecoration: "none",
}}
>
TRACK NOW
</Typography>

<IconButton sx={{ display: { xs: "flex", md: "none" }, mr: 1, p: 0 }}>
<Box
sx={{
mr: 2,
display: { xs: "flex", md: "none" },
}}
>
{" "}
<MenuIcon
sx={{
mr: 2,
color: "white",
}}
/>
</Box>
<Link id='mbHomeLink' to='/'>
<Avatar alt='Logo' src={JSI} />
</Link>
</IconButton>

{/* <Button> */}
<Box
sx={{
mr: 2,
display: { xs: "flex", md: "none" },
flexGrow: 1,
}}
>
<Link id='Home' to='/'>
<Typography
variant='h6'
noWrap
component='a'
sx={{
fontWeight: 700,
color: "white",
textDecoration: "none",
}}
>
TRACK NOW
</Typography>
</Link>
</Box>
{/* </Button> */}

<Box sx={{ flexGrow: 0, p: 0, ml: 2 }}></Box>
{isAuthenticated ? (
<Fragment>
<Box
sx={{
flexGrow: 0,
p: 0,
ml: 2,
display: { xs: "none", md: "flex" },
}}
>
<MenuItem className='nav-bar__menu__item nav-bar__menu__group'>
<div>
<img
src={personIcon}
alt='user'
className='nav-bar__menu__icon'
/>
</div>
<div>
{graphData && graphData.userPrincipalName
? graphData.userPrincipalName
: "username"}
<div className='nav-bar__menu__dropdown2__toggle__sub-title'>
{/* {user?.role} */}
</div>
</div>
</MenuItem>
</Box>
<Box sx={{ display: { xs: "none", md: "flex" }, p: 0, my: 1 }}>
<MenuItem>
<NotificationsIcon />
</MenuItem>
</Box>
</Fragment>
) : (
<div className='nav-bar__popover'>
<h5 className='nav-bar__menu__text__title'>
Please login to access TrackNow application
</h5>
{/* <h5 className="nav-bar__menu__text__desc">
If you need access to the applications, please{" "}
<a href="#">contact us</a>
</h5> */}
</div>
)}
<Box
sx={{
display: { xs: "none", md: "flex" },
flexGrow: 0,
p: 0,
ml: 2,
}}
>
{isAuthenticated ? (
<MenuItem onClick={handleLogout}>
<LogoutIcon />
</MenuItem>
) : (
<MenuItem onClick={handleLogin}>
<LoginIcon />
</MenuItem>
)}
</Box>
<Box sx={{ 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> */}
<IconButton
size='large'
aria-label='account of current user'
aria-controls='menu-appbar'
aria-haspopup='true'
onClick={handleOpenNavMenu}
color='inherit'
>
<MenuItem className='nav-bar__menu__item nav-bar__menu__group'>
<div>
<img
src={personIcon}
alt='user'
className='nav-bar__menu__icon'
/>
</div>
<div>
<div>
{" "}
{graphData && graphData.userPrincipalName
? graphData.userPrincipalName
: ""}
</div>
<div className='nav-bar__menu__dropdown2__toggle__sub-title'>
{/* {user?.role} */}
</div>
</div>
</MenuItem>
</IconButton>
<Menu
id='menu-appbar'
anchorEl={anchorElNav}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: "block", md: "none" },
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign='center'>{page}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
<MainMenu
show={displayMenu}
handleClose={handleMenuClose}
anchRef={anchorRef}
handleLogout={handleLogout}
/>
</Container>
</AppBar>
);
}
export default NavBar;