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 { mayReportResult, isRunner } from '../../helpers/permissions';
  12 import { isComplete } from '../../helpers/Round';
  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} game={round.game || 'alttpr'} />
  52                                         <br />
  53                                 </>
  54                         : null}
  55                         <SeedButton
  56                                 round={round}
  57                                 tournament={tournament}
  58                         />
  59                         {' '}
  60                         <SeedRolledBy round={round} />
  61                 </p>
  62                 {mayReportResult(user, tournament) ?
  63                         <p className="report">
  64                                 <ReportButton
  65                                         round={round}
  66                                         tournament={tournament}
  67                                         user={user}
  68                                 />
  69                         </p>
  70                 : null}
  71                 <LockButton round={round} tournament={tournament} />
  72         </div>
  73         <List round={round} tournament={tournament} />
  74 </li>;
  75
  76 Item.propTypes = {
  77         round: PropTypes.shape({
  78                 code: PropTypes.arrayOf(PropTypes.string),
  79                 created_at: PropTypes.string,
  80                 game: 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));