From 237ecac25a5d9f29ebc48eb47e8dac3d225de991 Mon Sep 17 00:00:00 2001
From: Kristoffer Longva Eriksen <krisleri@stud.ntnu.no>
Date: Wed, 23 Mar 2022 16:58:35 +0100
Subject: [PATCH] added hooks for populating inputs in teameditor

---
 src/client/src/teameditor.js | 81 +++++++++++++++++++++++++++---------
 1 file changed, 61 insertions(+), 20 deletions(-)

diff --git a/src/client/src/teameditor.js b/src/client/src/teameditor.js
index ff9dc81..2e9b09b 100644
--- a/src/client/src/teameditor.js
+++ b/src/client/src/teameditor.js
@@ -1,28 +1,69 @@
 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'
-
-function TeamList() {
- let teams = {"team 1": ["tom", "eric", "gustav"], "team 2": ["emma", "mari", "ida"],"team 3": ["ola", "ole", "ost"],"team 4": ["christine", "kristine", "kristhine"]}
- return (<div>
-   <ul>
-     {Object.entries(teams).map(([team, players]) => <li key={team} ><button>{team}</button></li>)}
-   </ul>
- </div>)
-}
+import Appbar from "./components/appbar";
+import {
+  Button,
+  TextField,
+  MenuItem,
+  InputLabel,
+  Select,
+  Container,
+  Slider,
+} from "@mui/material";
 
 function TeamChanger() {
-  
   return (
-  <>
-    <form>
-      <InputLabel htmlFor="teamInput">Team Name: </InputLabel>
-      <TextField type="text" id="teamInput" variant="filled" label="Team Name:" />
-      <InputLabel htmlFor="membersInput">Team Members: </InputLabel>
-      <TextField type="text" id="membersInput" variant="filled" label="Members:"/>      
-    </form>
-  </>
+    <>
+      <form>
+        <InputLabel htmlFor="teamInput">Team Name: </InputLabel>
+        <TextField
+          type="text"
+          id="teamInput"
+          variant="filled"
+          label="Team Name:"
+        />
+        <InputLabel htmlFor="membersInput">Team Members: </InputLabel>
+        <TextField
+          type="text"
+          id="membersInput"
+          variant="filled"
+          label="Members:"
+        />
+      </form>
+    </>
+  );
+}
+
+function TeamList() {
+  let teams = {
+    "team 1": ["tom", "eric", "gustav"],
+    "team 2": ["emma", "mari", "ida"],
+    "team 3": ["ola", "ole", "ost"],
+    "team 4": ["christine", "kristine", "kristhine"],
+  };
+  const [teamInput, setteamInput] = React.useState("");
+  const [membersInput, setmembersInput] = React.useState("");
+  React.useEffect(() => {
+    document.getElementById("teamInput").value = teamInput;
+    document.getElementById("membersInput").value = membersInput;
+  });
+  return (
+    <div>
+      <ul>
+        {Object.entries(teams).map(([team, players]) => (
+          <li key={team}>
+            <button
+              onClick={() => {
+                setteamInput(team);
+                setmembersInput(players);
+              }}
+            >
+              {team}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }