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