X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftournament%2FDetail.js;h=318e67757d395fdc2dce9507dfe955d875e14802;hb=147c5f43c5d41fa18e82edb6651fe5a37c789353;hp=d4e23cdba4e0ca359a634d2fda2b73e896e595c1;hpb=e0616336a824a6d59c4b9d25ef4ed7fa26214cef;p=alttp.git

diff --git a/resources/js/components/tournament/Detail.js b/resources/js/components/tournament/Detail.js
index d4e23cd..318e677 100644
--- a/resources/js/components/tournament/Detail.js
+++ b/resources/js/components/tournament/Detail.js
@@ -1,11 +1,12 @@
 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';
@@ -13,17 +14,18 @@ import Box from '../users/Box';
 import {
 	isRunner,
 	mayAddRounds,
+	mayUpdateTournament,
 	mayViewProtocol,
 } from '../../helpers/permissions';
 import {
 	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'];
@@ -40,75 +42,90 @@ const getClassName = (tournament, user) => {
 
 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} />
-					{mayViewProtocol(user, tournament) ?
-						<Protocol id={tournament.id} />
+}) => {
+	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>
-			</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} />
+				{tournament.rounds ?
+					<Rounds
+						loadMore={moreRounds}
+						rounds={tournament.rounds}
+						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>
-						)}
-					</>
-				: 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({
@@ -117,8 +134,6 @@ Detail.propTypes = {
 		})),
 		title: PropTypes.string,
 	}),
-	user: PropTypes.shape({
-	}),
 };
 
-export default withTranslation()(withUser(Detail));
+export default Detail;