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