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 Protocol from '../protocol/Protocol';
   8 import Rounds from '../rounds/List';
   9 import {
  10         mayAddRounds,
  11         mayViewProtocol,
  12 } from '../../helpers/permissions';
  13 import { withUser } from '../../helpers/UserContext';
  14 import i18n from '../../i18n';
  15
  16 const Detail = ({
  17         addRound,
  18         tournament,
  19         user,
  20 }) => <Container>
  21         <div className="d-flex align-items-center justify-content-between">
  22                 <h1>{tournament.title}</h1>
  23                 {mayViewProtocol(user, tournament) ?
  24                         <Protocol id={tournament.id} />
  25                 : null}
  26         </div>
  27         <div className="d-flex align-items-center justify-content-between">
  28                 <h2>{i18n.t('participants.heading')}</h2>
  29         </div>
  30         {tournament.participants ?
  31                 <Participants participants={tournament.participants} tournament={tournament} />
  32         : null}
  33         <div className="d-flex align-items-center justify-content-between">
  34                 <h2>{i18n.t('rounds.heading')}</h2>
  35                 {addRound && mayAddRounds(user, tournament) ?
  36                         <Button onClick={addRound}>
  37                                 {i18n.t('rounds.new')}
  38                         </Button>
  39                 : null}
  40         </div>
  41         {tournament.rounds ?
  42                 <Rounds rounds={tournament.rounds} tournament={tournament} />
  43         : null}
  44 </Container>;
  45
  46 Detail.propTypes = {
  47         addRound: PropTypes.func,
  48         tournament: PropTypes.shape({
  49                 id: PropTypes.number,
  50                 participants: PropTypes.arrayOf(PropTypes.shape({
  51                 })),
  52                 rounds: PropTypes.arrayOf(PropTypes.shape({
  53                 })),
  54                 title: PropTypes.string,
  55         }),
  56         user: PropTypes.shape({
  57         }),
  58 };
  59
  60 export default withTranslation()(withUser(Detail));