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

Introduces an infinite fetch gamenights loop

frontend/src/App.js

@@ -3,7 +3,8 @@ import './App.css';
 import React, { useState, useEffect } from 'react';
 import MenuBar from './components/MenuBar';
 import Login from './components/Login';
-import Gamenights from "./components/Gamenights"
+import Gamenights from './components/Gamenights'
+import AddGameNight from './components/AddGameNight'
 
 function App() {
 
@@ -32,6 +33,33 @@ function App() {
       });
   };
 
+  const handleAddGameNight = (input) => {
+    if (token !== null) {
+      const requestOptions = {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify(input)
+      };
+
+      fetch('api/gamenight', requestOptions)
+        .then(response => response.json())
+        .then(data => {
+          if(data.result !== "Ok") {
+            setFlashData({
+              type: "Error",
+              message: data.message
+            });
+          } else {
+            setToken(token);
+          }
+        });
+    }
+    
+  }
+
   const onLogout = () => {
     setUser(null);
     setToken(null);
@@ -56,7 +84,7 @@ function App() {
           }
         });
     }
-  }, [token]);
+  });
 
   if(token === null) {
     return (
@@ -66,10 +94,11 @@ function App() {
     );
   } else {
     return (
-      <div className="App">
+      <>
         <MenuBar user={user} onLogout={onLogout} />
+        <AddGameNight onChange={handleAddGameNight} />
         <Gamenights gamenights={gamenights} />
-      </div>
+      </>
     );
   }
 }

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>