1 import axios from 'axios';
2 import { withFormik } from 'formik';
3 import PropTypes from 'prop-types';
4 import React from 'react';
5 import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
6 import { withTranslation } from 'react-i18next';
7 import toastr from 'toastr';
9 import LargeCheck from '../common/LargeCheck';
10 import i18n from '../../i18n';
11 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
12 import { findResult } from '../../helpers/Participant';
13 import { formatTime, parseTime } from '../../helpers/Result';
14 import yup from '../../schema/yup';
25 <Form noValidate onSubmit={handleSubmit}>
28 <Form.Group as={Col} sm={9} controlId="report.time">
29 <Form.Label>{i18n.t('results.reportTime')}</Form.Label>
31 isInvalid={!!(touched.time && errors.time)}
34 onChange={handleChange}
35 placeholder={values.forfeit ? 'DNF' : '1:22:59'}
37 value={values.time || ''}
39 {touched.time && errors.time ?
40 <Form.Control.Feedback type="invalid">
42 </Form.Control.Feedback>
45 {parseTime(values.time) ?
47 'results.reportPreview',
48 { time: formatTime({ time: parseTime(values.time) })},
54 <Form.Group as={Col} sm={3} controlId="report.forfeit">
55 <Form.Label>{i18n.t('results.forfeit')}</Form.Label>
58 isInvalid={!!(touched.forfeit && errors.forfeit)}
61 onChange={handleChange}
62 value={!!values.forfeit}
69 <Button onClick={onCancel} variant="secondary">
70 {i18n.t('button.cancel')}
73 <Button type="submit" variant="primary">
74 {i18n.t('button.save')}
79 ReportForm.propTypes = {
80 errors: PropTypes.shape({
81 forfeit: PropTypes.string,
82 time: PropTypes.string,
84 handleBlur: PropTypes.func,
85 handleChange: PropTypes.func,
86 handleSubmit: PropTypes.func,
87 onCancel: PropTypes.func,
88 touched: PropTypes.shape({
89 forfeit: PropTypes.bool,
92 values: PropTypes.shape({
93 forfeit: PropTypes.bool,
94 time: PropTypes.string,
98 export default withFormik({
99 displayName: 'ReportForm',
100 enableReinitialize: true,
101 handleSubmit: async (values, actions) => {
102 const { forfeit, participant_id, round_id, time } = values;
103 const { setErrors } = actions;
104 const { onCancel } = actions.props;
106 await axios.post('/api/results', {
110 time: parseTime(time) || 0,
112 toastr.success(i18n.t('results.reportSuccess'));
117 toastr.success(i18n.t('results.reportError'));
118 if (e.response && e.response.data && e.response.data.errors) {
119 setErrors(laravelErrorsToFormik(e.response.data.errors));
123 mapPropsToValues: ({ participant, round }) => {
124 const result = findResult(participant, round);
127 forfeit: result ? !!result.forfeit : false,
128 participant_id: participant.id,
130 time: result && result.time ? formatTime(result) : '',
133 validationSchema: yup.object().shape({
134 forfeit: yup.boolean().required(),
135 time: yup.string().time().when('forfeit', {
137 then: yup.string().required().time(),
140 })(withTranslation()(ReportForm));