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));