]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/twitch-bot/ChatSettingsForm.js
compact keysanity tracker
[alttp.git] / resources / js / components / twitch-bot / ChatSettingsForm.js
1 import { withFormik } from 'formik';
2 import PropTypes from 'prop-types';
3 import React from 'react';
4 import { Button, Col, Form, Row } from 'react-bootstrap';
5 import { useTranslation } from 'react-i18next';
6
7 import { formatTime, parseTime } from '../../helpers/Result';
8 import yup from '../../schema/yup';
9
10 const ChatSettingsForm = ({
11         dirty,
12         errors,
13         handleBlur,
14         handleChange,
15         handleSubmit,
16         isSubmitting,
17         touched,
18         values,
19 }) => {
20         const { t } = useTranslation();
21
22         return <Form noValidate onSubmit={handleSubmit}>
23                 <Row>
24                         <Form.Group as={Col} md={6} controlId="chatSettings.wait_msgs_min">
25                                 <Form.Label>{t('twitchBot.chatWaitMsgsMin')}</Form.Label>
26                                 <Form.Control
27                                         isInvalid={!!(touched.wait_msgs_min && errors.wait_msgs_min)}
28                                         name="wait_msgs_min"
29                                         min="1"
30                                         onBlur={handleBlur}
31                                         onChange={handleChange}
32                                         type="number"
33                                         value={values.wait_msgs_min || 1}
34                                 />
35                         </Form.Group>
36                         <Form.Group as={Col} md={6} controlId="chatSettings.wait_msgs_max">
37                                 <Form.Label>{t('twitchBot.chatWaitMsgsMax')}</Form.Label>
38                                 <Form.Control
39                                         isInvalid={!!(touched.wait_msgs_max && errors.wait_msgs_max)}
40                                         name="wait_msgs_max"
41                                         min="1"
42                                         onBlur={handleBlur}
43                                         onChange={handleChange}
44                                         type="number"
45                                         value={values.wait_msgs_max || 10}
46                                 />
47                         </Form.Group>
48                         <Form.Group as={Col} md={6} controlId="chatSettings.wait_time_min">
49                                 <Form.Label>{t('twitchBot.chatWaitTimeMin')}</Form.Label>
50                                 <Form.Control
51                                         isInvalid={!!(touched.wait_time_min && errors.wait_time_min)}
52                                         name="wait_time_min"
53                                         onBlur={handleBlur}
54                                         onChange={handleChange}
55                                         type="text"
56                                         value={values.wait_time_min || '0'}
57                                 />
58                                 {touched.wait_time_min && errors.wait_time_min ?
59                                         <Form.Control.Feedback type="invalid">
60                                                 {t(errors.wait_time_min)}
61                                         </Form.Control.Feedback>
62                                 :
63                                         <Form.Text muted>
64                                                 {formatTime({ time: parseTime(values.wait_time_min)})}
65                                         </Form.Text>
66                                 }
67                         </Form.Group>
68                         <Form.Group as={Col} md={6} controlId="chatSettings.wait_time_max">
69                                 <Form.Label>{t('twitchBot.chatWaitTimeMax')}</Form.Label>
70                                 <Form.Control
71                                         isInvalid={!!(touched.wait_time_max && errors.wait_time_max)}
72                                         name="wait_time_max"
73                                         onBlur={handleBlur}
74                                         onChange={handleChange}
75                                         type="text"
76                                         value={values.wait_time_max || '15:00'}
77                                 />
78                                 {touched.wait_time_max && errors.wait_time_max ?
79                                         <Form.Control.Feedback type="invalid">
80                                                 {t(errors.wait_time_max)}
81                                         </Form.Control.Feedback>
82                                 :
83                                         <Form.Text muted>
84                                                 {formatTime({ time: parseTime(values.wait_time_max)})}
85                                         </Form.Text>
86                                 }
87                         </Form.Group>
88                         <Form.Group as={Col} md={6} controlId="chatSettings.language">
89                                 <Form.Label>{t('twitchBot.language')}</Form.Label>
90                                 <Form.Select
91                                         isInvalid={!!(touched.language && errors.language)}
92                                         name="language"
93                                         onBlur={handleBlur}
94                                         onChange={handleChange}
95                                         value={values.language || 'de'}
96                                 >
97                                         {['de', 'en', 'es', 'fr'].map(lang =>
98                                                 <option key={lang} value={lang}>
99                                                         {t(`general.languages.${lang}`)}
100                                                 </option>
101                                         )}
102                                 </Form.Select>
103                                 {touched.language && errors.language ?
104                                         <Form.Control.Feedback type="invalid">
105                                                 {t(errors.language)}
106                                         </Form.Control.Feedback>
107                                 : null}
108                         </Form.Group>
109                         <Form.Group as={Col} md={6} controlId="chatSettings.respond">
110                                 <Form.Label>{t('twitchBot.respond')}</Form.Label>
111                                 <Form.Select
112                                         isInvalid={!!(touched.respond && errors.respond)}
113                                         name="respond"
114                                         onBlur={handleBlur}
115                                         onChange={handleChange}
116                                         value={values.respond || 'yes'}
117                                 >
118                                         {['yes', '50', 'no'].map(value =>
119                                                 <option key={value} value={value}>
120                                                         {t(`twitchBot.respondOptions.${value}`)}
121                                                 </option>
122                                         )}
123                                 </Form.Select>
124                                 {touched.respond && errors.respond ?
125                                         <Form.Control.Feedback type="invalid">
126                                                 {t(errors.respond)}
127                                         </Form.Control.Feedback>
128                                 : null}
129                         </Form.Group>
130                 </Row>
131                 <div className="button-bar mt-3">
132                         <Button disabled={!dirty || isSubmitting} type="submit" variant="primary">
133                                 {t('button.save')}
134                         </Button>
135                 </div>
136         </Form>;
137 };
138
139 ChatSettingsForm.propTypes = {
140         dirty: PropTypes.bool,
141         errors: PropTypes.shape({
142                 language: PropTypes.string,
143                 respond: PropTypes.string,
144                 wait_msgs_max: PropTypes.string,
145                 wait_msgs_min: PropTypes.string,
146                 wait_time_min: PropTypes.string,
147                 wait_time_max: PropTypes.string,
148         }),
149         handleBlur: PropTypes.func,
150         handleChange: PropTypes.func,
151         handleSubmit: PropTypes.func,
152         isSubmitting: PropTypes.bool,
153         touched: PropTypes.shape({
154                 language: PropTypes.bool,
155                 respond: PropTypes.bool,
156                 wait_msgs_max: PropTypes.bool,
157                 wait_msgs_min: PropTypes.bool,
158                 wait_time_min: PropTypes.bool,
159                 wait_time_max: PropTypes.bool,
160         }),
161         values: PropTypes.shape({
162                 language: PropTypes.string,
163                 respond: PropTypes.string,
164                 wait_msgs_max: PropTypes.number,
165                 wait_msgs_min: PropTypes.number,
166                 wait_time_min: PropTypes.string,
167                 wait_time_max: PropTypes.string,
168         }),
169 };
170
171 export default withFormik({
172         displayName: 'ChatSettingsForm',
173         enableReinitialize: true,
174         handleSubmit: async (values, actions) => {
175                 const { onSubmit } = actions.props;
176                 await onSubmit({
177                         ...values,
178                         wait_time_min: parseTime(values.wait_time_min) || 0,
179                         wait_time_max: parseTime(values.wait_time_max) || 0,
180                 });
181         },
182         mapPropsToValues: ({ channel }) => ({
183                 language: channel.chat_settings.language || channel.languages[0] || 'de',
184                 respond: channel.chat_settings.respond || 'yes',
185                 wait_msgs_min: channel.chat_settings.wait_msgs_min || 1,
186                 wait_msgs_max: channel.chat_settings.wait_msgs_max || 10,
187                 wait_time_min: channel.chat_settings.wait_time_min
188                         ? formatTime({ time: channel.chat_settings.wait_time_min }) : '0',
189                 wait_time_max: channel.chat_settings.wait_time_max
190                         ? formatTime({ time: channel.chat_settings.wait_time_max }) : '15:00',
191         }),
192         validationSchema: yup.object().shape({
193                 language: yup.string(),
194                 respond: yup.string(),
195                 wait_msgs_min: yup.number().min(1),
196                 wait_msgs_max: yup.number().min(1),
197                 wait_time_min: yup.string().time(),
198                 wait_time_max: yup.string().time(),
199         }),
200 })(ChatSettingsForm);