]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/results/ReportForm.js
fc98c7eefe0fcb8ddddae3cea6fbbca6d0826a4b
[alttp.git] / resources / js / components / results / ReportForm.js
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
8 import i18n from '../../i18n';
9 import { formatTime, parseTime } from '../../helpers/Result';
10 import yup from '../../schema/yup';
11
12 const ReportForm = ({
13         errors,
14         handleBlur,
15         handleChange,
16         handleSubmit,
17         onCancel,
18         touched,
19         values,
20 }) =>
21 <Form noValidate onSubmit={handleSubmit}>
22         <Modal.Body>
23                 <Row>
24                         <Form.Group as={Col} controlId="report.time">
25                                 <Form.Label>{i18n.t('results.reportTime')}</Form.Label>
26                                 <Form.Control
27                                         isInvalid={!!(touched.time && errors.time)}
28                                         name="time"
29                                         onBlur={handleBlur}
30                                         onChange={handleChange}
31                                         placeholder="1:22:59"
32                                         type="text"
33                                         value={values.time || ''}
34                                 />
35                                 {touched.time && errors.time ?
36                                         <Form.Control.Feedback type="invalid">
37                                                 {i18n.t(errors.time)}
38                                         </Form.Control.Feedback>
39                                 :
40                                         <Form.Text muted>
41                                                 {parseTime(values.time) ?
42                                                         i18n.t(
43                                                                 'results.reportPreview',
44                                                                 { time: formatTime({ time: parseTime(values.time) })},
45                                                         )
46                                                 : null}
47                                         </Form.Text>
48                                 }
49                         </Form.Group>
50                 </Row>
51         </Modal.Body>
52         <Modal.Footer>
53                 {onCancel ?
54                         <Button onClick={onCancel} variant="secondary">
55                                 {i18n.t('button.cancel')}
56                         </Button>
57                 : null}
58                 <Button type="submit" variant="primary">
59                         {i18n.t('button.save')}
60                 </Button>
61         </Modal.Footer>
62 </Form>;
63
64 ReportForm.propTypes = {
65         errors: PropTypes.shape({
66                 time: PropTypes.string,
67         }),
68         handleBlur: PropTypes.func,
69         handleChange: PropTypes.func,
70         handleSubmit: PropTypes.func,
71         onCancel: PropTypes.func,
72         touched: PropTypes.shape({
73                 time: PropTypes.bool,
74         }),
75         values: PropTypes.shape({
76                 time: PropTypes.string,
77         }),
78 };
79
80 export default withFormik({
81         displayName: 'ReportForm',
82         enableReinitialize: true,
83         handleSubmit: async (values, actions) => {
84                 const { participant_id, round_id, time } = values;
85                 const { onCancel } = actions.props;
86                 await axios.post('/api/results', {
87                         participant_id,
88                         round_id,
89                         time: parseTime(time),
90                 });
91                 if (onCancel) {
92                         onCancel();
93                 }
94         },
95         mapPropsToValues: ({ participant, round }) => ({
96                 participant_id: participant.id,
97                 round_id: round.id,
98                 time: '',
99         }),
100         validationSchema: yup.object().shape({
101                 time: yup.string().required().time(),
102         }),
103 })(withTranslation()(ReportForm));