improved user context

[alttp.git] / resources / js / components / tournament / Detail.js

diff --git a/resources/js/components/tournament/Detail.js b/resources/js/components/tournament/Detail.js
index 3ce0b48998987405626aa82bf5de8244f63ab28f..84592f6beb1a525a5f2886cf6661600ad2c975ec 100644 (file)
--- a/resources/js/components/tournament/Detail.js
+++ b/resources/js/components/tournament/Detail.js
@@ -1,57 +1,122 @@
 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';
+import ScoreChartButton from './ScoreChartButton';
+import SettingsButton from './SettingsButton';
+import ApplicationsButton from '../applications/Button';
 import Protocol from '../protocol/Protocol';
 import Rounds from '../rounds/List';
+import Box from '../users/Box';
 import {
+       isRunner,
        mayAddRounds,
+       mayUpdateTournament,
        mayViewProtocol,
 } from '../../helpers/permissions';
-import { withUser } from '../../helpers/UserContext';
-import i18n from '../../i18n';
+import {
+       getTournamentAdmins,
+       getTournamentMonitors,
+       hasRunners,
+       hasScoreboard,
+       hasTournamentAdmins,
+       hasTournamentMonitors,
+} from '../../helpers/Tournament';
+import { useUser } from '../../hooks/user';
+
+const getClassName = (tournament, user) => {
+       const classNames = ['tournament'];
+       if (tournament.locked) {
+               classNames.push('is-locked');
+       } else {
+               classNames.push('is-active');
+       }
+       if (isRunner(user, tournament)) {
+               classNames.push('is-runner');
+       }
+       return classNames.join(' ');
+};
 
 const Detail = ({
        addRound,
        tournament,
-       user,
-}) => <Container fluid>
-       <Row>
-               <Col lg={8} xl={9}>
-                       <div className="d-flex align-items-center justify-content-between">
-                               <h1>{tournament.title}</h1>
-                               {mayViewProtocol(user, tournament) ?
-                                       <Protocol id={tournament.id} />
-                               : null}
-                       </div>
-               </Col>
-       </Row>
-       <Row>
-               <Col lg={8} xl={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>
+}) => {
+       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}
+                                       {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>
+                       </Col>
+                       <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
+                               <div className="d-flex align-items-center justify-content-between">
+                                       <h2>{t('rounds.heading')}</h2>
+                                       {addRound && mayAddRounds(user, tournament) ?
+                                               <Button onClick={addRound}>
+                                                       {t('rounds.new')}
+                                               </Button>
+                                       : null}
+                               </div>
+                               {tournament.rounds ?
+                                       <Rounds rounds={tournament.rounds} tournament={tournament} />
                                : null}
-                       </div>
-                       {tournament.rounds ?
-                               <Rounds rounds={tournament.rounds} tournament={tournament} />
-                       : null}
-               </Col>
-               <Col lg={4} xl={3}>
-                       <div className="d-flex align-items-center justify-content-between">
-                               <h2>{i18n.t('tournaments.scoreboard')}</h2>
-                       </div>
-                       {tournament.participants ?
-                               <Scoreboard tournament={tournament} />
-                       : null}
-               </Col>
-       </Row>
-</Container>;
+                       </Col>
+               </Row>
+       </Container>;
+};
 
 Detail.propTypes = {
        addRound: PropTypes.func,
@@ -63,8 +128,6 @@ Detail.propTypes = {
                })),
                title: PropTypes.string,
        }),
-       user: PropTypes.shape({
-       }),
 };
 
-export default withTranslation()(withUser(Detail));
+export default Detail;