128 lines
3.0 KiB
JavaScript
128 lines
3.0 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import List from '@mui/material/List';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
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);
|
|
|
|
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
|
|
primary={g.name}
|
|
/>
|
|
</ListItem>
|
|
)
|
|
);
|
|
|
|
const participants = gamenight?.participants.map(p =>
|
|
(
|
|
<ListItem>
|
|
<ListItemText
|
|
primary={p.username}
|
|
/>
|
|
</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>
|
|
<IconButton
|
|
aria-label="back"
|
|
onClick={(e) => props.onDismis()}>
|
|
<ArrowBackIcon />
|
|
</IconButton>
|
|
|
|
<Typography type="h3">
|
|
{gamenight?.name}
|
|
</Typography>
|
|
<Typography type="body1">
|
|
When: {moment(gamenight?.datetime).format('LL HH:mm')}
|
|
</Typography>
|
|
|
|
<List
|
|
dense={dense}
|
|
aria-labelledby="games-subheader"
|
|
subheader={
|
|
<ListSubheader component="div" id="games-subheader">
|
|
Games:
|
|
</ListSubheader>
|
|
}>
|
|
{games}
|
|
</List>
|
|
<List
|
|
dense={dense}
|
|
aria-labelledby="participants-subheader"
|
|
subheader={
|
|
<ListSubheader component="div" id="participants-subheader">
|
|
Participants:
|
|
</ListSubheader>
|
|
}>
|
|
{participants}
|
|
</List>
|
|
{join_or_leave_button}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Gamenight
|