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