import PropTypes from 'prop-types';
import React from 'react';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import EditButton from './EditButton';
import LockButton from './LockButton';
import SeedButton from './SeedButton';
import SeedCode from './SeedCode';
import SeedRolledBy from './SeedRolledBy';
import List from '../results/List';
import ReportButton from '../results/ReportButton';
-import { mayReportResult, isRunner } from '../../helpers/permissions';
+import { mayEditRound, mayReportResult, isRunner } from '../../helpers/permissions';
import { isComplete } from '../../helpers/Round';
import { hasFinishedRound } from '../../helpers/User';
-import { withUser } from '../../helpers/UserContext';
-import i18n from '../../i18n';
+import { useUser } from '../../hooks/user';
const getClassName = (round, tournament, user) => {
- const classNames = ['round', 'd-flex'];
+ const classNames = ['round'];
if (round.locked) {
classNames.push('is-locked');
} else {
const Item = ({
round,
tournament,
- user,
-}) =>
-<li className={getClassName(round, tournament, user)}>
- <div className="info">
- <p className="date">
- {round.number ? `#${round.number} ` : '#?'}
- {i18n.t('rounds.date', { date: new Date(round.created_at) })}
- </p>
- <p className="seed">
- {round.code ?
- <>
- <SeedCode code={round.code} game={round.game || 'alttpr'} />
- <br />
- </>
- : null}
- <SeedButton
- round={round}
- tournament={tournament}
- />
- {' '}
- <SeedRolledBy round={round} />
- </p>
- {mayReportResult(user, tournament) ?
- <p className="report">
- <ReportButton
- round={round}
- tournament={tournament}
- user={user}
- />
- </p>
+}) => {
+ const { t } = useTranslation();
+ const { user } = useUser();
+
+return <li className={getClassName(round, tournament, user)}>
+ {round.title ?
+ <h3>{round.title}</h3>
: null}
- <LockButton round={round} tournament={tournament} />
- </div>
- <List round={round} tournament={tournament} />
-</li>;
+ <div className="d-flex">
+ <div className="info">
+ <p className="date">
+ {tournament.show_numbers && round.number ? `#${round.number} ` : ''}
+ {t('rounds.date', { date: new Date(round.created_at) })}
+ </p>
+ <p className="seed">
+ {round.code && round.code.length ?
+ <>
+ <SeedCode code={round.code} game={round.game || 'alttpr'} />
+ <br />
+ </>
+ : null}
+ <SeedButton
+ round={round}
+ tournament={tournament}
+ />
+ {' '}
+ <SeedRolledBy round={round} />
+ </p>
+ {mayReportResult(user, tournament) ?
+ <p className="report">
+ <ReportButton
+ round={round}
+ tournament={tournament}
+ user={user}
+ />
+ </p>
+ : null}
+ {tournament.type === 'open-async' && round.results && round.results.length ?
+ <p>{t('rounds.numberOfResults', { count: round.results.length })}</p>
+ : null}
+ <div className="button-bar">
+ <LockButton round={round} tournament={tournament} />
+ {mayEditRound(user, tournament, round) ?
+ <EditButton round={round} tournament={tournament} />
+ : null}
+ </div>
+ </div>
+ <List round={round} tournament={tournament} />
+ </div>
+ </li>;
+};
Item.propTypes = {
round: PropTypes.shape({
game: PropTypes.string,
locked: PropTypes.bool,
number: PropTypes.number,
+ results: PropTypes.arrayOf(PropTypes.shape({
+ })),
seed: PropTypes.string,
+ title: PropTypes.string,
}),
tournament: PropTypes.shape({
participants: PropTypes.arrayOf(PropTypes.shape({
})),
- }),
- user: PropTypes.shape({
+ show_numbers: PropTypes.bool,
+ type: PropTypes.string,
}),
};
-export default withTranslation()(withUser(Item));
+export default Item;