Adds the ability to join or leave a gamenight.

frontend/src/App.js

@@ -15,7 +15,7 @@ function App() {
   const [gamenights, setGamenights] = useState([]);
   const [flashData, setFlashData] = useState({});
   const [games, setGames] = useState([]);
-  const [activeGamenight, setActiveGamenight] = useState(null);
+  const [activeGamenightId, setActiveGamenightId] = useState(null);
 
   const POST_HEADER = {'Content-Type': 'application/json'};
   const AUTH_HEADER = {'Authorization': `Bearer ${user?.jwt}`};
@@ -42,7 +42,7 @@ function App() {
   };
 
   const dismissActiveGamenight = () => {
-    setActiveGamenight(null);
+    setActiveGamenightId(null);
   };
 
   useEffect(() => {
@@ -72,7 +72,7 @@ function App() {
     );
   } else {
     let mainview;
-    if(activeGamenight === null) {
+    if(activeGamenightId === null) {
       mainview = (
         <Gamenights 
           user={user}
@@ -80,13 +80,15 @@ function App() {
           setFlash={setFlash}
           refetchGamenights={refetchGamenights}
           gamenights={gamenights}
-          onSelectGamenight={(g) => setActiveGamenight(g)}/>
+          onSelectGamenight={(g) => setActiveGamenightId(g.id)}/>
       )
     } else {
       mainview = (
       <Gamenight
-        gamenight={activeGamenight}
+        gamenightId={activeGamenightId}
         onDismis={dismissActiveGamenight}
+        setFlash={setFlash}
+        user={user}
       />)
     }
 

frontend/src/api/Api.js

@@ -28,6 +28,15 @@ export function get_gamenights(token) {
   });
 }
 
+export function get_gamenight(gamenight_id, token) {
+  return fetchResource(`api/gamenights/${gamenight_id}`, {
+    method: 'GET',
+    headers: {
+      'Authorization': `Bearer ${token}`
+    },
+  });
+}
+
 export function post_gamenight(input, token) {
   return fetchResource('api/gamenights', {
     method: 'POST',
@@ -39,6 +48,17 @@ export function post_gamenight(input, token) {
   });
 }
 
+export function patch_gamenight(gamenight_id, input, token) {
+  return fetchResource(`api/gamenights/${gamenight_id}`, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`
+    },
+    body: JSON.stringify(input)
+  })
+}
+
 export function delete_gamenight(input, token) {
   return fetchResource('api/gamenights', {
     method: 'DELETE',

frontend/src/api/FetchResource.js

@@ -21,9 +21,7 @@ function ApiError(message, data, status) {
 
 const fetchResource = (path, userOptions = {}) => {
   const defaultOptions = {};
-  const defaultHeaders = {
-    'Content-Type': 'application/json'
-  };
+  const defaultHeaders = {};
 
   const options = {
     ...defaultOptions,

frontend/src/components/Gamenight.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
@@ -6,15 +6,26 @@ import ListSubheader from '@mui/material/ListSubheader';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
 
 import moment from 'moment';
-
+import {unpack_api_result, get_gamenight, patch_gamenight} from '../api/Api';
 
 function Gamenight(props) {
 
   const [dense, setDense] = useState(true);
+  const [gamenight, setGamenight] = useState(null);
 
-  let games = props.gamenight.game_list.map(g =>
+  const fetchGamenight = () => {
+    if (props.user !== null) {
+      unpack_api_result(get_gamenight(props.gamenightId, props.user.jwt), props.setFlash)
+        .then(result => setGamenight(result.gamenight));
+    }
+  }
+
+  useEffect(fetchGamenight, []);
+
+  let games = gamenight?.game_list.map(g =>
     (
       <ListItem>
         <ListItemText
@@ -24,7 +35,7 @@ function Gamenight(props) {
     )
   );
 
-  let participants = props.gamenight.participants.map(p =>
+  const participants = gamenight?.participants.map(p =>
     (
       <ListItem>
         <ListItemText
@@ -32,7 +43,46 @@ function Gamenight(props) {
         />
       </ListItem>
     )
-  )
+  );
+
+  const Join = () => {
+    const input = {
+      action: 'AddParticipant'
+    };
+    
+    unpack_api_result(patch_gamenight(gamenight.id, input, props.user.jwt), props.setFlash)
+      .then(() => fetchGamenight());
+  };
+
+  const Leave = () => {
+    const input = {
+      action: 'RemoveParticipant',
+    };
+
+    unpack_api_result(patch_gamenight(gamenight.id, input, props.user.jwt), props.setFlash)
+      .then(() => fetchGamenight());
+  };
+
+  let join_or_leave_button;
+  if(gamenight?.participants.find(p => p.id === props.user.id) === undefined) {
+    join_or_leave_button = (
+      <Button 
+        variant="outlined"
+        color="success"
+        onClick={Join}>
+        Join
+      </Button>
+    )
+  } else {
+    join_or_leave_button = (
+      <Button 
+        variant="outlined"
+        color="error"
+        onClick={Leave}>
+        Leave
+      </Button>
+    )
+  }
 
   return (
     <div>
@@ -43,10 +93,10 @@ function Gamenight(props) {
       </IconButton>
 
       <Typography type="h3">
-        {props.gamenight.name}
+        {gamenight?.name}
       </Typography>
       <Typography type="body1">
-        When: {moment(props.gamenight.datetime).format('LL HH:mm')}
+        When: {moment(gamenight?.datetime).format('LL HH:mm')}
       </Typography>
 
       <List 
@@ -69,6 +119,7 @@ function Gamenight(props) {
         }>
         {participants}
       </List>
+      {join_or_leave_button}
     </div>
   )
 }