resources/js/components/rounds/Item.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { useTranslation } 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 { useUser } from '../../hooks/user';
  16
  17 const getClassName = (round, tournament, user) => {
  18         const classNames = ['round'];
  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 }) => {
  41         const { t } = useTranslation();
  42         const { user } = useUser();
  43
  44 return <li className={getClassName(round, tournament, user)}>
  45                 {round.title ?
  46                         <h3>{round.title}</h3>
  47                 : null}
  48                 <div className="d-flex">
  49                         <div className="info">
  50                                 <p className="date">
  51                                         {round.number ? `#${round.number} ` : '#?'}
  52                                         {t('rounds.date', { date: new Date(round.created_at) })}
  53                                 </p>
  54                                 <p className="seed">
  55                                         {round.code && round.code.length ?
  56                                                 <>
  57                                                         <SeedCode code={round.code} game={round.game || 'alttpr'} />
  58                                                         <br />
  59                                                 </>
  60                                         : null}
  61                                         <SeedButton
  62                                                 round={round}
  63                                                 tournament={tournament}
  64                                         />
  65                                         {' '}
  66                                         <SeedRolledBy round={round} />
  67                                 </p>
  68                                 {mayReportResult(user, tournament) ?
  69                                         <p className="report">
  70                                                 <ReportButton
  71                                                         round={round}
  72                                                         tournament={tournament}
  73                                                         user={user}
  74                                                 />
  75                                         </p>
  76                                 : null}
  77                                 {tournament.type === 'open-async' && round.results && round.results.length ?
  78                                         <p>{t('rounds.numberOfResults', { count: round.results.length })}</p>
  79                                 : null}
  80                                 <div className="button-bar">
  81                                         <LockButton round={round} tournament={tournament} />
  82                                         {mayEditRound(user, tournament, round) ?
  83                                                 <EditButton round={round} tournament={tournament} />
  84                                         : null}
  85                                 </div>
  86                         </div>
  87                         <List round={round} tournament={tournament} />
  88                 </div>
  89         </li>;
  90 };
  91
  92 Item.propTypes = {
  93         round: PropTypes.shape({
  94                 code: PropTypes.arrayOf(PropTypes.string),
  95                 created_at: PropTypes.string,
  96                 game: PropTypes.string,
  97                 locked: PropTypes.bool,
  98                 number: PropTypes.number,
  99                 results: PropTypes.arrayOf(PropTypes.shape({
 100                 })),
 101                 seed: PropTypes.string,
 102                 title: PropTypes.string,
 103         }),
 104         tournament: PropTypes.shape({
 105                 participants: PropTypes.arrayOf(PropTypes.shape({
 106                 })),
 107                 type: PropTypes.string,
 108         }),
 109 };
 110
 111 export default Item;