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