resources/js/components/rounds/Item.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { withTranslation } from 'react-i18next';
   4
   5 import LockButton from './LockButton';
   6 import SeedButton from './SeedButton';
   7 import SeedCode from './SeedCode';
   8 import SeedRolledBy from './SeedRolledBy';
   9 import List from '../results/List';
  10 import ReportButton from '../results/ReportButton';
  11 import { isRunner } from '../../helpers/permissions';
  12 import { isComplete } from '../../helpers/Round';
  13 import { findParticipant } from '../../helpers/Tournament';
  14 import { hasFinishedRound } from '../../helpers/User';
  15 import { withUser } from '../../helpers/UserContext';
  16 import i18n from '../../i18n';
  17
  18 const getClassName = (round, tournament, user) => {
  19         const classNames = ['round', 'd-flex'];
  20         if (round.locked) {
  21                 classNames.push('is-locked');
  22         } else {
  23                 classNames.push('is-unlocked');
  24         }
  25         if (isComplete(tournament, round)) {
  26                 classNames.push('is-complete');
  27         } else {
  28                 classNames.push('is-incomplete');
  29         }
  30         if (hasFinishedRound(user, round)) {
  31                 classNames.push('has-finished');
  32         } else if (isRunner(user, tournament)) {
  33                 classNames.push('has-not-finished');
  34         }
  35         return classNames.join(' ');
  36 };
  37
  38 const Item = ({
  39         round,
  40         tournament,
  41         user,
  42 }) =>
  43 <li className={getClassName(round, tournament, user)}>
  44         <div className="info">
  45                 <p className="date">
  46                         {round.number ? `#${round.number} ` : '#?'}
  47                         {i18n.t('rounds.date', { date: new Date(round.created_at) })}
  48                 </p>
  49                 <p className="seed">
  50                         {round.code ?
  51                                 <>
  52                                         <SeedCode code={round.code} />
  53                                         <br />
  54                                 </>
  55                         : null}
  56                         <SeedButton
  57                                 round={round}
  58                                 tournament={tournament}
  59                         />
  60                         {' '}
  61                         <SeedRolledBy round={round} />
  62                 </p>
  63                 {isRunner(user, tournament) ?
  64                         <p className="report">
  65                                 <ReportButton
  66                                         participant={findParticipant(tournament, user)}
  67                                         round={round}
  68                                         tournament={tournament}
  69                                 />
  70                         </p>
  71                 : null}
  72                 <LockButton round={round} tournament={tournament} />
  73         </div>
  74         <List round={round} tournament={tournament} />
  75 </li>;
  76
  77 Item.propTypes = {
  78         round: PropTypes.shape({
  79                 code: PropTypes.arrayOf(PropTypes.string),
  80                 created_at: PropTypes.string,
  81                 locked: PropTypes.bool,
  82                 number: PropTypes.number,
  83                 seed: PropTypes.string,
  84         }),
  85         tournament: PropTypes.shape({
  86                 participants: PropTypes.arrayOf(PropTypes.shape({
  87                 })),
  88         }),
  89         user: PropTypes.shape({
  90         }),
  91 };
  92
  93 export default withTranslation()(withUser(Item));