Adds a details page for a single gamenight.

frontend/src/App.js

@@ -50,6 +50,10 @@ function App() {
     setUser({...user});
   };
 
+  const dismissActiveGamenight = () => {
+    setActiveGamenight(null);
+  };
+
   useEffect(() => {
     if (user !== null) {
       const requestOptions = {
@@ -116,12 +120,12 @@ function App() {
           setFlash={setFlash}
           refetchGamenights={refetchGamenights}
           gamenights={gamenights}
-          setActiveGamenight={setActiveGamenight}/>
+          onSelectGamenight={(g) => setActiveGamenight(g)}/>
       </>
     } else {
       mainview = <Gamenight
         gamenight={activeGamenight}
-        onDismis={setActiveGamenight}
+        onDismis={dismissActiveGamenight}
       />
     }
 

frontend/src/components/AddGameNight.jsx

@@ -2,21 +2,13 @@ import React, { useEffect, useState } from 'react';
 import DateTime from 'react-datetime';
 import GameAdder from './GameAdder';
 
-import Autocomplete from '@mui/material/Autocomplete';
-
 import "react-datetime/css/react-datetime.css";
 
 function AddGameNight(props) {
   const [expanded, setExpanded] = useState(false);
   const [gameName, setGameName] = useState("");
   const [date, setDate] = useState(Date.now());
-  const [gameList, setGameList] = useState([]); 
-  
-  const emptyUuid = "00000000-0000-0000-0000-000000000000";
-
-  //temp hack: 
-  props.games = [{id: emptyUuid, name: "mystic vale"}, {id: emptyUuid, name: "Crew"}];
-
+  const [gameList, setGameList] = useState([]);
 
   const handleNameChange = (event) => {
     setGameName(event.target.value);

frontend/src/components/Gamenight.jsx

@@ -1,26 +1,38 @@
 import * as React from 'react';
 
 function Gamenight(props) {
-
     console.log(props.gamenight);
 
     let games = props.gamenight.game_list.map(g =>
-        (
-          <li>
-            <span>{g.name}</span>
-          </li>
-        )
-      );
+      (
+        <li>
+          <span>{g.name}</span>
+        </li>
+      )
+    );
+
+    let participants = props.gamenight.participants.map(p =>
+      (
+        <li>
+          <span>{p.username}</span>
+        </li>
+      )
+    )
 
     return (
-    <div>
-      <button onClick={props.onDismis(null)}>x</button>
-      <h3>{props.gamenight.name}</h3>
-      <span>{props.gamenight.datetime}</span>
-      <ul>
-        {games}
-      </ul>
-    </div>
+      <div>
+        <h3>{props.gamenight.name}</h3>
+        <button onClick={(e) => props.onDismis()}>x</button>
+        <span>{props.gamenight.datetime}</span>
+        <h4>Games:</h4>
+        <ul>
+          {games}
+        </ul>
+        <h4>Participants:</h4>
+        <ul>
+          {participants}
+        </ul>
+      </div>
     )
 }
 

frontend/src/components/Gamenights.jsx

@@ -29,16 +29,14 @@ function Gamenights(props) {
         })
         .then(() => props.refetchGamenights());
     }
-  }  
+  }
 
   let gamenights = props.gamenights.map(g =>
     (
-      <li onClick={(e) => {console.log(g); props.setActiveGamenight(g);}}>
+      <li onClick={(e) => props.onSelectGamenight(g)}>
         <span>{g.name}</span>
         {(props.user.id === g.owner_id || props.user.role === "Admin") && 
-          <button onClick={() =>DeleteGameNight(g.id, g.owner)}>
-            x
-          </button>
+          <button onClick={() =>DeleteGameNight(g.id, g.owner)}>x</button>
         }
       </li>
     )