1 import axios from 'axios';
2 import React, { useEffect, useState } from 'react';
3 import { useParams } from 'react-router-dom';
5 import ErrorBoundary from '../common/ErrorBoundary';
6 import ErrorMessage from '../common/ErrorMessage';
7 import Loading from '../common/Loading';
8 import NotFound from '../pages/NotFound';
9 import Detail from '../tournament/Detail';
10 import { patchResult, patchRound, patchUser, sortParticipants } from '../../helpers/Tournament';
12 const Tournament = () => {
13 const params = useParams();
14 const { id } = params;
16 const [error, setError] = useState(null);
17 const [loading, setLoading] = useState(true);
18 const [tournament, setTournament] = useState(null);
23 .get(`/api/tournaments/${id}`)
27 setTournament(sortParticipants(response.data));
37 window.Echo.channel(`Tournament.${id}`)
38 .listen('ResultReported', e => {
40 setTournament(tournament => patchResult(tournament, e.result));
43 .listen('RoundAdded', e => {
45 setTournament(tournament => ({
47 rounds: [e.round, ...tournament.rounds],
51 .listen('RoundChanged', e => {
53 setTournament(tournament => patchRound(tournament, e.round));
56 .listen('TournamentChanged', e => {
58 setTournament(tournament => ({ ...tournament, ...e.tournament }));
62 window.Echo.leave(`Tournament.${id}`);
69 setTournament(tournament => patchUser(tournament, e.user));
72 window.Echo.channel('App.Control')
73 .listen('UserChanged', cb);
75 window.Echo.channel('App.Control')
76 .stopListening('UserChanged', cb);
85 return <ErrorMessage error={error} />;
92 const addRound = async () => {
93 await axios.post('/api/rounds', { tournament_id: tournament.id });
96 return <ErrorBoundary>
97 <Detail addRound={addRound} tournament={tournament} />
101 export default Tournament;