Added gamenight owners and some ui and api functions to delete gamenights.

frontend/package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "moment": "^2.29.3",
+    "react": "^18.1.0",
+    "react-datetime": "^3.1.1",
+    "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.js

@@ -34,39 +34,19 @@ function App() {
       });
   };
 
-  const handleAddGameNight = (input) => {
-    if (user !== null) {
-      const requestOptions = {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${user.jwt}`
-        },
-        body: JSON.stringify(input)
-      };
-
-      return fetch('api/gamenight', requestOptions)
-        .then(response => response.json())
-        .then(data => {
-          if(data.result !== "Ok") {
-            setFlashData({
-              type: "Error",
-              message: data.message
-            });
-            return false;
-          } else {
-            setUser({ ...user });
-            return true;
-          }
-        })
-    }
-  };
-
   const onLogout = () => {
     setUser(null);
     localStorage.removeItem(localStorageUserKey);
   };
 
+  const setFlash = (data) => {
+    setFlashData(data);
+  };
+
+  const refetchGamenights = () => {
+    setUser({...user});
+  };
+
   useEffect(() => {
     if (user !== null) {
       const requestOptions = {
@@ -102,8 +82,8 @@ function App() {
     return (
       <>
         <MenuBar user={user} onLogout={onLogout} />
-        <AddGameNight onChange={handleAddGameNight} />
-        <Gamenights gamenights={gamenights} />
+        <AddGameNight user={user} setFlash={setFlash} refetchGamenights={refetchGamenights} />
+        <Gamenights user={user} setFlash={setFlash} refetchGamenights={refetchGamenights} gamenights={gamenights} />
       </>
     );
   }

frontend/src/components/AddGameNight.jsx

@@ -1,23 +1,12 @@
 import React, { useEffect, useState } from 'react';
+import DateTime from 'react-datetime';
+
+import "react-datetime/css/react-datetime.css";
 
 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
-    }).then((result) => {
-      if(result) {
-        setExpanded(false);
-        setGameName("");
-        setDate(null);
-      }
-    });
-    event.preventDefault();
-  };
+  const [date, setDate] = useState(Date.now());
 
   const handleNameChange = (event) => {
     setGameName(event.target.value);
@@ -34,10 +23,46 @@ function AddGameNight(props) {
     }
   }, [expanded]);
 
+  const handleAddGamenight = (event) => {
+    event.preventDefault();
+    if (props.user !== null) {
+      let input = {
+        game: gameName,
+        datetime: date,
+      }
+
+      const requestOptions = {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${props.user.jwt}`
+        },
+        body: JSON.stringify(input)
+      };
+
+      fetch('api/gamenight', requestOptions)
+        .then(response => response.json())
+        .then(data => {
+          if(data.result !== "Ok") {
+            props.setFlash({
+              type: "Error",
+              message: data.message
+            });
+          } else {
+            setExpanded(false);
+            setGameName("");
+            setDate(null);
+          }
+        })
+        .then(() => props.refetchGamenights())
+    }
+    
+  };
+
   if(expanded) {
     return (
       <div className="Add-GameNight">
-        <form onSubmit={handleAddGamenight}>
+        <form>
           <fieldset>
             <legend>Gamenight</legend>
   
@@ -46,11 +71,9 @@ function AddGameNight(props) {
               value={gameName}
               onChange={handleNameChange} />
             <label for="datetime">date:</label>
-            <input id="datetime" name="datetime" type="datetime-local"
-              value={date}
-              onChange={handleDateChange} />
+            <DateTime id="datetime" onChange={(value) => { setDate(value) }} value={date} />
   
-            <input type="submit" value="Submit" />
+            <button onClick={handleAddGamenight}>Submit</button>
           </fieldset>
         </form>
         <button onClick={() => setExpanded(false)}>Discard</button>

frontend/src/components/Gamenights.jsx

@@ -2,8 +2,46 @@ import React from 'react';
 
 function Gamenights(props) {
 
-  let gamenights = props.gamenights.map(g => 
-    (<li>{g.game}</li>)
+  const DeleteGameNight = (gameId) => {
+    if (props.user !== null) {
+      let input = {
+        game_id: gameId,
+      }
+  
+      const requestOptions = {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${props.user.jwt}`
+        },
+        body: JSON.stringify(input)
+      };
+  
+      fetch('api/gamenight', requestOptions)
+        .then(response => response.json())
+        .then(data => {
+          if(data.result !== "Ok") {
+            props.setFlash({
+              type: "Error",
+              message: data.message
+            });
+          }
+        })
+        .then(() => props.refetchGamenights());
+    }
+  }  
+
+  let gamenights = props.gamenights.map(g =>
+    (
+      <li>
+        <span>{g.game}</span>
+        {(props.user.id === g.owner_id || props.user.role === "Admin") && 
+          <button onClick={() =>DeleteGameNight(g.id, g.owner)}>
+            x
+          </button>
+        }
+      </li>
+    )
   );
 
   return (