felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update appbar / user prop

This commit is contained in:
Felix Albrigtsen 2022-04-23 15:34:53 +02:00
parent c9bf8b4f8f
commit 0717d21852
10 changed files with 37 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/src/AdminsOverview.js
View File

@ -131,7 +131,7 @@ export default function Users(props) {
return ( return (
<> <>
<Appbar pageTitle="Admins" /> <Appbar user={props.user} pageTitle="Admins" />
<div className="admins"> <div className="admins">
<AdminCreator /> <AdminCreator />
<UserList users={users}/> <UserList users={users}/>

52
src/client/src/FrontPage.js
View File

@ -8,7 +8,7 @@ import TournamentHistory from "./TournamentHistory";
import TournamentTeams from "./TournamentTeams"; import TournamentTeams from "./TournamentTeams";
import LoginPage from "./LoginPage"; import LoginPage from "./LoginPage";
import ProfilePage from "./ProfilePage"; import ProfilePage from "./ProfilePage";
import AppBar from './components/AsuraBar'; import Appbar from './components/AsuraBar';
import SuccessSnackbar from "./components/SuccessSnackbar"; import SuccessSnackbar from "./components/SuccessSnackbar";
import ErrorSnackbar from "./components/ErrorSnackbar"; import ErrorSnackbar from "./components/ErrorSnackbar";
import AdminsOverview from "./AdminsOverview"; import AdminsOverview from "./AdminsOverview";
@ -20,8 +20,6 @@ import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp
import EditIcon from '@mui/icons-material/Edit'; import EditIcon from '@mui/icons-material/Edit';
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents'; import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
let isLoggedIn = true;
function CreateButton(props) { function CreateButton(props) {
return ( return (
<Link to="/create"> <Link to="/create">
@ -121,7 +119,7 @@ function TournamentListItem(props) {
<Box sx={{flexGrow: 1, marginTop: "20px"}}> <Box sx={{flexGrow: 1, marginTop: "20px"}}>
<Grid container spacing={4} justifyContent="center" wrap="wrap"> <Grid container spacing={4} justifyContent="center" wrap="wrap">
{ isLoggedIn ? { props.user.isLoggedIn ?
<Grid item> <Grid item>
<Link to={`/tournament/${props.tournament.id}/manage`}> <Link to={`/tournament/${props.tournament.id}/manage`}>
<Button className="ManageButton" variant="contained" color="primary" endIcon={<EditIcon />}>Edit Tournament</Button> <Button className="ManageButton" variant="contained" color="primary" endIcon={<EditIcon />}>Edit Tournament</Button>
@ -144,7 +142,7 @@ function TournamentListItem(props) {
); );
} }
function TournamentList() { function TournamentList(props) {
let [tournamentList, setTournamentList] = React.useState([]); let [tournamentList, setTournamentList] = React.useState([]);
React.useEffect(() => { React.useEffect(() => {
@ -174,24 +172,24 @@ function TournamentList() {
return <> return <>
<Stack spacing={3} sx={{margin: "10px auto"}}> <Stack spacing={3} sx={{margin: "10px auto"}}>
{tournamentList && tournamentList.map((tournamentObject) => <TournamentListItem key={tournamentObject.id.toString()} tournament={tournamentObject} />)} {tournamentList && tournamentList.map((tournamentObject) => <TournamentListItem user={props.user} key={tournamentObject.id.toString()} tournament={tournamentObject} />)}
</Stack> </Stack>
</>; </>;
} }
function Home() { function Home(props) {
return ( return (
<> <>
<AppBar pageTitle="Asura Tournaments" /> <Appbar user={props.user} pageTitle="Asura Tournaments" />
<Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center"> <Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
<Box component={Stack} direction="row" align="center" justifyContent="space-between" alignItems="center" sx={{flexGrow: 1}}> <Box component={Stack} direction="row" align="center" justifyContent="space-between" alignItems="center" sx={{flexGrow: 1}}>
{/* <CreateButton /> */} {/* <CreateButton /> */}
<Typography variant="h3">Tournaments</Typography> <Typography variant="h3">Tournaments</Typography>
{ isLoggedIn ? { props.user.isLoggedIn ?
<CreateButton /> : null <CreateButton /> : null
} }
</Box> </Box>
<TournamentList /> <TournamentList user={props.user} />
<Typography variant="h5" color="#555555"> <Typography variant="h5" color="#555555">
Finished tournaments are moved to the <Link to="/history">history-page</Link> Finished tournaments are moved to the <Link to="/history">history-page</Link>
</Typography> </Typography>
@ -241,24 +239,18 @@ export default function App() {
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
if (data.status !== "OK") { if (data.status !== "OK") {
setUser({ setUser({ isManager: false, isLoggedIn: false });
isManager: false, console.log(data.data);
isLoggedIn: false
});
console.error(data.data);
return; return;
} }
console.log(data);
let u = data.data; let u = data.data;
u.isLoggedIn = true; u.isLoggedIn = true;
console.log("User is logged in")
setUser(u); setUser(u);
}) })
.catch((err) => { .catch((err) => {
console.log(err.message); showError(err.message);
setUser({ setUser({ isManager: false, isLoggedIn: false });
isManager: false,
isLoggedIn: false
});
}); });
} }
@ -286,15 +278,15 @@ export default function App() {
<React.StrictMode> <React.StrictMode>
<Router> <Router>
<Routes> <Routes>
<Route path="/" element={<Home showError={showError} showSuccess={showSuccess} />} /> <Route path="/" element={<Home showError={showError} showSuccess={showSuccess} user={user} />} />
<Route path="/create" element={<TournamentCreator showError={showError} showSuccess={showSuccess} />} /> <Route path="/create" element={<TournamentCreator showError={showError} showSuccess={showSuccess} user={user} />} />
<Route path="/tournament/:tournamentId" element={<TournamentOverview />} /> <Route path="/tournament/:tournamentId" element={<TournamentOverview user={user} />} />
<Route path="/tournament/:tournamentId/manage" element={<TournamentManager showError={showError} showSuccess={showSuccess} />} /> <Route path="/tournament/:tournamentId/manage" element={<TournamentManager showError={showError} showSuccess={showSuccess} user={user} />} />
<Route path="/tournament/:tournamentId/teams" element={<TournamentTeams showError={showError} showSuccess={showSuccess} />} /> <Route path="/tournament/:tournamentId/teams" element={<TournamentTeams showError={showError} showSuccess={showSuccess} user={user} />} />
<Route path="/history" element={<TournamentHistory showError={showError} showSuccess={showSuccess} />} /> <Route path="/history" element={<TournamentHistory showError={showError} showSuccess={showSuccess} user={user} />} />
<Route path="/login" element={<LoginPage />} /> <Route path="/login" element={<LoginPage user={user} />} />
<Route path="/profile" element={<ProfilePage user={user} checkLogin={checkLogin} />} /> <Route path="/profile" element={<ProfilePage user={user} />} />
<Route path="/admins" element={<AdminsOverview />} /> <Route path="/admins" element={<AdminsOverview user={user} />} />
</Routes> </Routes>
</Router> </Router>

6
src/client/src/LoginPage.js
View File

@ -1,14 +1,14 @@
import * as React from "react"; import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import AppBar from "./components/AsuraBar"; import Appbar from "./components/AsuraBar";
import ErrorSnackbar from "./components/ErrorSnackbar"; import ErrorSnackbar from "./components/ErrorSnackbar";
import {Button, Textfield, Stack, InputLabel, Paper, Typography} from '@mui/material'; import {Button, Textfield, Stack, InputLabel, Paper, Typography} from '@mui/material';
export default function LoginPage() { export default function LoginPage(props) {
return ( return (
<> <>
<AppBar pageTitle="Sign in" /> <Appbar user={props.user} pageTitle="Sign in" />
<Paper x={{width: "70vw", margin: "1.5% auto"}} component={Stack} direction="column" justifyContent="center" alignItems="center"> <Paper x={{width: "70vw", margin: "1.5% auto"}} component={Stack} direction="column" justifyContent="center" alignItems="center">
<Stack direction="column" paddingTop={'0.5%'} alignItems={'center'}> <Stack direction="column" paddingTop={'0.5%'} alignItems={'center'}>
<Typography>Sign in with google</Typography> <Typography>Sign in with google</Typography>

4
src/client/src/ProfilePage.js
View File

@ -1,13 +1,13 @@
import * as React from "react"; import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import AppBar from "./components/AsuraBar"; import Appbar from "./components/AsuraBar";
import ErrorSnackbar from "./components/ErrorSnackbar"; import ErrorSnackbar from "./components/ErrorSnackbar";
import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material'; import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material';
export default function ProfilePage(props) { export default function ProfilePage(props) {
let user = props.user; let user = props.user;
return (<> return (<>
<AppBar pageTitle="Profile" /> <Appbar user={props.user} pageTitle="Profile" />
<Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center"> <Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
{user.isLoggedIn ? <> {user.isLoggedIn ? <>
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center"> <Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">

2
src/client/src/TournamentCreator.js
View File

@ -170,7 +170,7 @@ export default function TournamentCreator(props) {
return ( return (
<> <>
<AppBar pageTitle="New tournament" /> <Appbar user={props.user} pageTitle="New tournament" />
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 20px"}} component={Container} direction="column" align="center"> <Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 20px"}} component={Container} direction="column" align="center">
<TournamentForm /> <TournamentForm />
</Paper> </Paper>

2
src/client/src/TournamentManager.js
View File

@ -222,7 +222,7 @@ export default function TournamentManager(props) {
showSuccess = props.showSuccess; showSuccess = props.showSuccess;
return ( return (
<> <>
<AppBar pageTitle="Edit Tournament" /> <Appbar user={props.user} pageTitle="Edit Tournament" />
<TournamentBar pageTitle="Edit Tournament"/> <TournamentBar pageTitle="Edit Tournament"/>
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 0"}} component={Container} direction="column" align="center"> <Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 0"}} component={Container} direction="column" align="center">
<ManageTournament tournamentId={tournamentId} showError={showError} /> <ManageTournament tournamentId={tournamentId} showError={showError} />

4
src/client/src/TournamentMatches.js
View File

@ -1,6 +1,6 @@
import * as React from "react"; import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import Appbar from './components/Appbar'; import Appbar from './components/AsuraBar';
function MatchHistory() { function MatchHistory() {
@ -12,7 +12,7 @@ function MatchHistory() {
export default function TournamentMatches() { export default function TournamentMatches() {
return ( return (
<> <>
<Appbar /> <Appbar user={props.user} />
<MatchHistory /> <MatchHistory />
</> </>
); );

5
src/client/src/TournamentOverview.js
View File

@ -10,7 +10,6 @@ import DoDisturbIcon from '@mui/icons-material/DoDisturb';
import BackspaceIcon from '@mui/icons-material/Backspace'; import BackspaceIcon from '@mui/icons-material/Backspace';
import AddCircleIcon from '@mui/icons-material/AddCircle'; import AddCircleIcon from '@mui/icons-material/AddCircle';
let isLoggedIn = true;
function showError(error) { function showError(error) {
alert("Something went wrong. \n" + error); alert("Something went wrong. \n" + error);
@ -208,8 +207,8 @@ export default function TournamentOverview(props) {
return ( return (
<> <>
<Appbar pageTitle={tournament.name} /> <Appbar user={props.user} pageTitle={tournament.name} />
{ isLoggedIn && !tournament.hasEnded ? { props.user.isLoggedIn && !tournament.hasEnded ?
<TournamentBar tournamentId={tournamentId} viewTournament={true} /> : null <TournamentBar tournamentId={tournamentId} viewTournament={true} /> : null
} }
<BracketViewer tournament={tournament} tournamentId={tournamentId} className="bracketViewer" /> <BracketViewer tournament={tournament} tournamentId={tournamentId} className="bracketViewer" />

2
src/client/src/TournamentTeams.js
View File

@ -205,7 +205,7 @@ export default function TournamentTeams(props) {
return ( return (
<> <>
<Appbar pageTitle="Edit teams" /> <Appbar user={props.user} pageTitle="Edit teams" />
<TournamentBar pageTitle="Manage Teams" /> <TournamentBar pageTitle="Manage Teams" />
<div className="tournamentTeams"> <div className="tournamentTeams">
<TeamCreator tournamentId={tournamentId} teams={teams} onTeamCreated={getTeams} /> <TeamCreator tournamentId={tournamentId} teams={teams} onTeamCreated={getTeams} />

11
src/client/src/components/AsuraBar.js
View File

@ -9,8 +9,6 @@ import LogoutIcon from '@mui/icons-material/Logout';
import LoginIcon from '@mui/icons-material/Login'; import LoginIcon from '@mui/icons-material/Login';
import logo from "./../Asura2222.png"; import logo from "./../Asura2222.png";
var isLoggedIn = false; // props.isLoggedIn;
function LoggedInMenu() { function LoggedInMenu() {
const [anchorEl, setAnchorEl] = React.useState(null); const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
@ -22,8 +20,6 @@ function LoggedInMenu() {
}; };
const logout = () => { const logout = () => {
console.log("Logged out");
isLoggedIn = false;
setAnchorEl(null); setAnchorEl(null);
} }
@ -35,7 +31,7 @@ function LoggedInMenu() {
<Menu anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{'aria-labelledby': 'basic-button',}} sx={{position:"absolute"}}> <Menu anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{'aria-labelledby': 'basic-button',}} sx={{position:"absolute"}}>
<Link to="/" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<AccountCircleIcon />}>Profile</Button></MenuItem></Link> <Link to="/" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<AccountCircleIcon />}>Profile</Button></MenuItem></Link>
<Link to="/history" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<HistoryIcon />}>History</Button></MenuItem></Link> <Link to="/history" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<HistoryIcon />}>History</Button></MenuItem></Link>
<Link to="/" style={{color:"black"}}><MenuItem onClick={logout}><Button endIcon={<LogoutIcon />} >Logout</Button></MenuItem></Link> <Link to="/api/logout" style={{color:"black"}}><MenuItem onClick={logout}><Button endIcon={<LogoutIcon />} >Logout</Button></MenuItem></Link>
<Link to="/admins" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<EditIcon />} >Admins</Button></MenuItem></Link> <Link to="/admins" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<EditIcon />} >Admins</Button></MenuItem></Link>
</Menu> </Menu>
</> </>
@ -44,10 +40,7 @@ function LoggedInMenu() {
function NotLoggedInButton() { function NotLoggedInButton() {
const login = () => { const login = () => {
console.log("Logged in");
isLoggedIn = true;
} }
return ( return (
@ -88,7 +81,7 @@ export default function Appbar(props) {
</Grid> </Grid>
{ props.pageTitle !== "Sign in" ? { props.pageTitle !== "Sign in" ?
<Grid item xs={2}> <Grid item xs={2}>
{ isLoggedIn ? <LoggedInMenu /> : <NotLoggedInButton /> } { props.user.isLogggedIn ? <LoggedInMenu /> : <NotLoggedInButton /> }
</Grid> : </Grid> :
<Grid item xs={2}> <Grid item xs={2}>
</Grid> </Grid>