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 {
  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 fluid>
  21         <Row>
  22                 <Col lg={8} xl={9}>
  23                         <div className="d-flex align-items-center justify-content-between">
  24                                 <h1>{tournament.title}</h1>
  25                                 {mayViewProtocol(user, tournament) ?
  26                                         <Protocol id={tournament.id} />
  27                                 : null}
  28                         </div>
  29                 </Col>
  30         </Row>
  31         <Row>
  32                 <Col lg={8} xl={9}>
  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                 </Col>
  45                 <Col lg={4} xl={3}>
  46                         <div className="d-flex align-items-center justify-content-between">
  47                                 <h2>{i18n.t('tournaments.scoreboard')}</h2>
  48                         </div>
  49                         {tournament.participants ?
  50                                 <Scoreboard tournament={tournament} />
  51                         : null}
  52                 </Col>
  53         </Row>
  54 </Container>;
  55
  56 Detail.propTypes = {
  57         addRound: PropTypes.func,
  58         tournament: PropTypes.shape({
  59                 id: PropTypes.number,
  60                 participants: PropTypes.arrayOf(PropTypes.shape({
  61                 })),
  62                 rounds: PropTypes.arrayOf(PropTypes.shape({
  63                 })),
  64                 title: PropTypes.string,
  65         }),
  66         user: PropTypes.shape({
  67         }),
  68 };
  69
  70 export default withTranslation()(withUser(Detail));