resources/js/components/tournament/Detail.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Col, Container, Row } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import Scoreboard from './Scoreboard';
   7 import Protocol from '../protocol/Protocol';
   8 import Rounds from '../rounds/List';
   9 import Box from '../users/Box';
  10 import {
  11         mayAddRounds,
  12         mayViewProtocol,
  13 } from '../../helpers/permissions';
  14 import {
  15         getRunners,
  16         getTournamentAdmins,
  17         hasRunners,
  18         hasTournamentAdmins,
  19 } from '../../helpers/Tournament';
  20 import { withUser } from '../../helpers/UserContext';
  21 import i18n from '../../i18n';
  22
  23 const Detail = ({
  24         addRound,
  25         tournament,
  26         user,
  27 }) => <Container fluid>
  28         <Row>
  29                 <Col lg={8} xl={9}>
  30                         <div className="d-flex align-items-center justify-content-between">
  31                                 <h1>{tournament.title}</h1>
  32                                 {mayViewProtocol(user, tournament) ?
  33                                         <Protocol id={tournament.id} />
  34                                 : null}
  35                         </div>
  36                 </Col>
  37         </Row>
  38         <Row>
  39                 <Col lg={8} xl={9}>
  40                         <div className="d-flex align-items-center justify-content-between">
  41                                 <h2>{i18n.t('rounds.heading')}</h2>
  42                                 {addRound && mayAddRounds(user, tournament) ?
  43                                         <Button onClick={addRound}>
  44                                                 {i18n.t('rounds.new')}
  45                                         </Button>
  46                                 : null}
  47                         </div>
  48                         {tournament.rounds ?
  49                                 <Rounds rounds={tournament.rounds} tournament={tournament} />
  50                         : null}
  51                 </Col>
  52                 <Col lg={4} xl={3}>
  53                         <div className="d-flex align-items-center justify-content-between">
  54                                 <h2>{i18n.t('tournaments.scoreboard')}</h2>
  55                         </div>
  56                         {hasRunners(tournament) ?
  57                                 <Scoreboard tournament={tournament} />
  58                         : null}
  59                         {hasTournamentAdmins(tournament) ?
  60                                 <>
  61                                         <div className="d-flex align-items-center justify-content-between">
  62                                                 <h2>{i18n.t('tournaments.admins')}</h2>
  63                                         </div>
  64                                         {getTournamentAdmins(tournament).map(p =>
  65                                                 <p key={p.id}><Box user={p.user} /></p>
  66                                         )}
  67                                 </>
  68                         : null}
  69                 </Col>
  70         </Row>
  71 </Container>;
  72
  73 Detail.propTypes = {
  74         addRound: PropTypes.func,
  75         tournament: PropTypes.shape({
  76                 id: PropTypes.number,
  77                 participants: PropTypes.arrayOf(PropTypes.shape({
  78                 })),
  79                 rounds: PropTypes.arrayOf(PropTypes.shape({
  80                 })),
  81                 title: PropTypes.string,
  82         }),
  83         user: PropTypes.shape({
  84         }),
  85 };
  86
  87 export default withTranslation()(withUser(Detail));