Conditional rendering for components

src/client/src/FrontPage.js

@@ -14,6 +14,8 @@ 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">
@@ -111,11 +113,13 @@ function TournamentListItem(props) {
               
               <Box sx={{flexGrow: 1, marginTop: "20px"}}>
                 <Grid container spacing={4} justifyContent="center" wrap="wrap">
+                    { isLoggedIn ?
                       <Grid item>
                       <Link to={`/tournament/${props.tournament.id}/manage`}>
                         <Button className="ManageButton" variant="contained" color="primary" endIcon={<EditIcon />}>Edit Tournament</Button>
                       </Link>
-                    </Grid>
+                    </Grid> : null
+                    }
                     <Grid item >
                     <Link to={`/tournament/${props.tournament.id}`} >
                       <Button variant="contained" color="success">
@@ -177,7 +181,9 @@ function Home() {
           <Box component={Stack} direction="row" align="center" justifyContent="space-between" alignItems="center" sx={{flexGrow: 1}}>
             {/* <CreateButton /> */}
             <Typography variant="h3">Tournaments</Typography>
-            <CreateButton />
+            { isLoggedIn ?
+              <CreateButton /> : null
+            }
           </Box>
           <TournamentList />
           <Typography variant="h5" color="#555555">

src/client/src/LoginPage.js

@@ -14,10 +14,14 @@ export default function LoginPage() {
     return (
         <>
             <AppBar pageTitle="Sign in" />
-            <h2>Sign in with google</h2>
-            <a href={process.env.REACT_APP_LOGIN_URL}>
+            <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>
+                    <Link to={process.env.REACT_APP_LOGIN_URL}>
                         <img src="/btn_google_signing_dark.png" alt="Sign in with google" />
-            </a>
+                    </Link>
+                </Stack>
+            </Paper>            
         </>
     );
 }

src/client/src/TournamentOverview.js

@@ -10,6 +10,8 @@ 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);
   console.error(error);
@@ -88,6 +90,8 @@ function Match(props){
       .catch(err => showError(err));
     })
 
+    console.log(props)
+
   let today = new Date()
   let yesterday = today.setDate(today.getDate() - 1)
   let isComplete = new Date(endTime) < yesterday
@@ -100,10 +104,10 @@ function Match(props){
               <Typography className={`teamName`} align={'center'} sx={{fontSize:'1.5rem', maxWidth:'15vw', overflow:'hidden', wordWrap:'none'}}>
                 {team1Name}
               </Typography>
-              { props.match.winnerId && (props.match.team1Id === props.match.winnerId) && !isComplete ?
+              { props.match.teamId !== null && !isComplete && props.match.tier !== Math.log2(4) - 1 && props.match.winnerId === null && team1Name !== "TBA" ?
               <IconButton color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton> : null
               }
-              { props.match.team1Id !== null && !isComplete ?
+              { props.match.team1Id !== null && props.match.winnerId === null && !isComplete && team1Name !== "TBA" ?
               <IconButton onClick={setWinner(props.match.team1Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton> : null
               }
               {/* { props.match.winnerId && (props.match.team1Id === props.match.winnerId) &&
@@ -118,10 +122,10 @@ function Match(props){
               <Typography className={`teamName`} sx={{fontSize:'1.5rem', maxWidth:'15vw', overflow:'hidden', wordWrap:'none'}}>
                 {team2Name}
               </Typography>
-              { props.match.winnerId && (props.match.team2Id === props.match.winnerId) && !isComplete ?
+              { props.match.teamId !== null && !isComplete && props.match.tier !== Math.log2(props.maxTeams) - 1 && props.match.winnerId === null && team2Name !== "TBA" ? 
               <IconButton color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton> : null
               }
-              { props.match.team2Id !== null && !isComplete ?
+              { props.match.team1Id !== null && props.match.winnerId === null && !isComplete && team2Name !== "TBA" ?
               <IconButton onClick={setWinner(props.match.team2Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton> : null
               }
               {/* { props.match.winnerId && (props.match.team2Id === props.match.winnerId) &&
@@ -238,7 +242,9 @@ export default function TournamentOverview(props) {
   return (
     <>
       <Appbar pageTitle="View Tournament" />
-      <RemovableBar tournamentId={tournamentId} />
+      { isLoggedIn ? 
+        <RemovableBar tournamentId={tournamentId} /> : null
+      }
       <BracketViewer tournamentId={tournamentId} className="bracketViewer" />
     </>
   );

src/client/src/components/AsuraBar.js

@@ -5,8 +5,11 @@ import MenuIcon from '@mui/icons-material/Menu';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import HistoryIcon from '@mui/icons-material/History';
 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);
@@ -19,6 +22,7 @@ function LoggedInMenu() {
 
   const logout = () => {
     console.log("Logged out");
+    isLoggedIn = false;
     setAnchorEl(null);
   }
 
@@ -41,12 +45,13 @@ function NotLoggedInButton() {
 
   const login = () => {
     console.log("Logged in");
+    isLoggedIn = true;
   }
 
   return (
     <>
-    <Link to="/" style={{color:"white"}}>
-      <Button sx={{color:"white"}} onclick={login}>
+    <Link to="/login" style={{color:"white"}}>
+      <Button sx={{color:"white"}} onClick={login} endIcon={<LoginIcon />}>
         Login
         </Button>
       </Link>
@@ -55,8 +60,6 @@ function NotLoggedInButton() {
 }
 
 export default function Appbar(props) {
-    const isLoggedIn = true; // props.isLoggedIn;
-
     return (
     <>
     <CssBaseline />
@@ -81,9 +84,13 @@ export default function Appbar(props) {
               <Grid item xs={8}>
                 <Typography component="div"><h2>{props.pageTitle || ""}</h2></Typography>
               </Grid>
+              { props.pageTitle !== "Sign in" ?
                 <Grid item xs={2}>
                   { isLoggedIn ? <LoggedInMenu /> : <NotLoggedInButton /> } 
+                </Grid> : 
+                <Grid item xs={2}>
                 </Grid>
+              }
             </Grid>
           </Box>
         </Toolbar>