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} controlId="round.spoiler">
  64                                 <Form.Label>{i18n.t('rounds.spoiler')}</Form.Label>
  65                                 <Form.Control
  66                                         isInvalid={!!(touched.spoiler && errors.spoiler)}
  67                                         name="spoiler"
  68                                         onBlur={handleBlur}
  69                                         onChange={handleChange}
  70                                         type="text"
  71                                         value={values.spoiler || ''}
  72                                 />
  73                                 {touched.spoiler && errors.spoiler ?
  74                                         <Form.Control.Feedback type="invalid">
  75                                                 {i18n.t(errors.spoiler)}
  76                                         </Form.Control.Feedback>
  77                                 : null}
  78                         </Form.Group>
  79                 </Row>
  80                 <Row>
  81                         <Form.Group as={Col}>
  82                                 <Form.Label>{i18n.t('rounds.code')}</Form.Label>
  83                                 <Form.Control
  84                                         as={SeedCodeInput}
  85                                         game={values.game || 'mixed'}
  86                                         isInvalid={!!(touched.code && errors.code)}
  87                                         name="code"
  88                                         onBlur={handleBlur}
  89                                         onChange={handleChange}
  90                                         value={values.code || []}
  91                                 />
  92                                 {touched.code && errors.code ?
  93                                         <Form.Control.Feedback type="invalid">
  94                                                 {i18n.t(errors.code)}
  95                                         </Form.Control.Feedback>
  96                                 : null}
  97                         </Form.Group>
  98                 </Row>
  99                 <Row>
 100                         <Form.Group as={Col}>
 101                                 <Form.Label>{i18n.t('rounds.rolled_by')}</Form.Label>
 102                                 <Form.Control
 103                                         as={UserSelect}
 104                                         isInvalid={!!(touched.rolled_by && errors.rolled_by)}
 105                                         name="rolled_by"
 106                                         onBlur={handleBlur}
 107                                         onChange={handleChange}
 108                                         value={values.rolled_by || null}
 109                                 />
 110                                 {touched.rolled_by && errors.rolled_by ?
 111                                         <Form.Control.Feedback type="invalid">
 112                                                 {i18n.t(errors.rolled_by)}
 113                                         </Form.Control.Feedback>
 114                                 : null}
 115                         </Form.Group>
 116                 </Row>
 117         </Modal.Body>
 118         <Modal.Footer>
 119                 {onCancel ?
 120                         <Button onClick={onCancel} variant="secondary">
 121                                 {i18n.t('button.cancel')}
 122                         </Button>
 123                 : null}
 124                 <Button type="submit" variant="primary">
 125                         {i18n.t('button.save')}
 126                 </Button>
 127         </Modal.Footer>
 128 </Form>;
 129
 130 EditForm.propTypes = {
 131         errors: PropTypes.shape({
 132                 code: PropTypes.arrayOf(PropTypes.string),
 133                 rolled_by: PropTypes.string,
 134                 seed: PropTypes.string,
 135                 spoiler: PropTypes.string,
 136                 title: PropTypes.string,
 137         }),
 138         handleBlur: PropTypes.func,
 139         handleChange: PropTypes.func,
 140         handleSubmit: PropTypes.func,
 141         onCancel: PropTypes.func,
 142         touched: PropTypes.shape({
 143                 code: PropTypes.arrayOf(PropTypes.bool),
 144                 rolled_by: PropTypes.bool,
 145                 seed: PropTypes.bool,
 146                 spoiler: PropTypes.bool,
 147                 title: PropTypes.bool,
 148         }),
 149         values: PropTypes.shape({
 150                 code: PropTypes.arrayOf(PropTypes.string),
 151                 game: PropTypes.string,
 152                 rolled_by: PropTypes.string,
 153                 seed: PropTypes.string,
 154                 spoiler: PropTypes.string,
 155                 title: PropTypes.string,
 156         }),
 157 };
 158
 159 export default withFormik({
 160         displayName: 'EditForm',
 161         enableReinitialize: true,
 162         handleSubmit: async (values, actions) => {
 163                 const { round_id } = values;
 164                 const { setErrors } = actions;
 165                 const { onCancel } = actions.props;
 166                 try {
 167                         await axios.put(`/api/rounds/${round_id}`, values);
 168                         toastr.success(i18n.t('rounds.editSuccess'));
 169                         if (onCancel) {
 170                                 onCancel();
 171                         }
 172                 } catch (e) {
 173                         toastr.error(i18n.t('rounds.editError'));
 174                         if (e.response && e.response.data && e.response.data.errors) {
 175                                 setErrors(laravelErrorsToFormik(e.response.data.errors));
 176                         }
 177                 }
 178         },
 179         mapPropsToValues: ({ round }) => ({
 180                 code: round.code || [],
 181                 game: round.game || 'mixed',
 182                 rolled_by: round.rolled_by || null,
 183                 round_id: round.id,
 184                 seed: round.seed || '',
 185                 spoiler: round.spoiler || '',
 186                 title: round.title || '',
 187         }),
 188         validationSchema: yup.object().shape({
 189                 code: yup.array().of(yup.string()),
 190                 rolled_by: yup.string().nullable(),
 191                 seed: yup.string().url(),
 192                 spoiler: yup.string().url(),
 193                 title: yup.string(),
 194         }),
 195 })(withTranslation()(EditForm));