Merge branch 'client' of gitlab.stud.idi.ntnu.no:felixalb/dcst1008-2022-group1 into client

src/client/package-lock.json

@@ -9550,6 +9550,11 @@
         "warning": "^4.0.3"
       }
     },
+    "react-custom-alert": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/react-custom-alert/-/react-custom-alert-0.1.2.tgz",
+      "integrity": "sha512-VkxPh4loaDzeQ4THauq5qOETr/SL/4L+4k1Ie3C948nSgxCy0CSY7MKrzkFwiwIiYCxib3/60zIqmTLUECHEww=="
+    },
     "react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",

src/client/package.json

@@ -14,6 +14,7 @@
     "iarn": "0.0.0",
     "react": "^17.0.2",
     "react-bootstrap": "^2.2.1",
+    "react-custom-alert": "^0.1.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",

src/client/src/createtournament.js

@@ -12,18 +12,6 @@ function CreateButton(props) {
   );
 }
 
-function FormatSelector(props) {
-  return (
-    <div>
-      Tournament Format:
-      <select>
-        <option value="Single Elimination">Single Elimination</option>
-        <option value="Double Elimination">Double Elimination</option>
-      </select>
-    </div>
-  );
-}
-
 function ParticipantLimit(props) {
   return (
     <div>
@@ -45,9 +33,6 @@ function CreateForm(props) {
   return (
     <React.Fragment>
       <form>
-        <label for="organizer">Tournament Organizer:</label>
-        <input type="text" id="organizer" />
-        <br />
         <label for="name">Tournament Name:</label>
         <input type="text" id="name" />
         <br />
@@ -76,7 +61,6 @@ export default function CreateTournament(props) {
       <CssBaseline />
       <Appbar /> 
       <CreateForm />
-      <FormatSelector />
       <ParticipantLimit />
       <CreateButton />
     </React.Fragment>

src/client/src/frontpage.js

@@ -1,6 +1,5 @@
 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 CreateTournament from "./createtournament.js";
 import TournamentOverview from "./tournamentoverview.js";
@@ -14,12 +13,12 @@ import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import CssBaseline from "@mui/material/CssBaseline";
 import Typography from "@mui/material/Typography";
-import Grid from '@mui/material/Grid';
+import Grid from "@mui/material/Grid";
-import Box from '@mui/material/Box';
+import Box from "@mui/material/Box";
 
 function CreateButton(props) {
   return (
-    <Link to="/create" style={{textDecoration:'none'}}>
+    <Link to="/create" style={{ textDecoration: "none" }}>
       <Button variant="contained" color="primary">
         Create Tournament
       </Button>
@@ -29,7 +28,7 @@ function CreateButton(props) {
 
 function OverviewButton(props) {
   return (
-    <Link to="/tournament" style={{textDecoration:'none'}}>
+    <Link to="/tournament" style={{ textDecoration: "none" }}>
       <Button variant="contained" color="success">
         View Tournament
       </Button>
@@ -57,24 +56,48 @@ function ListElement(props) {
   );
 }
 
+function TournamentList() {
+  let [data, setData] = React.useState(null);
+  React.useEffect(() => {
+    fetch("https://jsonplaceholder.typicode.com/todos/1")
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+      })
+      .catch((err) => console.log("oopsie"));
+  }, []);
+  return <div>{data && data.map((id) => console.log(id))}</div>;
+}
+
 function Home() {
   return (
     <React.StrictMode>
       <CssBaseline />
       <Appbar />
       <main>
-      <Container>
+        <Container>
-        <Box>
+          <Box>
-          <CreateButton />
+            <CreateButton />
-        </Box>
+          </Box>
-        <ListElement name="Weekend Warmup" competitors="16" date="29.04.2022" />
+          <ListElement
-        <ListElement name="Saturday Showdown" competitors="8" date="30.04.2022"/>
+            name="Weekend Warmup"
-        <ListElement name="Sunday Funday" competitors="64" date="01.05.2022" />
+            competitors="16"
-      </Container>
+            date="29.04.2022"
+          />
+          <ListElement
+            name="Saturday Showdown"
+            competitors="8"
+            date="30.04.2022"
+          />
+          <ListElement
+            name="Sunday Funday"
+            competitors="64"
+            date="01.05.2022"
+          />
+          <TournamentList />
+        </Container>
       </main>
-      <footer className="footer">
+      <footer className="footer"></footer>
-
-      </footer>
     </React.StrictMode>
   );
 }

src/client/src/managetournament.js

@@ -1,5 +1,6 @@
 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 SaveButton from "./components/savebutton";
 
@@ -39,18 +40,23 @@ function AnnounceButton(props) {
 }
 
 function InviteButton(props) {
+  function event() {
+    copy();
+    alertSuccess();
+  }
+  const copy = () => {
+    navigator.clipboard.writeText("discord.gg/asura");
+  };
+  const alertSuccess = () =>
+    alert({ message: "Copied to clipboard.", type: "success" });
   return (
-    <button
+    <button id="createInvLink" onClick={event}>
-      id="createInvLink"
+      Copy Invite Link
-      onClick={() => {
-        return <div>Hei</div>;
-      }}
-    >
-      Create Invite Link
     </button>
   );
 }
 
+//navigator.clipboard.writeText("discord.gg/asura")
 export default function TournamentManager() {
   return (
     <React.Fragment>
@@ -59,6 +65,7 @@ export default function TournamentManager() {
       <AnnounceButton />
       <InviteButton />
       <SaveButton />
+      <AlertContainer floatingTime={5000} />
     </React.Fragment>
   );
 }