improved user context

[alttp.git] / resources / js / components / results / DetailDialog.js

diff --git a/resources/js/components/results/DetailDialog.js b/resources/js/components/results/DetailDialog.js
index a914f5d0e134926dd5fd47f654795cc45fe6209c..5739bbfa90faea55dc9bf7cc69711ea633635928 100644 (file)
--- 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;