resources/js/components/rounds/EditForm.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 import toastr from 'toastr';
   8
   9 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
  10 import i18n from '../../i18n';
  11 import yup from '../../schema/yup';
  12
  13 const EditForm = ({
  14         errors,
  15         handleBlur,
  16         handleChange,
  17         handleSubmit,
  18         onCancel,
  19         touched,
  20         values,
  21 }) =>
  22 <Form noValidate onSubmit={handleSubmit}>
  23         <Modal.Body>
  24                 <Row>
  25                         <Form.Group as={Col} controlId="round.title">
  26                                 <Form.Label>{i18n.t('rounds.title')}</Form.Label>
  27                                 <Form.Control
  28                                         isInvalid={!!(touched.title && errors.title)}
  29                                         name="title"
  30                                         onBlur={handleBlur}
  31                                         onChange={handleChange}
  32                                         type="text"
  33                                         value={values.title || ''}
  34                                 />
  35                                 {touched.title && errors.title ?
  36                                         <Form.Control.Feedback type="invalid">
  37                                                 {i18n.t(errors.title)}
  38                                         </Form.Control.Feedback>
  39                                 : null}
  40                         </Form.Group>
  41                 </Row>
  42                 <Row>
  43                         <Form.Group as={Col} controlId="round.seed">
  44                                 <Form.Label>{i18n.t('rounds.seed')}</Form.Label>
  45                                 <Form.Control
  46                                         isInvalid={!!(touched.seed && errors.seed)}
  47                                         name="seed"
  48                                         onBlur={handleBlur}
  49                                         onChange={handleChange}
  50                                         type="text"
  51                                         value={values.seed || ''}
  52                                 />
  53                                 {touched.seed && errors.seed ?
  54                                         <Form.Control.Feedback type="invalid">
  55                                                 {i18n.t(errors.seed)}
  56                                         </Form.Control.Feedback>
  57                                 : null}
  58                         </Form.Group>
  59                 </Row>
  60         </Modal.Body>
  61         <Modal.Footer>
  62                 {onCancel ?
  63                         <Button onClick={onCancel} variant="secondary">
  64                                 {i18n.t('button.cancel')}
  65                         </Button>
  66                 : null}
  67                 <Button type="submit" variant="primary">
  68                         {i18n.t('button.save')}
  69                 </Button>
  70         </Modal.Footer>
  71 </Form>;
  72
  73 EditForm.propTypes = {
  74         errors: PropTypes.shape({
  75                 seed: PropTypes.string,
  76                 title: PropTypes.string,
  77         }),
  78         handleBlur: PropTypes.func,
  79         handleChange: PropTypes.func,
  80         handleSubmit: PropTypes.func,
  81         onCancel: PropTypes.func,
  82         touched: PropTypes.shape({
  83                 seed: PropTypes.bool,
  84                 title: PropTypes.bool,
  85         }),
  86         values: PropTypes.shape({
  87                 seed: PropTypes.string,
  88                 title: PropTypes.string,
  89         }),
  90 };
  91
  92 export default withFormik({
  93         displayName: 'EditForm',
  94         enableReinitialize: true,
  95         handleSubmit: async (values, actions) => {
  96                 const { round_id } = values;
  97                 const { setErrors } = actions;
  98                 const { onCancel } = actions.props;
  99                 try {
 100                         await axios.put(`/api/rounds/${round_id}`, values);
 101                         toastr.success(i18n.t('rounds.editSuccess'));
 102                         if (onCancel) {
 103                                 onCancel();
 104                         }
 105                 } catch (e) {
 106                         toastr.error(i18n.t('rounds.editError'));
 107                         if (e.response && e.response.data && e.response.data.errors) {
 108                                 setErrors(laravelErrorsToFormik(e.response.data.errors));
 109                         }
 110                 }
 111         },
 112         mapPropsToValues: ({ round }) => ({
 113                 round_id: round.id,
 114                 seed: round.seed || '',
 115                 title: round.title || '',
 116         }),
 117         validationSchema: yup.object().shape({
 118                 seed: yup.string().url(),
 119                 title: yup.string(),
 120         }),
 121 })(withTranslation()(EditForm));