X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fresults%2FDetailDialog.js;h=5739bbfa90faea55dc9bf7cc69711ea633635928;hb=4c5a82cb876e96c72c50e8bc12bd8a43a9afe847;hp=a914f5d0e134926dd5fd47f654795cc45fe6209c;hpb=1e725fef6dc440aaeea8c30e1e0598dc5d24ad86;p=alttp.git

diff --git a/resources/js/components/results/DetailDialog.js b/resources/js/components/results/DetailDialog.js
index a914f5d..5739bbf 100644
--- a/resources/js/components/results/DetailDialog.js
+++ b/resources/js/components/results/DetailDialog.js
@@ -1,67 +1,75 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import Box from '../users/Box';
 import { getTime } from '../../helpers/Result';
 import { maySeeResults } from '../../helpers/permissions';
 import { findResult } from '../../helpers/User';
-import { withUser } from '../../helpers/UserContext';
-import i18n from '../../i18n';
+import { useUser } from '../../hooks/user';
 
-const getPlacement = result =>
-	`${result.placement}. (${i18n.t('results.points', { count: result.score })})`;
+const getPlacement = (result, t) =>
+	`${result.placement}. (${t('results.points', { count: result.score })})`;
 
 const DetailDialog = ({
-	authUser,
 	onHide,
 	round,
 	show,
 	tournament,
 	user,
 }) => {
-	const result = findResult(user, round);
-	const maySee = maySeeResults(authUser, tournament, round);
+	const { t } = useTranslation();
+	const { user: authUser } = useUser();
+
+	const result = React.useMemo(
+		() => findResult(user, round),
+		[round, user],
+	);
+	const maySee = React.useMemo(
+		() => maySeeResults(authUser, tournament, round),
+		[authUser, round, tournament],
+	);
+
 	return <Modal className="result-dialog" onHide={onHide} show={show}>
 		<Modal.Header closeButton>
 			<Modal.Title>
-				{i18n.t('results.details')}
+				{t('results.details')}
 			</Modal.Title>
 		</Modal.Header>
 		<Modal.Body>
 			<Row>
 				<Form.Group as={Col} sm={6}>
-					<Form.Label>{i18n.t('results.round')}</Form.Label>
+					<Form.Label>{t('results.round')}</Form.Label>
 					<div>
 						#{round.number || '?'}
 						{' '}
-						{i18n.t('rounds.date', { date: new Date(round.created_at) })}
+						{t('rounds.date', { date: new Date(round.created_at) })}
 					</div>
 				</Form.Group>
 				<Form.Group as={Col} sm={6}>
-					<Form.Label>{i18n.t('results.runner')}</Form.Label>
+					<Form.Label>{t('results.runner')}</Form.Label>
 					<div><Box user={user} /></div>
 				</Form.Group>
 				<Form.Group as={Col} sm={6}>
-					<Form.Label>{i18n.t('results.result')}</Form.Label>
+					<Form.Label>{t('results.result')}</Form.Label>
 					<div>
 						{maySee && result && result.has_finished
 							? getTime(result, maySee)
-							: i18n.t('results.pending')}
+							: t('results.pending')}
 					</div>
 				</Form.Group>
 				<Form.Group as={Col} sm={6}>
-					<Form.Label>{i18n.t('results.placement')}</Form.Label>
+					<Form.Label>{t('results.placement')}</Form.Label>
 					<div>
 						{maySee && result && result.placement
-							? getPlacement(result)
-							: i18n.t('results.pending')}
+							? getPlacement(result, t)
+							: t('results.pending')}
 					</div>
 				</Form.Group>
 				{maySee && result && result.comment ?
 					<Form.Group as={Col} sm={12}>
-						<Form.Label>{i18n.t('results.comment')}</Form.Label>
+						<Form.Label>{t('results.comment')}</Form.Label>
 						<div>{result.comment}</div>
 					</Form.Group>
 				: null}
@@ -69,15 +77,13 @@ const DetailDialog = ({
 		</Modal.Body>
 		<Modal.Footer>
 			<Button onClick={onHide} variant="secondary">
-				{i18n.t('button.close')}
+				{t('button.close')}
 			</Button>
 		</Modal.Footer>
 	</Modal>;
 };
 
 DetailDialog.propTypes = {
-	authUser: PropTypes.shape({
-	}),
 	onHide: PropTypes.func,
 	round: PropTypes.shape({
 		created_at: PropTypes.string,
@@ -90,4 +96,4 @@ DetailDialog.propTypes = {
 	}),
 };
 
-export default withTranslation()(withUser(DetailDialog, 'authUser'));
+export default DetailDialog;