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));