]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/twitch-bot/CommandForm.js
tracker items as svg
[alttp.git] / resources / js / components / twitch-bot / CommandForm.js
1 import { withFormik } from 'formik';
2 import PropTypes from 'prop-types';
3 import React from 'react';
4 import { Button, Form, Modal } from 'react-bootstrap';
5 import { useTranslation } from 'react-i18next';
6
7 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
8 import yup from '../../schema/yup';
9
10 const CommandForm = ({
11         errors,
12         handleBlur,
13         handleChange,
14         handleSubmit,
15         name,
16         onCancel,
17         touched,
18         values,
19 }) => {
20         const { t } = useTranslation();
21
22         const COMMANDS = [
23                 'none',
24                 'runner',
25                 'crew',
26                 'guessing-start',
27                 'guessing-stop',
28                 'guessing-solve',
29                 'guessing-cancel',
30                 'guessing-leaderboard',
31         ];
32         const RESTRICTIONS = [
33                 'none',
34                 'mod',
35                 'owner',
36         ];
37
38         return <Form noValidate onSubmit={handleSubmit}>
39                 <Modal.Body>
40                         <Form.Group controlId="command.name">
41                                 <Form.Label>{t('twitchBot.commandName')}</Form.Label>
42                                 <Form.Control
43                                         disabled={!!name}
44                                         isInvalid={!!(touched.name && errors.name)}
45                                         name="name"
46                                         onBlur={handleBlur}
47                                         onChange={handleChange}
48                                         plaintext={!!name}
49                                         readOnly={!!name}
50                                         type="text"
51                                         value={values.name || ''}
52                                 />
53                                 {touched.name && errors.name ?
54                                         <Form.Control.Feedback type="invalid">
55                                                 {t(errors.name)}
56                                         </Form.Control.Feedback>
57                                 : null}
58                         </Form.Group>
59                         <Form.Group controlId="command.restrict">
60                                 <Form.Label>{t('twitchBot.commandRestriction')}</Form.Label>
61                                 <Form.Select
62                                         isInvalid={!!(touched.restrict && errors.restrict)}
63                                         name="restrict"
64                                         onBlur={handleBlur}
65                                         onChange={handleChange}
66                                         value={values.restrict || 'none'}
67                                 >
68                                         {RESTRICTIONS.map(r =>
69                                                 <option key={r} value={r}>
70                                                         {t(`twitchBot.commandRestrictions.${r}`)}
71                                                 </option>
72                                         )}
73                                 </Form.Select>
74                                 {touched.restrict && errors.restrict ?
75                                         <Form.Control.Feedback type="invalid">
76                                                 {t(errors.restrict)}
77                                         </Form.Control.Feedback>
78                                 : null}
79                         </Form.Group>
80                         <Form.Group controlId="command.command">
81                                 <Form.Label>{t('twitchBot.commandType')}</Form.Label>
82                                 <Form.Select
83                                         isInvalid={!!(touched.command && errors.command)}
84                                         name="command"
85                                         onBlur={handleBlur}
86                                         onChange={handleChange}
87                                         value={values.command || 'none'}
88                                 >
89                                         {COMMANDS.map(c =>
90                                                 <option key={c} value={c}>
91                                                         {t(`twitchBot.commandTypes.${c}`)}
92                                                 </option>
93                                         )}
94                                 </Form.Select>
95                                 {touched.command && errors.command ?
96                                         <Form.Control.Feedback type="invalid">
97                                                 {t(errors.command)}
98                                         </Form.Control.Feedback>
99                                 : null}
100                         </Form.Group>
101                 </Modal.Body>
102                 <Modal.Footer>
103                         {onCancel ?
104                                 <Button onClick={onCancel} variant="secondary">
105                                         {t('button.cancel')}
106                                 </Button>
107                         : null}
108                         <Button type="submit" variant="primary">
109                                 {t('button.save')}
110                         </Button>
111                 </Modal.Footer>
112         </Form>;
113 };
114
115 CommandForm.propTypes = {
116         errors: PropTypes.shape({
117                 command: PropTypes.string,
118                 name: PropTypes.string,
119                 restrict: PropTypes.string,
120         }),
121         handleBlur: PropTypes.func,
122         handleChange: PropTypes.func,
123         handleSubmit: PropTypes.func,
124         name: PropTypes.string,
125         onCancel: PropTypes.func,
126         touched: PropTypes.shape({
127                 command: PropTypes.bool,
128                 name: PropTypes.bool,
129                 restrict: PropTypes.bool,
130         }),
131         values: PropTypes.shape({
132                 command: PropTypes.string,
133                 name: PropTypes.string,
134                 restrict: PropTypes.string,
135         }),
136 };
137
138 export default withFormik({
139         displayName: 'CommandForm',
140         enableReinitialize: true,
141         handleSubmit: async (values, actions) => {
142                 const { setErrors } = actions;
143                 const { onSubmit } = actions.props;
144                 try {
145                         await onSubmit(values);
146                 } catch (e) {
147                         if (e.response && e.response.data && e.response.data.errors) {
148                                 setErrors(laravelErrorsToFormik(e.response.data.errors));
149                         }
150                 }
151         },
152         mapPropsToValues: ({ name, settings }) => {
153                 return {
154                         command: (settings && settings.command) || 'none',
155                         name: name || '',
156                         restrict: (settings && settings.restrict) || 'none',
157                 };
158         },
159         validationSchema: yup.object().shape({
160                 command: yup.string(),
161                 name: yup.string().required(),
162                 restrict: yup.string(),
163         }),
164 })(CommandForm);