ninja-merge: Trying to fill input form in managetournament

src/client/src/managetournament.js

@@ -1,27 +1,91 @@
 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 SaveButton from "./components/savebutton";
+import { useParams } from "react-router-dom";
-import { useParams } from 'react-router-dom'
+import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider} from "@mui/material";
 
-import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider } from '@mui/material'
+function submitChanges(event) {
+  event.preventDefault();
+  //TODO use refs to get values
+  let tournamentName = document.getElementById("editName").value;
+  let tournamentDescription = document.getElementById("editDesc").value;
+  let tournamentImageFile = document.getElementById("editImage").files[0];
+  let tournamentStartDate = document.getElementById("editStartDate").value;
+  let tournamentEndDate = document.getElementById("editEndDate").value;
+
+  if (!tournamentName || tournamentName == "") {
+    alert("Tournament name cannot be empty");
+    return;
+  }
+  if (!tournamentDescription || tournamentDescription == "") {
+    alert("Tournament description cannot be empty");
+    return;
+  }
+  if (!tournamentStartDate || tournamentStartDate == "") {
+    alert("Tournament start date cannot be empty");
+    return;
+  }
+  if (!tournamentEndDate || tournamentEndDate == "") {
+    alert("Tournament end date cannot be empty");
+    return;
+  }
+
+  if (tournamentStartDate > tournamentEndDate) {
+    alert("Tournament start date cannot be after end date");
+    return;
+  }
+  let today = new Date();
+  if (tournamentStartDate < today || tournamentEndDate < today) {
+    alert("Tournament start and end date must be after today");
+    return;
+  }
+
+  let formData = new FormData();
+  formData.append("name", tournamentName);
+  formData.append("description", tournamentDescription);
+  // formData.append("image", tournamentImageFile);
+  formData.append("startDate", tournamentStartDate);
+  formData.append("endDate", tournamentEndDate);
+  // formData.append("teamLimit", tournamentMaxTeams);
+  let body = new URLSearchParams(formData);
+
+  fetch(process.env.REACT_APP_BACKEND_URL + "/api/tournament/create", {
+    method: "POST",
+    body: body,
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      if (data.status == "OK") {
+        alert("Tournament managed successfully");
+        window.location.href = "/";
+      } else {
+        showError(data.data);
+      }
+    })
+    .catch((error) => showError(error));
+}
 
 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}`)
+    fetch(
-      .then(res => res.json())
+      process.env.REACT_APP_BACKEND_URL +
-      .then(data => {
+        `/api/tournament/${props.tournamentId}`
-        
+    )
+      .then((res) => res.json())
+      .then((data) => {
         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;
+        document.getElementById("editEndDate").value = data.data.endTime;
       })
       .catch((err) => console.log(err.message));
   }, []);
@@ -30,28 +94,36 @@ function ManageTournament(props) {
     <>
       <form>
         <Container>
-        <InputLabel htmlFor="editName">Edit name: </InputLabel>
+          <InputLabel htmlFor="editName">Edit name: </InputLabel>
-        <TextField type="text" id="editName" />
+          <TextField type="text" id="editName" />
-        <InputLabel htmlFor="editDesc">Edit description: </InputLabel>
+          <InputLabel htmlFor="editDesc">Edit description: </InputLabel>
-        <TextField type="text" id="editDesc" />
+          <TextField type="text" id="editDesc" />
-        <InputLabel htmlFor="editImage">
+          <InputLabel htmlFor="editImage">
-          Edit image: 
+            Edit image:
-          <br />
+            <br />
-          <Button variant="outlined" component="span" color="primary">
+            <Button variant="outlined" component="span" color="primary">
-            Upload
+              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}
+            color="primary"
+          >
+            Save Tournament Details
           </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" />
         </Container>
       </form>
     </>
@@ -61,7 +133,9 @@ function ManageTournament(props) {
 function AnnounceButton(props) {
   return (
     <Link to="/tournament/manage/announcement">
-      <Button id="sendAnnon" variant="outlined" color="primary">Send Tournament Announcement</Button>
+      <Button id="sendAnnon" variant="outlined" color="primary">
+        Send Tournament Announcement
+      </Button>
     </Link>
   );
 }
@@ -82,21 +156,25 @@ function InviteButton(props) {
   const alertSuccess = () =>
     alert({ message: "Copied to clipboard.", type: "success" });
   return (
-    <Button id="createInvLink" onClick={event} variant="outlined" color="primary">
+    <Button
+      id="createInvLink"
+      onClick={event}
+      variant="outlined"
+      color="primary"
+    >
       Copy Invite Link
     </Button>
   );
 }
 
 export default function TournamentManager(props) {
-  const { tournamentId } = useParams()
+  const { tournamentId } = useParams();
   return (
     <>
       <Appbar />
       <ManageTournament tournamentId={tournamentId} />
       <AnnounceButton />
       <InviteButton />
-      <SaveButton />
       <AlertContainer floatingTime={5000} />
     </>
   );