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 (
<>
<Appbar pageTitle="Admins" />
<Appbar user={props.user} pageTitle="Admins" />
<div className="admins">
<AdminCreator />
<UserList users={users}/>

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

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

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

@ -1,14 +1,14 @@
import * as React from "react";
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 {Button, Textfield, Stack, InputLabel, Paper, Typography} from '@mui/material';
export default function LoginPage() {
export default function LoginPage(props) {
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">
<Stack direction="column" paddingTop={'0.5%'} alignItems={'center'}>
<Typography>Sign in with google</Typography>

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

@ -1,13 +1,13 @@
import * as React from "react";
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 { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material';
export default function ProfilePage(props) {
let user = props.user;
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">
{user.isLoggedIn ? <>
<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 (
<>
<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">
<TournamentForm />
</Paper>

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

@ -222,7 +222,7 @@ export default function TournamentManager(props) {
showSuccess = props.showSuccess;
return (
<>
<AppBar pageTitle="Edit Tournament" />
<Appbar user={props.user} 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">
<ManageTournament tournamentId={tournamentId} showError={showError} />

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

@ -1,6 +1,6 @@
import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import Appbar from './components/Appbar';
import Appbar from './components/AsuraBar';
function MatchHistory() {
@ -12,7 +12,7 @@ function MatchHistory() {
export default function TournamentMatches() {
return (
<>
<Appbar />
<Appbar user={props.user} />
<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 AddCircleIcon from '@mui/icons-material/AddCircle';
let isLoggedIn = true;
function showError(error) {
alert("Something went wrong. \n" + error);
@ -208,8 +207,8 @@ export default function TournamentOverview(props) {
return (
<>
<Appbar pageTitle={tournament.name} />
{ isLoggedIn && !tournament.hasEnded ?
<Appbar user={props.user} pageTitle={tournament.name} />
{ props.user.isLoggedIn && !tournament.hasEnded ?
<TournamentBar tournamentId={tournamentId} viewTournament={true} /> : null
}
<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 (
<>
<Appbar pageTitle="Edit teams" />
<Appbar user={props.user} pageTitle="Edit teams" />
<TournamentBar pageTitle="Manage Teams" />
<div className="tournamentTeams">
<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 logo from "./../Asura2222.png";
var isLoggedIn = false; // props.isLoggedIn;
function LoggedInMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
@ -22,8 +20,6 @@ function LoggedInMenu() {
};
const logout = () => {
console.log("Logged out");
isLoggedIn = false;
setAnchorEl(null);
}
@ -35,7 +31,7 @@ function LoggedInMenu() {
<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="/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>
</Menu>
</>
@ -44,10 +40,7 @@ function LoggedInMenu() {
function NotLoggedInButton() {
const login = () => {
console.log("Logged in");
isLoggedIn = true;
}
return (
@ -88,7 +81,7 @@ export default function Appbar(props) {
</Grid>
{ props.pageTitle !== "Sign in" ?
<Grid item xs={2}>
{ isLoggedIn ? <LoggedInMenu /> : <NotLoggedInButton /> }
{ props.user.isLogggedIn ? <LoggedInMenu /> : <NotLoggedInButton /> }
</Grid> :
<Grid item xs={2}>
</Grid>