Adds an add gamenight control and fixes the fetch gamenight Effect,

Introduces an infinite fetch gamenights loop

frontend/src/components/AddGameNight.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+
+function AddGameNight(props) {
+  const [expanded, setExpanded] = useState(false);
+  const [gameName, setGameName] = useState("");
+  const [date, setDate] = useState(null);
+
+  const handleAddGamenight = (event) => {
+    props.onChange({
+      game: gameName,
+      datetime: date
+    });
+    event.preventDefault();
+  };
+
+  const handleNameChange = (event) => {
+    setGameName(event.target.value);
+  };
+
+  const handleDateChange = (event) => {
+    setDate(event.target.value);
+  };
+
+  if(expanded) {
+    return (
+      <div className="Add-GameNight">
+        <form onSubmit={handleAddGamenight}>
+          <fieldset>
+            <legend>Gamenight</legend>
+  
+            <label for="gamename">Game name:</label>
+            <input id="gamename" name="gamename" type="text"
+              value={gameName}
+              onChange={handleNameChange} />
+            <label for="date">date:</label>
+            <input id="date" name="date" type="date"
+              value={date}
+              onChange={handleDateChange} />
+  
+            <input type="submit" value="Submit" />
+          </fieldset>
+        </form>
+        <button onClick={() => {setExpanded(false)}}>Expand</button>
+      </div>        
+    );
+  } else {
+    return (
+      <button onClick={() => {setExpanded(true)}}>Expand</button>
+    );
+  }
+}
+
+export default AddGameNight

frontend/src/components/Gamenights.jsx

@@ -2,10 +2,14 @@ import React from 'react';
 
 function Gamenights(props) {
 
+  console.log(props.gamenights);
+
   let gamenights = props.gamenights.map(g => 
-    (<li>{g.name}</li>)
+    (<li>{g.game}</li>)
   );
 
+  console.log(gamenights);
+
   return (
     <ul>
       {gamenights}

frontend/src/components/Login.jsx

@@ -6,16 +6,16 @@ function Login(props) {
 
   const handleUsernameChange = (event) => {
     setUsername(event.target.value);
-  }
+  };
 
   const handlePasswordChange = (event) => {
     setPassword(event.target.value);
-  }
+  };
 
   const handleLogin = (event) => {
-    props.onChange({ username: this.state.username, password: this.state.password });
+    props.onChange({ username: username, password: password });
     event.preventDefault();
-  }
+  };
 
   return (
     <div className="Login-Component">

frontend/src/components/MenuBar.jsx

@@ -7,7 +7,7 @@ function MenuBar(props) {
         <a>Gamenight</a>
       </li>
       <li>
-        <a>User</a>
+        <a>User: {props.user}</a>
       </li>
       <li>
         <button onClick={props.onLogout}>Logout</button>