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 EditButton from './EditButton';
   6 import LockButton from './LockButton';
   7 import SeedButton from './SeedButton';
   8 import SeedCode from './SeedCode';
   9 import SeedRolledBy from './SeedRolledBy';
  10 import List from '../results/List';
  11 import ReportButton from '../results/ReportButton';
  12 import { mayEditRound, mayReportResult, isRunner } from '../../helpers/permissions';
  13 import { isComplete } from '../../helpers/Round';
  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'];
  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         {round.title ?
  45                 <h3>{round.title}</h3>
  46         : null}
  47         <div className="d-flex">
  48                 <div className="info">
  49                         <p className="date">
  50                                 {round.number ? `#${round.number} ` : '#?'}
  51                                 {i18n.t('rounds.date', { date: new Date(round.created_at) })}
  52                         </p>
  53                         <p className="seed">
  54                                 {round.code && round.code.length ?
  55                                         <>
  56                                                 <SeedCode code={round.code} game={round.game || 'alttpr'} />
  57                                                 <br />
  58                                         </>
  59                                 : null}
  60                                 <SeedButton
  61                                         round={round}
  62                                         tournament={tournament}
  63                                 />
  64                                 {' '}
  65                                 <SeedRolledBy round={round} />
  66                         </p>
  67                         {mayReportResult(user, tournament) ?
  68                                 <p className="report">
  69                                         <ReportButton
  70                                                 round={round}
  71                                                 tournament={tournament}
  72                                                 user={user}
  73                                         />
  74                                 </p>
  75                         : null}
  76                         <div className="button-bar">
  77                                 <LockButton round={round} tournament={tournament} />
  78                                 {mayEditRound(user, tournament, round) ?
  79                                         <EditButton round={round} tournament={tournament} />
  80                                 : null}
  81                         </div>
  82                 </div>
  83                 <List round={round} tournament={tournament} />
  84         </div>
  85 </li>;
  86
  87 Item.propTypes = {
  88         round: PropTypes.shape({
  89                 code: PropTypes.arrayOf(PropTypes.string),
  90                 created_at: PropTypes.string,
  91                 game: PropTypes.string,
  92                 locked: PropTypes.bool,
  93                 number: PropTypes.number,
  94                 seed: PropTypes.string,
  95                 title: PropTypes.string,
  96         }),
  97         tournament: PropTypes.shape({
  98                 participants: PropTypes.arrayOf(PropTypes.shape({
  99                 })),
 100         }),
 101         user: PropTypes.shape({
 102         }),
 103 };
 104
 105 export default withTranslation()(withUser(Item));