import PropTypes from 'prop-types';
import React from 'react';
import { Button, Col, Container, Row } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
import ApplyButton from './ApplyButton';
import Scoreboard from './Scoreboard';
getTournamentAdmins,
getTournamentMonitors,
hasRunners,
+ hasScoreboard,
hasTournamentAdmins,
hasTournamentMonitors,
} from '../../helpers/Tournament';
-import { withUser } from '../../helpers/UserContext';
-import i18n from '../../i18n';
+import { useUser } from '../../hooks/user';
const getClassName = (tournament, user) => {
const classNames = ['tournament'];
const Detail = ({
addRound,
+ moreRounds,
tournament,
- user,
-}) => <Container className={getClassName(tournament, user)} fluid>
- <Row>
- <Col lg={8} xl={9}>
- <div className="d-flex align-items-center justify-content-between">
- <h1>{tournament.title}</h1>
- <div className="button-bar">
- <ApplicationsButton tournament={tournament} />
- <ApplyButton tournament={tournament} />
- {mayUpdateTournament(user, tournament) ?
- <SettingsButton tournament={tournament} />
+}) => {
+ const { t } = useTranslation();
+ const { user } = useUser();
+
+ return <Container className={getClassName(tournament, user)} fluid>
+ <Row>
+ <Col lg={8} xl={9}>
+ <div className="d-flex align-items-center justify-content-between">
+ <h1>{tournament.title}</h1>
+ <div className="button-bar">
+ <ApplicationsButton tournament={tournament} />
+ <ApplyButton tournament={tournament} />
+ {mayUpdateTournament(user, tournament) ?
+ <SettingsButton tournament={tournament} />
+ : null}
+ {mayViewProtocol(user, tournament) ?
+ <Protocol id={tournament.id} />
+ : null}
+ </div>
+ </div>
+ </Col>
+ </Row>
+ <Row>
+ <Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
+ <div className="tournament-sidebar">
+ {hasScoreboard(tournament) ? <>
+ <div className="d-flex align-items-center justify-content-between">
+ <h2>{t('tournaments.scoreboard')}</h2>
+ {hasRunners(tournament) && tournament.rounds.length > 2 ?
+ <ScoreChartButton tournament={tournament} />
+ : null}
+ </div>
+ {hasRunners(tournament) ?
+ <Scoreboard tournament={tournament} />
+ : null}
+ </> : null}
+ {hasTournamentAdmins(tournament) ?
+ <>
+ <div className="d-flex align-items-center justify-content-between">
+ <h2>{t('tournaments.admins')}</h2>
+ </div>
+ {getTournamentAdmins(tournament).map(p =>
+ <p key={p.id}><Box user={p.user} /></p>
+ )}
+ </>
: null}
- {mayViewProtocol(user, tournament) ?
- <Protocol id={tournament.id} />
+ {hasTournamentMonitors(tournament) ?
+ <>
+ <div className="d-flex align-items-center justify-content-between">
+ <h2>{t('tournaments.monitors')}</h2>
+ </div>
+ {getTournamentMonitors(tournament).map(p =>
+ <p key={p.id}><Box user={p.user} /></p>
+ )}
+ </>
: null}
</div>
- </div>
- </Col>
- </Row>
- <Row>
- <Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
- <div className="tournament-sidebar">
+ </Col>
+ <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
<div className="d-flex align-items-center justify-content-between">
- <h2>{i18n.t('tournaments.scoreboard')}</h2>
- {hasRunners(tournament) && tournament.rounds.length > 2 ?
- <ScoreChartButton tournament={tournament} />
+ <h2>{t('rounds.heading')}</h2>
+ {addRound && mayAddRounds(user, tournament) ?
+ <Button onClick={addRound}>
+ {t('rounds.new')}
+ </Button>
: null}
</div>
- {hasRunners(tournament) ?
- <Scoreboard tournament={tournament} />
- : null}
- {hasTournamentAdmins(tournament) ?
- <>
- <div className="d-flex align-items-center justify-content-between">
- <h2>{i18n.t('tournaments.admins')}</h2>
- </div>
- {getTournamentAdmins(tournament).map(p =>
- <p key={p.id}><Box user={p.user} /></p>
- )}
- </>
- : null}
- {hasTournamentMonitors(tournament) ?
- <>
- <div className="d-flex align-items-center justify-content-between">
- <h2>{i18n.t('tournaments.monitors')}</h2>
- </div>
- {getTournamentMonitors(tournament).map(p =>
- <p key={p.id}><Box user={p.user} /></p>
- )}
- </>
+ {tournament.rounds ?
+ <Rounds
+ loadMore={moreRounds}
+ rounds={tournament.rounds}
+ tournament={tournament}
+ />
: null}
- </div>
- </Col>
- <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
- <div className="d-flex align-items-center justify-content-between">
- <h2>{i18n.t('rounds.heading')}</h2>
- {addRound && mayAddRounds(user, tournament) ?
- <Button onClick={addRound}>
- {i18n.t('rounds.new')}
- </Button>
- : null}
- </div>
- {tournament.rounds ?
- <Rounds rounds={tournament.rounds} tournament={tournament} />
- : null}
- </Col>
- </Row>
-</Container>;
+ </Col>
+ </Row>
+ </Container>;
+};
Detail.propTypes = {
addRound: PropTypes.func,
+ moreRounds: PropTypes.func,
tournament: PropTypes.shape({
id: PropTypes.number,
participants: PropTypes.arrayOf(PropTypes.shape({
})),
title: PropTypes.string,
}),
- user: PropTypes.shape({
- }),
};
-export default withTranslation()(withUser(Detail));
+export default Detail;