1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
6 import Box from '../users/Box';
7 import { getTime } from '../../helpers/Result';
8 import { findResult } from '../../helpers/Participant';
9 import { maySeeResults } from '../../helpers/permissions';
10 import { withUser } from '../../helpers/UserContext';
11 import i18n from '../../i18n';
13 const getPlacement = result =>
14 `${result.placement}. (${i18n.t('results.points', { count: result.score })})`;
16 const DetailDialog = ({
24 const result = findResult(participant, round);
25 const maySee = maySeeResults(user, tournament, round);
26 return <Modal className="result-dialog" onHide={onHide} show={show}>
27 <Modal.Header closeButton>
29 {i18n.t('results.details')}
34 <Form.Group as={Col} sm={6}>
35 <Form.Label>{i18n.t('results.round')}</Form.Label>
37 #{round.number || '?'}
39 {i18n.t('rounds.date', { date: new Date(round.created_at) })}
42 <Form.Group as={Col} sm={6}>
43 <Form.Label>{i18n.t('results.runner')}</Form.Label>
44 <div><Box user={participant.user} /></div>
46 <Form.Group as={Col} sm={6}>
47 <Form.Label>{i18n.t('results.result')}</Form.Label>
49 {maySee && result && result.has_finished
50 ? getTime(result, maySee)
51 : i18n.t('results.pending')}
54 <Form.Group as={Col} sm={6}>
55 <Form.Label>{i18n.t('results.placement')}</Form.Label>
57 {maySee && result && result.placement
58 ? getPlacement(result)
59 : i18n.t('results.pending')}
62 {maySee && result && result.comment ?
63 <Form.Group as={Col} sm={12}>
64 <Form.Label>{i18n.t('results.comment')}</Form.Label>
65 <div>{result.comment}</div>
71 <Button onClick={onHide} variant="secondary">
72 {i18n.t('button.close')}
78 DetailDialog.propTypes = {
79 onHide: PropTypes.func,
80 participant: PropTypes.shape({
81 user: PropTypes.shape({
84 round: PropTypes.shape({
85 created_at: PropTypes.string,
86 number: PropTypes.number,
89 tournament: PropTypes.shape({
91 user: PropTypes.shape({
95 export default withTranslation()(withUser(DetailDialog));