1 import axios from 'axios';
2 import React, { useEffect, useState } from 'react';
3 import { Helmet } from 'react-helmet';
4 import { useParams } from 'react-router-dom';
6 import ErrorBoundary from '../common/ErrorBoundary';
7 import ErrorMessage from '../common/ErrorMessage';
8 import Loading from '../common/Loading';
9 import NotFound from '../pages/NotFound';
10 import Detail from '../tournament/Detail';
19 } from '../../helpers/Tournament';
21 const Tournament = () => {
22 const params = useParams();
23 const { id } = params;
25 const [error, setError] = useState(null);
26 const [loading, setLoading] = useState(true);
27 const [tournament, setTournament] = useState(null);
30 const ctrl = new AbortController();
33 .get(`/api/tournaments/${id}`, { signal: ctrl.signal })
37 setTournament(sortParticipants(response.data));
50 window.Echo.channel(`Tournament.${id}`)
51 .listen('ApplicationAdded', e => {
53 setTournament(tournament => patchApplication(tournament, e.application));
56 .listen('ApplicationChanged', e => {
58 setTournament(tournament => patchApplication(tournament, e.application));
61 .listen('ApplicationRemoved', e => {
62 if (e.application_id) {
63 setTournament(tournament => removeApplication(tournament, e.application_id));
66 .listen('ParticipantChanged', e => {
69 setTournament(tournament => patchParticipant(tournament, e.participant));
72 .listen('ResultChanged', e => {
74 setTournament(tournament => patchResult(tournament, e.result));
77 .listen('RoundAdded', e => {
79 setTournament(tournament => ({
81 rounds: [e.round, ...tournament.rounds],
85 .listen('RoundChanged', e => {
87 setTournament(tournament => patchRound(tournament, e.round));
90 .listen('TournamentChanged', e => {
92 setTournament(tournament => ({ ...tournament, ...e.tournament }));
96 window.Echo.leave(`Tournament.${id}`);
103 setTournament(tournament => patchUser(tournament, e.user));
106 window.Echo.channel('App.Control')
107 .listen('UserChanged', cb);
109 window.Echo.channel('App.Control')
110 .stopListening('UserChanged', cb);
119 return <ErrorMessage error={error} />;
126 const addRound = async () => {
127 await axios.post('/api/rounds', { tournament_id: tournament.id });
130 return <ErrorBoundary>
132 <title>{tournament.title}</title>
134 <Detail addRound={addRound} tournament={tournament} />
138 export default Tournament;