Adds a details page for a single gamenight.

backend/src/api.rs

@@ -137,6 +137,7 @@ pub struct GamenightOutput {
     #[serde(flatten)]
     gamenight: Gamenight,
     game_list: Vec<Game>,
+    participants: Vec<User>,
 }
 
 #[get("/gamenights")]
@@ -150,12 +151,15 @@ pub async fn gamenights(conn: DbConn, _user: User) -> ApiResponseVariant {
 
     let game_results : Result<Vec<GamenightOutput>, DatabaseError> = join_all(gamenights.iter().map(|gn| async move {
         let games = get_games_of_gamenight(conn_ref, gn.id).await?;
+        let participants = load_participants(conn_ref, gn.id).await?;
         Ok(GamenightOutput{
             gamenight: gn.clone(),
-            game_list: games
+            game_list: games,
+            participants: participants,
         })
     })).await.into_iter().collect();
 
+
     match game_results {
         Ok(result) => ApiResponseVariant::Value(json!(ApiResponse::gamenight_response(result))),
         Err(err) => ApiResponseVariant::Value(json!(ApiResponse::error(err.to_string())))
@@ -338,7 +342,7 @@ pub async fn games_unauthorized() -> ApiResponseVariant {
 
 #[get("/participants", format = "application/json", data = "<gamenight_id_json>")]
 pub async fn get_participants(conn: DbConn, _user: User, gamenight_id_json: Json<GamenightId>) -> ApiResponseVariant {
-    match load_participants(&conn, gamenight_id_json.into_inner()).await {
+    match load_participants(&conn, gamenight_id_json.into_inner().gamenight_id).await {
         Ok(_) => ApiResponseVariant::Value(json!(ApiResponse::SUCCES)),
         Err(error) => ApiResponseVariant::Value(json!(ApiResponse::error(error.to_string()))),
     }

backend/src/schema/gamenight.rs

@@ -1,3 +1,4 @@
+use crate::schema::users::{users, User};
 use crate::schema::{DatabaseError, DbConn};
 use diesel::{Connection, ExpressionMethods, QueryDsl, RunQueryDsl};
 use serde::{Deserialize, Serialize};
@@ -160,12 +161,17 @@ pub async fn add_unknown_games(conn: &DbConn, games: &mut Vec<Game>) -> Result<(
     Ok(())
 }
 
-pub async fn load_participants(conn: &DbConn, gamenight_id: GamenightId) -> Result<Vec<GamenightParticipantsEntry>, DatabaseError> {
+pub async fn load_participants(conn: &DbConn, gamenight_id: Uuid) -> Result<Vec<User>, DatabaseError> {
     Ok(conn
-        .run(move |c| {
-            gamenight_participants::table
-                .filter(gamenight_participants::gamenight_id.eq(gamenight_id.gamenight_id))
-                .load::<GamenightParticipantsEntry>(c)
+        .run::<_, Result<Vec<User>, _>>(move |c| {
+            let linked_participants = gamenight_participants::table
+                .filter(gamenight_participants::gamenight_id.eq(gamenight_id))
+                .load::<GamenightParticipantsEntry>(c)?;
+            linked_participants.iter().map(|l| {
+                users::table
+                    .filter(users::id.eq(l.user_id))
+                    .first::<User>(c)
+            }).collect()
         })
         .await?)
 }

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>
     )