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