+const getClassName = (round, tournament, user) => {
+ const classNames = ['round', 'd-flex'];
+ if (round.locked) {
+ classNames.push('is-locked');
+ } else {
+ classNames.push('is-unlocked');
+ }
+ if (isComplete(tournament, round)) {
+ classNames.push('is-complete');
+ } else {
+ classNames.push('is-incomplete');
+ }
+ if (hasFinishedRound(user, round)) {
+ classNames.push('has-finished');
+ } else if (isRunner(user, tournament)) {
+ classNames.push('has-not-finished');
+ }
+ return classNames.join(' ');
+};
+
+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} />
+ {' '}
+ </>
+ : null}
+ <SeedButton
+ round={round}
+ tournament={tournament}
+ />
+ </p>
+ {!round.locked && isParticipant(user, tournament) ?
+ <p className="report">
+ <ReportButton
+ participant={findParticipant(tournament, user)}
+ round={round}
+ tournament={tournament}
+ />
+ </p>
+ : null}
+ <LockButton round={round} tournament={tournament} />