round titles

[alttp.git] / resources / js / components / rounds / EditForm.js

diff --git a/resources/js/components/rounds/EditForm.js b/resources/js/components/rounds/EditForm.js
new file mode 100644 (file)
index 0000000..57ee95a
--- /dev/null
+++ b/resources/js/components/rounds/EditForm.js
@@ -0,0 +1,121 @@
+import axios from 'axios';
+import { withFormik } from 'formik';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
+import toastr from 'toastr';
+
+import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
+import i18n from '../../i18n';
+import yup from '../../schema/yup';
+
+const EditForm = ({
+       errors,
+       handleBlur,
+       handleChange,
+       handleSubmit,
+       onCancel,
+       touched,
+       values,
+}) =>
+<Form noValidate onSubmit={handleSubmit}>
+       <Modal.Body>
+               <Row>
+                       <Form.Group as={Col} controlId="round.title">
+                               <Form.Label>{i18n.t('rounds.title')}</Form.Label>
+                               <Form.Control
+                                       isInvalid={!!(touched.title && errors.title)}
+                                       name="title"
+                                       onBlur={handleBlur}
+                                       onChange={handleChange}
+                                       type="text"
+                                       value={values.title || ''}
+                               />
+                               {touched.title && errors.title ?
+                                       <Form.Control.Feedback type="invalid">
+                                               {i18n.t(errors.title)}
+                                       </Form.Control.Feedback>
+                               : null}
+                       </Form.Group>
+               </Row>
+               <Row>
+                       <Form.Group as={Col} controlId="round.seed">
+                               <Form.Label>{i18n.t('rounds.seed')}</Form.Label>
+                               <Form.Control
+                                       isInvalid={!!(touched.seed && errors.seed)}
+                                       name="seed"
+                                       onBlur={handleBlur}
+                                       onChange={handleChange}
+                                       type="text"
+                                       value={values.seed || ''}
+                               />
+                               {touched.seed && errors.seed ?
+                                       <Form.Control.Feedback type="invalid">
+                                               {i18n.t(errors.seed)}
+                                       </Form.Control.Feedback>
+                               : null}
+                       </Form.Group>
+               </Row>
+       </Modal.Body>
+       <Modal.Footer>
+               {onCancel ?
+                       <Button onClick={onCancel} variant="secondary">
+                               {i18n.t('button.cancel')}
+                       </Button>
+               : null}
+               <Button type="submit" variant="primary">
+                       {i18n.t('button.save')}
+               </Button>
+       </Modal.Footer>
+</Form>;
+
+EditForm.propTypes = {
+       errors: PropTypes.shape({
+               seed: PropTypes.string,
+               title: PropTypes.string,
+       }),
+       handleBlur: PropTypes.func,
+       handleChange: PropTypes.func,
+       handleSubmit: PropTypes.func,
+       onCancel: PropTypes.func,
+       touched: PropTypes.shape({
+               seed: PropTypes.bool,
+               title: PropTypes.bool,
+       }),
+       values: PropTypes.shape({
+               seed: PropTypes.string,
+               title: PropTypes.string,
+       }),
+};
+
+export default withFormik({
+       displayName: 'EditForm',
+       enableReinitialize: true,
+       handleSubmit: async (values, actions) => {
+               const { round_id } = values;
+               const { setErrors } = actions;
+               const { onCancel } = actions.props;
+               try {
+                       await axios.put(`/api/rounds/${round_id}`, values);
+                       toastr.success(i18n.t('rounds.editSuccess'));
+                       if (onCancel) {
+                               onCancel();
+                       }
+               } catch (e) {
+                       toastr.error(i18n.t('rounds.editError'));
+                       if (e.response && e.response.data && e.response.data.errors) {
+                               setErrors(laravelErrorsToFormik(e.response.data.errors));
+                       }
+               }
+       },
+       mapPropsToValues: ({ round }) => ({
+               round_id: round.id,
+               seed: round.seed || '',
+               title: round.title || '',
+       }),
+       validationSchema: yup.object().shape({
+               seed: yup.string().url(),
+               title: yup.string(),
+       }),
+})(withTranslation()(EditForm));