From cfe57274ddf7ffd148bba7baecb213b4f2195e39 Mon Sep 17 00:00:00 2001
From: Felix Albrigtsen <felixalbrigtsen@gmail.com>
Date: Mon, 28 Mar 2022 15:20:23 +0200
Subject: [PATCH] Coding session - teams, style, appbar

---
 src/client/src/FrontPage.js          | 10 ++-
 src/client/src/TournamentOverview.js | 21 +++---
 src/client/src/TournamentTeams.js    | 96 ++++++++++++++++++++++++----
 src/client/src/components/appbar.js  | 20 +++---
 src/client/src/createtournament.js   | 59 +++++++++--------
 src/client/src/managetournament.js   | 72 +++++++++++----------
 src/client/src/setupTests.js         |  5 --
 7 files changed, 180 insertions(+), 103 deletions(-)
 delete mode 100644 src/client/src/setupTests.js

diff --git a/src/client/src/FrontPage.js b/src/client/src/FrontPage.js
index 010bf15..a4f77ce 100644
--- a/src/client/src/FrontPage.js
+++ b/src/client/src/FrontPage.js
@@ -28,9 +28,7 @@ function CreateButton(props) {
 
 function TournamentListItem(props) {
   return (
-    <Container maxWidth="lg" align="start" sx={{
-      margin:'2.5% 0'
-    }}>
+    <Container maxWidth="lg" align="start" sx={{margin:'2.5% 0'}}>
         <Paper elevation={8}>
           <Card>
             <CardMedia 
@@ -44,7 +42,7 @@ function TournamentListItem(props) {
               <Typography variant="h5" color="text.primary">{props.tournament.description}</Typography>
               <Typography variant="body2" color="text.secondary"> Start: {props.tournament.startTime.toLocaleString()} </Typography>
               <Typography variant="body2" color="text.secondary"> End: {props.tournament.endTime.toLocaleString()} </Typography>
-              <Typography variant="h5" color="text.primary" gutterBottom> Players todo / {props.tournament.teamLimit} </Typography>
+              <Typography variant="h5" color="text.primary" gutterBottom> Players {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
 
               <Box sx={{
                 margin: 'auto',
@@ -52,7 +50,7 @@ function TournamentListItem(props) {
                 flexDirection: 'row',
                 justifyContent: 'center',
                 }} component="span">
-                  <Box sx={{margin: '0 2% 0 2'}}>
+                  <Box sx={{margin: '0 2% 0 2%'}}>
                     <Link to={`/tournament/${props.tournament.id}/manage`}>
                       <Button className="ManageButton" variant="contained" color="primary">Manage Tournament</Button>
                     </Link>
@@ -106,7 +104,7 @@ function TournamentList() {
 function Home() {
   return (
     <React.StrictMode>
-      <Appbar />
+      <Appbar pageTitle="Tournaments" />
       <main>
         <Container align="center">
             <CreateButton />
diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js
index eaec3e9..5092ed7 100644
--- a/src/client/src/TournamentOverview.js
+++ b/src/client/src/TournamentOverview.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import Appbar from './components/appbar';
 import { useParams } from 'react-router-dom'
-import { Button } from "@mui/material";
+import { Button, Paper, Stack } from "@mui/material";
 import "./components/tournamentBracket.css";
 
 function MatchPair(props) {
@@ -64,7 +64,6 @@ function Match(props) {
 
   let setWinner = curryTeamId => event => {
     let teamId = curryTeamId;
-    console.log(teamId);
     if (!teamId || teamId == null) {
       showError("No team selected");
       return;
@@ -157,7 +156,6 @@ function BracketViewer(props) {
           console.error(data)
           return;
         }
-        console.log(data);
         let teams = data.data;
         setTeams(teams);
       })
@@ -186,13 +184,16 @@ export default function TournamentOverview(props) {
 
   return (
     <>
-      <Appbar />
-      <Link to={`/tournament/${tournamentId}/manage`}>
-        <Button className="ManageButton" variant="contained" color="rackley">Manage Tournament</Button>
-      </Link>
-      <Link to={`/tournament/${tournamentId}/teams`}>
-        <Button className="OverviewButton" variant="contained" color="grape">Manage Teams</Button>
-      </Link>
+      <Appbar pageTitle="Tournament matches" />
+      <Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
+        <Link to={`/tournament/${tournamentId}/manage`} >
+          <Button className="ManageButton" variant="contained" color="rackley" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Tournament</Button>
+        </Link>
+        <Link to={`/tournament/${tournamentId}/teams`} >
+          <Button className="OverviewButton" variant="contained" color="secondary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Teams</Button>
+        </Link>
+      </Paper>
+     
       
       <BracketViewer tournamentId={tournamentId} className="bracketViewer" />
     </>
diff --git a/src/client/src/TournamentTeams.js b/src/client/src/TournamentTeams.js
index 1f23cb7..a6700d0 100644
--- a/src/client/src/TournamentTeams.js
+++ b/src/client/src/TournamentTeams.js
@@ -1,15 +1,60 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom";
 import Appbar from "./components/appbar";
-import { Button, TextField, Stack, MenuItem, InputLabel, Select, Container, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Paper, Typography} from "@mui/material";
+import { Button, TextField, Stack, MenuItem, Box, InputLabel, Select, Container, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Paper, Typography} from "@mui/material";
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+
 
 function showError(error) {
   alert("Something went wrong. \n" + error);
   console.error(error);
 }
 
-function TeamList(props) {
+function TeamCreator(props) {
+  function postCreate() {
+    let teamName = document.getElementById("teamNameInput").value;
+    if (!teamName) {
+      showError("Team name is required");
+      return;
+    }
 
+    let formData = new FormData();
+    formData.append("name", teamName);
+    let body = new URLSearchParams(formData)
+
+    fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}/createTeam`, {
+      method: "POST",
+      body: body
+    })
+    .then(res => res.json())
+    .then(data => {
+      if (data.status !== "OK") {
+        showError(data.data);
+        return;
+      }
+      document.getElementById("teamNameInput").value = "";
+      props.onTeamCreated();
+    }
+    )
+  }
+
+  return (
+    <Paper sx={{width: "90vw", margin: "10px auto", padding: "15px"}} component={Stack} direction="column">
+      <div align="center">
+        <TextField id="teamNameInput" sx={{ width: "70%" }} label="Team Name" variant="outlined" />
+        {/* <Button variant="contained" color="primary" onClick={postCreate}>Create Team</Button> */}
+        <Button variant="contained" color="success" onClick={postCreate} sx={{width: "20%", marginLeft: "5px"}}>
+          <Box sx={{padding: "10px"}}>
+            Create Team
+          </Box>
+          <AddCircleIcon />
+        </Button>
+      </div>
+    </Paper>
+  )
+}
+
+function TeamList(props) {
   return (
   <Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
   <div align="center" >
@@ -32,7 +77,7 @@ function TeamList(props) {
               </b></TableCell>
               <TableCell align="right">{team.members}</TableCell>
               <TableCell align="center">
-                <Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={() => props.setselectedTeamId(team.id)}>Edit</Button>
+                <Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={() => props.setSelectedTeamId(team.id)}>Edit</Button>
                 <Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {props.onDelete(team.id); }}>Delete</Button>
               </TableCell>
             </TableRow>
@@ -75,7 +120,7 @@ function TeamEditor(props) {
     formData.append("name", document.getElementById("teamNameInput").value);
   }
 
-  if (props.selectedTeamId == -1 || !team) {
+  if (props.selectedTeamId === -1 || !team) {
     return (
       <Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
         <div align="center" >
@@ -86,7 +131,31 @@ function TeamEditor(props) {
   }
   
   function nameInputChanged(event) {
-    setTeam({...team, name: event.target.value});
+    let newTeam = {...team};
+    newTeam.name = event.target.value;
+    setTeam(newTeam);
+  }
+
+  function saveTeam() {
+    let formData = new FormData();
+    formData.append("name", team.name);
+    console.log(team);
+    let body = new URLSearchParams(formData)
+    fetch(process.env.REACT_APP_BACKEND_URL + `/api/team/${team.id}/edit`, {
+      method: "POST",
+      body: body
+    })
+    .then(res => res.json())
+    .then(data => {
+      if (data.status !== "OK") {
+        showError(data.data);
+        return;
+      }
+      setTeam(data.data);
+      props.setTeams(props.teams.map(listTeam => listTeam.id === team.id ? team : listTeam));
+      props.setSelectedTeamId(-1);
+    }
+    );
   }
 
   return (
@@ -94,8 +163,9 @@ function TeamEditor(props) {
     <div align="center">
       <h2><b>Edit Team:</b></h2>
       <form>
-        <TextField id="teamNameInput" label="Team Name" value={team.name || ""} onChange={nameInputChanged} />
+        <TextField id="teamNameInput" label="Team Name" value={team.name || ""} onChange={nameInputChanged} sx={{width: "80%"}} />
         <PlayerList players={players} setPlayers={setPlayers} />
+        <Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={saveTeam}>Save</Button>
       </form>
       </div>
     </Paper>
@@ -104,10 +174,10 @@ function TeamEditor(props) {
 
 export default function TournamentTeams(props) {
   const [teams, setTeams] = React.useState([]);
-  const [selectedTeamId, setselectedTeamId] = React.useState(-1);
+  const [selectedTeamId, setSelectedTeamId] = React.useState(-1);
   const { tournamentId } = useParams();
 
-  React.useEffect(() => {
+  function getTeams() {
     fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${tournamentId}/getTeams`)
       .then((res) => res.json())
       .then((data) => {
@@ -118,14 +188,18 @@ export default function TournamentTeams(props) {
         //setselectedTeamId(teams[0].id);
       })
       .catch((err) => showError(err));
+  }
+  React.useEffect(() => {
+    getTeams()
   }, []);
   
   return (
     <>
-    <Appbar />
+    <Appbar pageTitle="Edit teams" />
     <div className="tournamentTeams">
-      <TeamList teams={teams} selectedTeamId={selectedTeamId} setselectedTeamId={setselectedTeamId} />
-      <TeamEditor teams={teams} selectedTeamId={selectedTeamId} />
+      <TeamCreator tournamentId={tournamentId} teams={teams} onTeamCreated={getTeams} />
+      <TeamList teams={teams} selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />
+      <TeamEditor teams={teams} setTeams={setTeams} selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />
     </div>
     </>
   );
diff --git a/src/client/src/components/appbar.js b/src/client/src/components/appbar.js
index 7b32e02..e8dcabb 100644
--- a/src/client/src/components/appbar.js
+++ b/src/client/src/components/appbar.js
@@ -1,32 +1,32 @@
 import * as React from "react";
-import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
-import { AppBar, Typography, Toolbar, CssBaseline, Box, IconButton } from "@mui/material"
+import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
+import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton } from "@mui/material"
 import Menu from '@mui/icons-material/Menu'
 import HomeImage from "./homeimage";
 
-export default function Appbar() {
+export default function Appbar(props) {
     return (
     <>
     <CssBaseline />
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="static" color="primary">
         <Toolbar>
-        <HomeImage />
-          
-          <Typography variant="h6" component="div" sx={{ 
-              flexGrow: 1,
-              marginLeft: '2vw'
-              }}>
+          <HomeImage sx={{width: "10%"}} />
+          <Typography variant="h6" component="div" sx={{ marginLeft: '2vw', width: "20%;" }}>
               <Link to="/" style={{ textDecoration:'none', color:'white'}}>
                 Asura Tournaments
               </Link>
           </Typography>
+          {/* <Button sx={{width: "5%", color: "white"}} onClick={History.goBack}>Back</Button> */}
+
+          <Typography component="div" sx={{margin: "auto auto"}}><h2>{props.pageTitle || ""}</h2></Typography>
+
           <IconButton
             size="large"
             edge="start"
             color="inherit"
             aria-label="menu"
-            sx={{ mr: 2 }}
+            sx={{ marginRight: 2, width: "5%", marginLeft: "30%" }}
           >
             <Menu />
           </IconButton>
diff --git a/src/client/src/createtournament.js b/src/client/src/createtournament.js
index eebbf71..8dd6de2 100644
--- a/src/client/src/createtournament.js
+++ b/src/client/src/createtournament.js
@@ -2,7 +2,8 @@ import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 import Appbar from "./components/appbar";
 
-import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider } from '@mui/material'
+import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid } from '@mui/material'
+import FileUploadIcon from '@mui/icons-material/FileUpload';
 
 function submitTournament(event) {
   event.preventDefault();
@@ -82,29 +83,33 @@ function TournamentForm(props) {
   return (
     <>
     <form>
-    <Container maxWidth="md">
-        <InputLabel htmlFor="nameInput">Tournament Name: </InputLabel>
-        <TextField type="text" id="nameInput" variant="filled" label="Tournament Name" />
-        <InputLabel htmlFor="descriptionInput">Description: </InputLabel>
-        <TextField type="text" id="descriptionInput" variant="filled" label="Description"/>        
-        <InputLabel htmlFor="editImage">
-        Tournament Image:
-        <br />
-          <Button variant="outlined" component="span" color="primary">
-            Upload
-          </Button>
-       </InputLabel>
-        <input
-          type="file"
-          id="editImage"
-          accept="image/png, image/jpeg, image/jpg, image/gif, image/svg"
-          style={{ display: 'none' }}
-        />
-        <InputLabel htmlFor="startDatePicker">Start Time:</InputLabel>
-        <TextField type="datetime-local" id="startDatePicker" />
+    <Stack sx={{minHeight: "30vh", margin: "10px auto"}} direction="column" justifyContent="center" spacing={4} align="center">
+        {/* <InputLabel htmlFor="nameInput">Tournament Name: </InputLabel> */}
+        <TextField type="text" id="nameInput" label="Tournament Name" placeholder="Tournament Name" InputLabelProps={{shrink: true}}/>
+        {/* <InputLabel htmlFor="descriptionInput">Description: </InputLabel */}
+        <TextField type="text" id="descriptionInput" label="Description" placeholder="Descrption" InputLabelProps={{shrink: true}}/>        
+        <Box sx={{ flexGrow: 1 }}>
+          <Grid container spacing={-20} justifyContent="center">
+            <Grid item xs={2}>
+              <Container>Edit Image:</Container>
+            </Grid>
+            <Grid item xs={2}>
+              <Container>
+                <label htmlFor="editImage">
+                  <Button variant="contained" component="span" endIcon={<FileUploadIcon />}>
+                    Upload 
+                  </Button>
+                  <input accept="image/*" id="editImage" multiple type="file" style={{ display: 'none' }} />
+                </label>
+              </Container>
+            </Grid>
+          </Grid>
+        </Box>
+        {/* <InputLabel htmlFor="startDatePicker">Start Time:</InputLabel> */}
+        <TextField type="datetime-local" id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}}/>
         
-        <InputLabel htmlFor="endDatePicker">End Time:</InputLabel>
-        <TextField type="datetime-local" id="endDatePicker" />
+        {/* <InputLabel htmlFor="endDatePicker">End Time:</InputLabel> */}
+        <TextField type="datetime-local" id="endDatePicker" label="End Time" InputLabelProps={{shrink: true}}/>
 
         <InputLabel id="max-teams-label">Maximum number of teams</InputLabel>
         {/* <Select
@@ -133,14 +138,14 @@ function TournamentForm(props) {
           <option value={64}>64</option>
           <option value={128}>128</option>
         </select>
-        <Slider aria-label="Teams" defaultValue={1} valueLabelDisplay="auto" step={1} marks min={1} max={7} id="max-teams-slider" >
+        <Slider aria-label="Teams" defaultValue={1} valueLabelDisplay="auto" step={1} marks min={1} max={7} id="max-teams-slider" name="max-teams-slider" >
         </Slider>
 
         {/* go brrrr */}
         <br /><br />
         
         <Button type="submit" variant="contained" onClick={submitTournament} color="primary">Create Tournament!</Button>
-      </Container>
+      </Stack>
       </form>
     </>
   );
@@ -149,8 +154,10 @@ function TournamentForm(props) {
 export default function CreateTournament(props) {
   return (
     <>
-      <Appbar /> 
+      <Appbar pageTitle="New tournament" /> 
+      <Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 0"}} component={Container} direction="column" align="center">
       <TournamentForm />
+      </Paper>
     </>
   );
 }
diff --git a/src/client/src/managetournament.js b/src/client/src/managetournament.js
index 285a408..61f2415 100644
--- a/src/client/src/managetournament.js
+++ b/src/client/src/managetournament.js
@@ -3,7 +3,8 @@ import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 import { AlertContainer, alert } from "react-custom-alert";
 import Appbar from "./components/appbar";
 import { useParams } from "react-router-dom";
-import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider} from "@mui/material";
+import { Button, TextField, Grid, Box, Container, Paper, Stack} from "@mui/material";
+import FileUploadIcon from '@mui/icons-material/FileUpload';
 
 let submitChanges = curryTournamentId => event => {
   event.preventDefault();
@@ -71,7 +72,6 @@ function ManageTournament(props) {
   let [tournamentInfo, setTournamentInfo] = React.useState([]);
 
   React.useEffect(() => {
-    console.log(props.tournamentId);
     fetch(
       process.env.REACT_APP_BACKEND_URL +
         `/api/tournament/${props.tournamentId}`
@@ -93,40 +93,40 @@ function ManageTournament(props) {
 
   return (
     <>
-      <form>
-        <Container>
-          <InputLabel htmlFor="editName">Edit name: </InputLabel>
-          <TextField type="text" id="editName" />
-          <InputLabel htmlFor="editDesc">Edit description: </InputLabel>
-          <TextField type="text" id="editDesc" />
-          <InputLabel htmlFor="editImage">
-            Edit image:
-            <br />
-            <Button variant="outlined" component="span" color="primary">
-              Upload
-            </Button>
-          </InputLabel>
-          <input
-            type="file"
-            id="editImage"
-            accept="image/png, image/jpeg, image/jpg, image/gif, image/svg"
-            style={{ display: "none" }}
-          />
-          <InputLabel htmlFor="editStartDate">Edit Start Time:</InputLabel>
-          <TextField type="datetime-local" id="editStartDate" />
-
-          <InputLabel htmlFor="editEndDate">Edit End Time:</InputLabel>
-          <TextField type="datetime-local" id="editEndDate" />
-          <Button
-            type="submit"
-            variant="contained"
-            onClick={submitChanges(props.tournamentId)}
-            color="primary"
-          >
+    <form>
+    <Stack sx={{minHeight: "30vh", margin: "10px auto"}} direction="column" justifyContent="center" spacing={2} align="center">
+          {/* <InputLabel htmlFor="editName">Edit name: </InputLabel> */}
+          <TextField type="text" id="editName" label="Edit Name:" InputLabelProps={{shrink: true}}/>
+          {/* <InputLabel htmlFor="editDesc">Edit description: </InputLabel> */}
+          <TextField type="text" id="editDesc" label="Edit Description:" InputLabelProps={{shrink: true}} />
+          
+              <Box sx={{ flexGrow: 1 }}>
+                <Grid container spacing={-20} justifyContent="center">
+                  <Grid item xs={2}>
+                    <Container>Edit Image:</Container>
+                  </Grid>
+                  <Grid item xs={2}>
+                    <Container>
+                    <label htmlFor="editImage">
+                      <Button variant="contained" component="span" endIcon={<FileUploadIcon />}>
+                        Upload 
+                      </Button>
+                      <input accept="image/*" id="editImage" multiple type="file" style={{ display: 'none' }} />
+                      </label>
+                    </Container>
+                  </Grid>
+                </Grid>
+              </Box>
+          {/* <InputLabel htmlFor="editStartDate">Edit Start Time:</InputLabel> */}
+          <TextField type="datetime-local" id="editStartDate" label="Edit Start Time" InputLabelProps={{shrink: true,}}/>
+          {/* <InputLabel htmlFor="editEndDate">Edit End Time:</InputLabel> */}
+          <TextField type="datetime-local" id="editEndDate" label="Edit End Time" InputLabelProps={{shrink: true}}/>
+          <Button type="submit" variant="contained" onClick={submitChanges(props.tournamentId)} color="primary" >
             Save Tournament Details
           </Button>
-        </Container>
-      </form>
+      
+      </Stack>
+    </form>
     </>
   );
 }
@@ -172,11 +172,13 @@ export default function TournamentManager(props) {
   const { tournamentId } = useParams();
   return (
     <>
-      <Appbar />
+    <Appbar pageTitle="Edit Tournament" />
+    <Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 0"}} component={Container} direction="column" align="center">
       <ManageTournament tournamentId={tournamentId} />
       <AnnounceButton />
       <InviteButton />
       <AlertContainer floatingTime={5000} />
+    </Paper>
     </>
   );
 }
diff --git a/src/client/src/setupTests.js b/src/client/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/src/client/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';