Code Refactoring, design iteration

src/client/src/FrontPage.js

@@ -6,7 +6,7 @@ import TournamentManager from "./TournamentManager.js";
 import TournamentAnnouncement from "./TournamentAnnouncement";
 import TournamentMatches from "./TournamentMatches";
 import TournamentTeams from "./TournamentTeams";
-import AppBar from './components/appbar';
+import AppBar from './components/Appbar';
 import { Button, Container, Typography, Box, Stack, Card, CardContent, CardMedia, Paper, Grid } from "@mui/material";
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 
@@ -45,12 +45,12 @@ function TournamentListItem(props) {
 
               <Box sx={{flexGrow: 1}}>
               <Grid container spacing={4} justifyContent="center" wrap="wrap">
-                  <Grid item sx={4}>
+                  <Grid item>
                     <Link to={`/tournament/${props.tournament.id}/manage`}>
                       <Button className="ManageButton" variant="contained" color="primary">Manage Tournament</Button>
                     </Link>
                   </Grid>
-                  <Grid item sx={4}>
+                  <Grid item >
                   <Link to={`/tournament/${props.tournament.id}`} >
                     <Button variant="contained" color="success">
                       View Tournament

src/client/src/TournamentAnnouncement.js

@@ -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/Appbar';
 
 function Announcement() {
   return (

src/client/src/TournamentCreator.js

@@ -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/Appbar";
 
 import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material'
 import FileUploadIcon from '@mui/icons-material/FileUpload';

src/client/src/TournamentManager.js

@@ -1,12 +1,17 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 // import { AlertContainer, alert } from "react-custom-alert";
-import AppBar from "./components/appbar";
+import AppBar from "./components/Appbar";
-import TournamentBar from "./components/tournamentbar";
+import TournamentBar from "./components/TournamentBar";
 import { useParams } from "react-router-dom";
 import { Button, TextField, Grid, Box, Container, Paper, Stack} from "@mui/material";
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 
+//Dependency for snackbar/popup
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+
 let submitChanges = curryTournamentId => event => {
   event.preventDefault();
   let tournamentId = curryTournamentId;
@@ -68,10 +73,29 @@ let submitChanges = curryTournamentId => event => {
     })
     .catch((error) => showError(error));
 }
+let deleteTournament = tournamentId => event => {
+  event.preventDefault();
+  //TODO: https://mui.com/components/dialogs/
+  let certain = window.confirm("Are you sure? Click OK to delete tournament");
+  if (!certain) {
+    return;
+  }
 
+  fetch(process.env.REACT_APP_API_URL + `/tournament/${tournamentId}`, {
+    method: "DELETE",
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      if (data.status === "OK") {
+        alert("Tournament Deleted successfully");
+        window.location.href = "/";
+      } else {
+        showError(data.data);
+      }
+    })
+    .catch((error) => showError(error));
+}
 function ManageTournament(props) {
-  let [tournamentInfo, setTournamentInfo] = React.useState([]);
-
   React.useEffect(() => {
     fetch(
       process.env.REACT_APP_API_URL + `/tournament/${props.tournamentId}`
@@ -81,8 +105,6 @@ function ManageTournament(props) {
         if (data.status !== "OK") {
           showError(data.data);
         }
-
-        setTournamentInfo(data.data);
         document.getElementById("editName").value = data.data.name;
         document.getElementById("editDesc").value = data.data.description;
         document.getElementById("editStartDate").value = data.data.startTime.slice(0, 16);
@@ -117,10 +139,9 @@ function ManageTournament(props) {
                   </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>          
@@ -131,40 +152,32 @@ function ManageTournament(props) {
   );
 }
 
-function AnnounceButton(props) {
-  return (
-    <Link to="/tournament/manage/announcement">
-      <Button id="sendAnnon" variant="outlined" color="primary">
-        Send Tournament Announcement
-      </Button>
-    </Link>
-  );
-}
-
 function showError(error) {
   alert("Something went wrong. \n" + error);
   console.error(error);
 }
 
-function InviteButton(props) {
+function ClipboardButton(props) {
-  function event() {
+  const [open, setOpen] = React.useState(false);
-    copy();
+  function copyString() {
-    alertSuccess();
+    navigator.clipboard.writeText(props.clipboardContent || "");
+    setOpen(true);
   }
-  const copy = () => {
+  const handleClose = (event, reason) => {
-    navigator.clipboard.writeText("discord.gg/asura");
+    if (reason === 'clickaway') { return }
+    setOpen(false);
   };
-  const alertSuccess = () =>
+  const closeAction = <>
-    alert({ message: "Copied to clipboard.", type: "success" });
+    <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+      <CloseIcon fontSize="small" />
+    </IconButton>
+  </>
+    
   return (
-    <Button
+    <>
-      id="createInvLink"
+      <Button onClick={copyString} variant="outlined" color="primary" sx={{margin: "auto 5px"}} >Copy {props.name}</Button>
-      onClick={event}
+      <Snackbar open={open} autoHideDuration={1500} onClose={handleClose} message={props.name + " copied to clipboard"} action={closeAction} />
-      variant="outlined"
+    </>
-      color="primary"
-    >
-      Copy Invite Link
-    </Button>
   );
 }
 
@@ -177,8 +190,14 @@ export default function TournamentManager(props) {
     <Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 0"}} component={Container} direction="column" align="center">
       <ManageTournament tournamentId={tournamentId} />
       {/* <AnnounceButton /> */}
-      <InviteButton />
+      <Box sx={{width: "100%"}}>
-      {/* <AlertContainer floatingTime={5000} /> */}
+        <Button variant="contained" color="error" onClick={deleteTournament(tournamentId)} sx={{margin: "auto 5px"}}>
+          Delete Tournament
+        </Button>
+        <ClipboardButton clipboardContent={"https://discord.gg/asura"} name="Discord Invite Link" />
+        <ClipboardButton clipboardContent={"https://asura.feal.no/tournament/" + tournamentId} name="Tournament Link" />
+      </Box>
+      
     </Paper>
     </>
   );

src/client/src/TournamentMatches.js

@@ -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/Appbar';
 
 function MatchHistory() {
 

src/client/src/TournamentOverview.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
-import Appbar from './components/appbar';
+import Appbar from './components/Appbar';
-import TournamentBar from "./components/tournamentbar";
+import TournamentBar from "./components/TournamentBar";
 import { useParams } from 'react-router-dom'
 import { Button, Paper, Stack } from "@mui/material";
 import "./components/tournamentBracket.css";
@@ -186,8 +186,8 @@ export default function TournamentOverview(props) {
 
   return (
     <>
-      <Appbar pageTitle="Tournament matches" />
+      <Appbar pageTitle="View Tournament" />
-      <TournamentBar pageTitle="Tournament Matches" />
+      <TournamentBar pageTitle="View Tournament" />
       <BracketViewer tournamentId={tournamentId} className="bracketViewer" />
     </>
   );

src/client/src/TournamentTeams.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom";
-import Appbar from "./components/appbar";
+import Appbar from "./components/Appbar";
-import TournamentBar from "./components/tournamentbar";
+import TournamentBar from "./components/TournamentBar";
 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';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -205,7 +205,7 @@ export default function TournamentTeams(props) {
   return (
     <>
     <Appbar pageTitle="Edit teams" />
-    <TournamentBar pageTitle="Edit Teams" />
+    <TournamentBar pageTitle="Manage Teams" />
     <div className="tournamentTeams">
       <TeamCreator tournamentId={tournamentId} teams={teams} onTeamCreated={getTeams} />
       <TeamList teams={teams} setTeams={setTeams} selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />

src/client/src/components/Appbar.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
 import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton, Grid } from "@mui/material"
 import MenuIcon from '@mui/icons-material/Menu';
-import HomeImage from "./homeimage";
+import logo from "./../Asura2222.png";
 
 export default function Appbar(props) {
     return (
@@ -13,7 +13,10 @@ export default function Appbar(props) {
           <Box sx={{ flexGrow: 1 }}>
             <Grid container spacing={2} justifyContent="space-between" alignItems="center" align="center">
               <Grid item xs={2}>
-                <HomeImage sx={{width: "10%"}} />
+
+                <Link to="/">
+                  <img sx={{width: "10%"}} src={logo} alt="Tournament logo" className="mainIcon"></img>
+                </Link>
                 {/* <Typography variant="h6" component="div">
                   <Link to="/" style={{ color:'white'}}>
                     Asura Tournaments
@@ -24,13 +27,10 @@ export default function Appbar(props) {
                 <Typography component="div"><h2>{props.pageTitle || ""}</h2></Typography>
               </Grid>
               <Grid item xs={2}>
-                <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ width: "5%", padding: "5% 10%" }}>
+                {/* <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ width: "5%", padding: "5% 10%" }}>
                   <MenuIcon />
-                </IconButton>
+                </IconButton> */}
               </Grid>
-                
-              {/* <Button sx={{width: "5%", color: "white"}} onClick={History.goBack}>Back</Button> */}
-              {/* <Button color="inherit">Login</Button> */}
             </Grid>
           </Box>
         </Toolbar>

src/client/src/components/TournamentBar.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { useParams } from "react-router-dom";
+import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
+import { Stack, Paper, Typography, Box, Button, Grid } from "@mui/material"
+
+function ButtonLink(props) {
+  return (
+    <Link to={`/tournament/${props.tournamentId}` + props.targetPath} >
+        <Button variant="contained" color="primary" disabled={props.activeTitle === props.title} sx={{margin: "15px", fontSize: "1.2em"}} >{props.title}</Button>
+    </Link>
+  );
+}
+
+export default function TournamentBar(props) {
+    const { tournamentId } = useParams();
+    return (
+        <Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
+            <ButtonLink targetPath="" tournamentId={tournamentId} activeTitle={props.pageTitle} title="View Tournament" />
+            <ButtonLink targetPath="/manage" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Edit Tournament" />
+            <ButtonLink targetPath="/teams" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Manage Teams" />
+        </Paper>
+    )
+}

src/client/src/components/homeimage.js

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
-import logo from "./../Asura2222.png";
-
-export default function HomeImage() {
-  return (
-    <Link to="/">
-      <img src={logo} alt="Tournament logo" className="mainIcon"></img>
-    </Link>
-  );
-}

src/client/src/components/tournamentbar.js

@@ -1,51 +0,0 @@
-import * as React from "react";
-import { useParams } from "react-router-dom";
-import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
-import { Stack, Paper, Typography, Box, Button, Grid } from "@mui/material"
-
-export default function TournamentBar(props) {
-    const { tournamentId } = useParams()
-    if (props.pageTitle == "Edit Tournament") {
-        return(
-            <Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
-                <Link to={`/tournament/${tournamentId}/manage`} >
-                <Button className="ManageButton" variant="contained" color="primary" disabled={true} 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>
-                <Link to={`/tournament/${tournamentId}`} >
-                    <Button className="OverviewButton" variant="contained" color="success" sx={{margin: "15px", fontSize: "1.2em"}} >View Tournament</Button>
-                </Link>
-            </Paper>
-            )
-        } else if (props.pageTitle == "Tournament Matches") {
-            return(
-                <Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
-                    <Link to={`/tournament/${tournamentId}/manage`} >
-                    <Button className="ManageButton" variant="contained" color="primary" 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>
-                    <Link to={`/tournament/${tournamentId}`} >
-                        <Button className="OverviewButton" variant="contained" color="success"  disabled={true} sx={{margin: "15px", fontSize: "1.2em"}} >View Tournament</Button>
-                    </Link>
-                </Paper>
-                ) 
-        } else if (props.pageTitle == "Edit Teams") {
-            return(
-                <Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
-                    <Link to={`/tournament/${tournamentId}/manage`} >
-                    <Button className="ManageButton" variant="contained" color="primary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Tournament</Button>
-                    </Link>
-                    <Link to={`/tournament/${tournamentId}/teams`} >
-                        <Button className="OverviewButton" variant="contained" color="secondary" disabled={true} sx={{margin: "15px", fontSize: "1.2em"}} >Manage Teams</Button>
-                    </Link>
-                    <Link to={`/tournament/${tournamentId}`} >
-                        <Button className="OverviewButton" variant="contained" color="success" sx={{margin: "15px", fontSize: "1.2em"}} >View Tournament</Button>
-                    </Link>
-                </Paper>
-            ) 
-        }
-}