Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 36x 15x 15x 15x 15x 36x 3x 3x 1x 2x | import React, {useEffect} from "react";
import {NavLink} from "react-router-dom";
import {
AppBar,
Box,
Toolbar,
Typography,
Button,
} from "@mui/material";
import GitHubIcon from '@mui/icons-material/GitHub';
import PersonIcon from '@mui/icons-material/Person';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import LoginIcon from '@mui/icons-material/Login';
import LogoutIcon from '@mui/icons-material/Logout';
import FastForwardIcon from '@mui/icons-material/FastForward';
import AuthService from "./auth/AuthService";
import axios from "axios";
import authHeader from "./auth/authHeader";
import LoginDialog from "./widgets/LoginDialog";
import RegisterDialog from "./widgets/RegisterDialog";
import {User} from "./widgets/Profile";
type Props = {
currentUser?: User,
onUserChange: () => void,
section: string
}
// TODO: this navbar also handles logic for expiring logins... that is not very clean
export default function NavBar(props: Props) {
useEffect(() => {
// test if we have a token and whether it is still valid
// if not we log out
function testJwt() {
Iif (AuthService.getCurrentUser()) {
const header = authHeader();
header && axios.get('/api/user/profile', { headers: header })
.then(/* token is valid, we do not have to do anything */)
.catch(_ => {AuthService.logout(); props.onUserChange()});
}
}
testJwt();
// test every hour (the JWT are only good for a limited amount of time
const interval = window.setInterval(() => testJwt(), 60*60*1000);
return () => window.clearInterval(interval);
}, [])
return(
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="div" sx={{ marginRight: "3em" }}>
{props.section}
</Typography>
{/*@skip-for-static-start*/}
<NavLink to="/" className={"navlink"}>
<Button color="inherit" startIcon={<SportsEsportsIcon />}>
Game
</Button>
</NavLink>
{props.currentUser &&
<NavLink to="/profile" className={"navlink"}>
<Button color="inherit" startIcon={<PersonIcon />}>
Profile
</Button>
</NavLink>
}
<NavLink to="/ai" className={"navlink"}>
<Button color="inherit" startIcon={<FastForwardIcon />}>
AI
</Button>
</NavLink>
{/*@skip-for-static-end*/}
<Button
color="inherit"
href={"https://github.com/surt91/multiJSnake"}
startIcon={<GitHubIcon />}
>
GitHub
</Button>
{/*@skip-for-static-start*/}
{props.currentUser &&
<Button color="inherit" startIcon={<LogoutIcon />} onClick={_ => {
AuthService.logout();
props.onUserChange()
}}>
Logout
</Button>
}
{!props.currentUser &&
<LoginDialog
buttonText={"Login"}
button={{color:"inherit", startIcon:<LoginIcon />}}
authService={AuthService}
onSuccess={_ => props.onUserChange()}
/>
}
{!props.currentUser &&
<RegisterDialog
buttonText={"Register"}
button={{color:"inherit"}}
authService={AuthService}
onSuccess={_ => props.onUserChange()}
/>
}
{/*@skip-for-static-end*/}
</Toolbar>
</AppBar>
</Box>
);
}
|