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

Introduces an infinite fetch gamenights loop

frontend/package-lock.json

@@ -17,6 +17,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "dotenv-cli": "^5.1.0",
         "npm-watch": "^0.11.0"
       }
     },
@@ -6441,6 +6442,39 @@
         "node": ">=10"
       }
     },
+    "node_modules/dotenv-cli": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-5.1.0.tgz",
+      "integrity": "sha512-NoEZAlKo9WVrG0b3i9mBxdD6INdDuGqdgR74t68t8084QcI077/1MnPerRW1odl+9uULhcdnQp2U0pYVppKHOA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "dotenv": "^16.0.0",
+        "dotenv-expand": "^8.0.1",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "dotenv": "cli.js"
+      }
+    },
+    "node_modules/dotenv-cli/node_modules/dotenv": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
+      "integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dotenv-cli/node_modules/dotenv-expand": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.3.tgz",
+      "integrity": "sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
@@ -21378,6 +21412,32 @@
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
       "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
     },
+    "dotenv-cli": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-5.1.0.tgz",
+      "integrity": "sha512-NoEZAlKo9WVrG0b3i9mBxdD6INdDuGqdgR74t68t8084QcI077/1MnPerRW1odl+9uULhcdnQp2U0pYVppKHOA==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.3",
+        "dotenv": "^16.0.0",
+        "dotenv-expand": "^8.0.1",
+        "minimist": "^1.2.5"
+      },
+      "dependencies": {
+        "dotenv": {
+          "version": "16.0.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
+          "integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==",
+          "dev": true
+        },
+        "dotenv-expand": {
+          "version": "8.0.3",
+          "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.3.tgz",
+          "integrity": "sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==",
+          "dev": true
+        }
+      }
+    },
     "dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",

frontend/package.json

@@ -40,6 +40,7 @@
     ]
   },
   "devDependencies": {
+    "dotenv-cli": "^5.1.0",
     "npm-watch": "^0.11.0"
   }
 }

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>