Gamenights also return their game list.

frontend/src/App.js

@@ -2,8 +2,9 @@ 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 AddGameNight from './components/AddGameNight'
+import Gamenights from './components/Gamenights';
+import AddGameNight from './components/AddGameNight';
+import Gamenight from './components/Gamenight';
 
 const localStorageUserKey = 'user';
 
@@ -13,6 +14,7 @@ function App() {
   const [gamenights, setGamenights] = useState([]);
   const [flashData, setFlashData] = useState({});
   const [games, setGames] = useState([]);
+  const [activeGamenight, setActiveGamenight] = useState(null);
 
   const handleLogin = (input) => {
     const requestOptions = {
@@ -94,6 +96,9 @@ function App() {
     setUser(JSON.parse(localStorage.getItem(localStorageUserKey)));
   }, []);
 
+
+  console.log(activeGamenight);
+
   if(user === null) {
     return (
       <div className="App">
@@ -101,11 +106,29 @@ function App() {
       </div>
     );
   } else {
+
+    let mainview;
+    if(activeGamenight === null) {
+      mainview = <>
+        <AddGameNight user={user} games={games} setFlash={setFlash} refetchGamenights={refetchGamenights} />
+        <Gamenights 
+          user={user}
+          setFlash={setFlash}
+          refetchGamenights={refetchGamenights}
+          gamenights={gamenights}
+          setActiveGamenight={setActiveGamenight}/>
+      </>
+    } else {
+      mainview = <Gamenight
+        gamenight={activeGamenight}
+        onDismis={setActiveGamenight}
+      />
+    }
+
     return (
       <>
         <MenuBar user={user} onLogout={onLogout} />
-        <AddGameNight user={user} games={games} setFlash={setFlash} refetchGamenights={refetchGamenights} />
-        <Gamenights user={user} setFlash={setFlash} refetchGamenights={refetchGamenights} gamenights={gamenights} />
+        {mainview}
       </>
     );
   }

frontend/src/components/Gamenight.jsx

@@ -0,0 +1,27 @@
+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>
+        )
+      );
+
+    return (
+    <div>
+      <button onClick={props.onDismis(null)}>x</button>
+      <h3>{props.gamenight.name}</h3>
+      <span>{props.gamenight.datetime}</span>
+      <ul>
+        {games}
+      </ul>
+    </div>
+    )
+}
+
+export default Gamenight

frontend/src/components/Gamenights.jsx

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