Added Appbars & changed react.fragment to empty <>

src/client/src/components/appbar.js

@@ -1,15 +1,19 @@
 import * as React from "react";
 import { AppBar, Typography, Toolbar } from "@mui/material";
 import HomeImage from "./homeimage";
+import CssBaseline from '@mui/material/CssBaseline'
 
 export default function Appbar() {
     return (
+        <>
+        <CssBaseline />
         <AppBar position="relative" color="primary">
         <Toolbar>
           <HomeImage />
           <Typography>This is an Appbar</Typography>
         </Toolbar>
       </AppBar>
+      </>
     );
 }
 

src/client/src/createtournament.js

@@ -31,7 +31,7 @@ function ParticipantLimit(props) {
 
 function CreateForm(props) {
   return (
-    <React.Fragment>
+    <>
       <form>
         <label for="name">Tournament Name:</label>
         <input type="text" id="name" />
@@ -51,18 +51,18 @@ function CreateForm(props) {
         <input type="time" id="time" />
         <br />
       </form>
-    </React.Fragment>
+    </>
   );
 }
 
 export default function CreateTournament(props) {
   return (
-    <React.Fragment>
+    <>
       <CssBaseline />
       <Appbar /> 
       <CreateForm />
       <ParticipantLimit />
       <CreateButton />
-    </React.Fragment>
+    </>
   );
 }

src/client/src/frontpage.js

@@ -62,24 +62,24 @@ function TournamentList() {
     fetch("https://jsonplaceholder.typicode.com/todos/1")
       .then((res) => res.json())
       .then((data) => {
-        console.log(data);
+        setData(data.data);
       })
-      .catch((err) => console.log("oopsie"));
+      .catch((err) => console.log(err.message));
   }, []);
-  return <div>{data && data.map((id) => console.log(id))}</div>;
+  return <div>{data && data.map((data, i) => <div>{i}</div>)}</div>;
 }
+//<ListElement name={data[i].name} competitors={data[i].teamLimit} date={data[i].startTime}/>
 
 function Home() {
   return (
     <React.StrictMode>
-      <CssBaseline />
       <Appbar />
       <main>
         <Container>
           <Box>
             <CreateButton />
           </Box>
-          <ListElement
+          {/* <ListElement
             name="Weekend Warmup"
             competitors="16"
             date="29.04.2022"
@@ -93,7 +93,7 @@ function Home() {
             name="Sunday Funday"
             competitors="64"
             date="01.05.2022"
-          />
+          /> */}
           <TournamentList />
         </Container>
       </main>

src/client/src/managetournament.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 import { AlertContainer, alert } from "react-custom-alert";
-import HomeImage from "./components/homeimage";
+import Appbar from './components/appbar';
 import SaveButton from "./components/savebutton";
 
 function ManageTournament(props) {
@@ -60,7 +60,7 @@ function InviteButton(props) {
 export default function TournamentManager() {
   return (
     <React.Fragment>
-      <HomeImage />
+      <Appbar />
       <ManageTournament />
       <AnnounceButton />
       <InviteButton />

src/client/src/teameditor.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
-import HomeImage from "./components/homeimage";
+import Appbar from './components/appbar';
 
 export default function TeamEditor() {
   return (
-    <React.Fragment>
-      <HomeImage />
-    </React.Fragment>
+    <>
+      <Appbar />
+    </>
   );
 }

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 HomeImage from "./components/homeimage";
+import Appbar from './components/appbar';
 
 function Announcement() {
   return (
@@ -26,9 +26,9 @@ function Announcement() {
 
 export default function TournamentAnnouncement() {
   return (
-    <React.Fragment>
-      <HomeImage />
+    <>
+      <Appbar />
       <Announcement />
-    </React.Fragment>
+    </>
   );
 }

src/client/src/tournamentmatches.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
-import HomeImage from "./components/homeimage";
+import Appbar from './components/appbar';
 
 export default function TournamentMatches() {
   return (
-    <React.Fragment>
-      <HomeImage />
-    </React.Fragment>
+    <>
+      <Appbar />
+    </>
   );
 }

src/client/src/tournamentoverview.js

@@ -1,11 +1,23 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
-import HomeImage from "./components/homeimage";
 import ManageButton from "./components/managebutton";
+import Appbar from './components/appbar';
+
+function RenderBrackets() {
+  return (
+    <>
+      brackets = []
+      knownTeams = [2,4,8,16,32,64,128,256]
+
+    
+
+    </>
+  );
+}
 
 function ViewTournament(params) {
   return (
-    <React.Fragment>
+    <>
       <div id="touOverview"></div>
       <Link to="/tournament/teams">
         <button id="manageTeams">Manage Teams </button>
@@ -13,16 +25,16 @@ function ViewTournament(params) {
       <Link to="/tournament/matches">
         <button id="touMaches">Tournament Matches</button>
       </Link>
-    </React.Fragment>
+    </>
   );
 }
 
 export default function TournamentOverview(props) {
   return (
-    <React.Fragment>
-      <HomeImage />
+    <>
+      <Appbar />
       <ManageButton />
       <ViewTournament />
-    </React.Fragment>
+    </>
   );
 }