Fixes the infinite loop and refactores some statechanges into useEffect hooks

frontend/src/App.js

@@ -1,4 +1,3 @@
-import logo from './logo.svg';
 import './App.css';
 import React, { useState, useEffect } from 'react';
 import MenuBar from './components/MenuBar';
@@ -6,10 +5,11 @@ import Login from './components/Login';
 import Gamenights from './components/Gamenights'
 import AddGameNight from './components/AddGameNight'
 
+const localStorageUserKey = 'user';
+
 function App() {
 
   const [user, setUser] = useState(null);
-  const [token, setToken] = useState(null);
   const [gamenights, setGamenights] = useState([]);
   const [flashData, setFlashData] = useState({});
 
@@ -23,7 +23,8 @@ function App() {
       .then(response => response.json())
       .then(data => {
         if(data.result === "Ok") {
-          setToken(data.jwt);
+          setUser(data.user);
+          localStorage.setItem(localStorageUserKey, JSON.stringify(data.user));
         } else {
           setFlashData({
             type: "Error",
@@ -34,17 +35,17 @@ function App() {
   };
 
   const handleAddGameNight = (input) => {
-    if (token !== null) {
+    if (user !== null) {
       const requestOptions = {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`
+          'Authorization': `Bearer ${user.jwt}`
         },
         body: JSON.stringify(input)
       };
 
-      fetch('api/gamenight', requestOptions)
+      return fetch('api/gamenight', requestOptions)
         .then(response => response.json())
         .then(data => {
           if(data.result !== "Ok") {
@@ -52,24 +53,25 @@ function App() {
               type: "Error",
               message: data.message
             });
+            return false;
           } else {
-            setToken(token);
+            setUser({ ...user });
+            return true;
           }
-        });
+        })
     }
-    
-  }
+  };
 
   const onLogout = () => {
     setUser(null);
-    setToken(null);
-  }
+    localStorage.removeItem(localStorageUserKey);
+  };
 
   useEffect(() => {
-    if (token !== null) {
+    if (user !== null) {
       const requestOptions = {
         method: 'GET',
-        headers: { 'Authorization': `Bearer ${token}` },
+        headers: { 'Authorization': `Bearer ${user.jwt}` },
       };
       fetch('api/gamenights', requestOptions)
         .then(response => response.json())
@@ -84,9 +86,13 @@ function App() {
           }
         });
     }
-  });
+  }, [user])
 
-  if(token === null) {
+  useEffect(() => {
+    setUser(JSON.parse(localStorage.getItem(localStorageUserKey)));
+  }, []);
+
+  if(user === null) {
     return (
       <div className="App">
         <Login onChange={handleLogin}/>

frontend/src/components/AddGameNight.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 function AddGameNight(props) {
   const [expanded, setExpanded] = useState(false);
@@ -9,6 +9,12 @@ function AddGameNight(props) {
     props.onChange({
       game: gameName,
       datetime: date
+    }).then((result) => {
+      if(result) {
+        setExpanded(false);
+        setGameName("");
+        setDate(null);
+      }
     });
     event.preventDefault();
   };
@@ -21,6 +27,13 @@ function AddGameNight(props) {
     setDate(event.target.value);
   };
 
+  useEffect(() => {
+    if(!expanded) {
+      setGameName("");
+      setDate(null);
+    }
+  }, [expanded]);
+
   if(expanded) {
     return (
       <div className="Add-GameNight">
@@ -32,20 +45,20 @@ function AddGameNight(props) {
             <input id="gamename" name="gamename" type="text"
               value={gameName}
               onChange={handleNameChange} />
-            <label for="date">date:</label>
-            <input id="date" name="date" type="date"
+            <label for="datetime">date:</label>
+            <input id="datetime" name="datetime" type="datetime-local"
               value={date}
               onChange={handleDateChange} />
   
             <input type="submit" value="Submit" />
           </fieldset>
         </form>
-        <button onClick={() => {setExpanded(false)}}>Expand</button>
+        <button onClick={() => setExpanded(false)}>Discard</button>
       </div>        
     );
   } else {
     return (
-      <button onClick={() => {setExpanded(true)}}>Expand</button>
+      <button onClick={() => setExpanded(true)}>Expand</button>
     );
   }
 }

frontend/src/components/Gamenights.jsx

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

frontend/src/components/MenuBar.jsx

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