]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/tournament/Detail.js
60c9d245716439653296fea58decc6659f4b8ae8
[alttp.git] / resources / js / components / tournament / Detail.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button, Container } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
5
6 import Participants from '../participants/List';
7 import Rounds from '../rounds/List';
8 import { mayAddRounds } from '../../helpers/permissions';
9 import { withUser } from '../../helpers/UserContext';
10 import i18n from '../../i18n';
11
12 const Detail = ({
13         addRound,
14         tournament,
15         user,
16 }) => <Container>
17         <div className="d-flex align-items-center justify-content-between">
18                 <h1>{tournament.title}</h1>
19         </div>
20         <div className="d-flex align-items-center justify-content-between">
21                 <h2>{i18n.t('participants.heading')}</h2>
22         </div>
23         {tournament.participants ?
24                 <Participants participants={tournament.participants} tournament={tournament} />
25         : null}
26         <div className="d-flex align-items-center justify-content-between">
27                 <h2>{i18n.t('rounds.heading')}</h2>
28                 {addRound && mayAddRounds(user, tournament) ?
29                         <Button onClick={addRound}>
30                                 {i18n.t('rounds.new')}
31                         </Button>
32                 : null}
33         </div>
34         {tournament.rounds ?
35                 <Rounds rounds={tournament.rounds} tournament={tournament} />
36         : null}
37 </Container>;
38
39 Detail.propTypes = {
40         addRound: PropTypes.func,
41         tournament: PropTypes.shape({
42                 participants: PropTypes.arrayOf(PropTypes.shape({
43                 })),
44                 rounds: PropTypes.arrayOf(PropTypes.shape({
45                 })),
46                 title: PropTypes.string,
47         }),
48         user: PropTypes.shape({
49         }),
50 };
51
52 export default withTranslation()(withUser(Detail));