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';
18 } from '../../helpers/Tournament';
20 const Tournament = () => {
21 const params = useParams();
22 const { id } = params;
24 const [error, setError] = useState(null);
25 const [loading, setLoading] = useState(true);
26 const [tournament, setTournament] = useState(null);
31 .get(`/api/tournaments/${id}`)
35 setTournament(sortParticipants(response.data));
36 window.document.title = response.data.title;
46 window.Echo.channel(`Tournament.${id}`)
47 .listen('ApplicationAdded', e => {
49 setTournament(tournament => patchApplication(tournament, e.application));
52 .listen('ApplicationChanged', e => {
54 setTournament(tournament => patchApplication(tournament, e.application));
57 .listen('ApplicationRemoved', e => {
58 if (e.application_id) {
59 setTournament(tournament => removeApplication(tournament, e.application_id));
62 .listen('ParticipantChanged', e => {
65 setTournament(tournament => patchParticipant(tournament, e.participant));
68 .listen('ResultChanged', e => {
70 setTournament(tournament => patchResult(tournament, e.result));
73 .listen('RoundAdded', e => {
75 setTournament(tournament => ({
77 rounds: [e.round, ...tournament.rounds],
81 .listen('RoundChanged', e => {
83 setTournament(tournament => patchRound(tournament, e.round));
86 .listen('TournamentChanged', e => {
88 setTournament(tournament => ({ ...tournament, ...e.tournament }));
92 window.Echo.leave(`Tournament.${id}`);
99 setTournament(tournament => patchUser(tournament, e.user));
102 window.Echo.channel('App.Control')
103 .listen('UserChanged', cb);
105 window.Echo.channel('App.Control')
106 .stopListening('UserChanged', cb);
115 return <ErrorMessage error={error} />;
122 const addRound = async () => {
123 await axios.post('/api/rounds', { tournament_id: tournament.id });
126 return <ErrorBoundary>
127 <Detail addRound={addRound} tournament={tournament} />
131 export default Tournament;