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}
</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,
}),
};
-export default withTranslation()(withUser(DetailDialog, 'authUser'));
+export default DetailDialog;