]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/rounds/EditForm.js
57ee95a5a6e1298c97d9891617beab9e121ac376
[alttp.git] / 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));