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';
7 import { formatTime, parseTime } from '../../helpers/Result';
8 import yup from '../../schema/yup';
10 const ChatSettingsForm = ({
20 const { t } = useTranslation();
22 return <Form noValidate onSubmit={handleSubmit}>
24 <Form.Group as={Col} md={6} controlId="chatSettings.wait_msgs_min">
25 <Form.Label>{t('twitchBot.chatWaitMsgsMin')}</Form.Label>
27 isInvalid={!!(touched.wait_msgs_min && errors.wait_msgs_min)}
31 onChange={handleChange}
33 value={values.wait_msgs_min || 1}
36 <Form.Group as={Col} md={6} controlId="chatSettings.wait_msgs_max">
37 <Form.Label>{t('twitchBot.chatWaitMsgsMax')}</Form.Label>
39 isInvalid={!!(touched.wait_msgs_max && errors.wait_msgs_max)}
43 onChange={handleChange}
45 value={values.wait_msgs_max || 10}
48 <Form.Group as={Col} md={6} controlId="chatSettings.wait_time_min">
49 <Form.Label>{t('twitchBot.chatWaitTimeMin')}</Form.Label>
51 isInvalid={!!(touched.wait_time_min && errors.wait_time_min)}
54 onChange={handleChange}
56 value={values.wait_time_min || '0'}
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>
64 {formatTime({ time: parseTime(values.wait_time_min)})}
68 <Form.Group as={Col} md={6} controlId="chatSettings.wait_time_max">
69 <Form.Label>{t('twitchBot.chatWaitTimeMax')}</Form.Label>
71 isInvalid={!!(touched.wait_time_max && errors.wait_time_max)}
74 onChange={handleChange}
76 value={values.wait_time_max || '15:00'}
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>
84 {formatTime({ time: parseTime(values.wait_time_max)})}
88 <Form.Group as={Col} md={6} controlId="chatSettings.language">
89 <Form.Label>{t('twitchBot.language')}</Form.Label>
91 isInvalid={!!(touched.language && errors.language)}
94 onChange={handleChange}
95 value={values.language || 'de'}
97 {['de', 'en', 'es', 'fr'].map(lang =>
98 <option key={lang} value={lang}>
99 {t(`general.languages.${lang}`)}
103 {touched.language && errors.language ?
104 <Form.Control.Feedback type="invalid">
106 </Form.Control.Feedback>
109 <Form.Group as={Col} md={6} controlId="chatSettings.respond">
110 <Form.Label>{t('twitchBot.respond')}</Form.Label>
112 isInvalid={!!(touched.respond && errors.respond)}
115 onChange={handleChange}
116 value={values.respond || 'yes'}
118 {['yes', '50', 'no'].map(value =>
119 <option key={value} value={value}>
120 {t(`twitchBot.respondOptions.${value}`)}
124 {touched.respond && errors.respond ?
125 <Form.Control.Feedback type="invalid">
127 </Form.Control.Feedback>
130 <Form.Group as={Col} md={6} controlId="chatSettings.min_age">
131 <Form.Label>{t('twitchBot.chatMinAge')}</Form.Label>
133 isInvalid={!!(touched.min_age && errors.min_age)}
137 onChange={handleChange}
139 value={values.min_age || 1}
142 <Form.Group as={Col} md={6} controlId="chatSettings.source">
143 <Form.Label>{t('twitchBot.chatSource')}</Form.Label>
145 isInvalid={!!(touched.source && errors.source)}
148 onChange={handleChange}
149 value={values.source || 'any'}
151 {['any', 'cat', 'chan', 'catchan'].map(value =>
152 <option key={value} value={value}>
153 {t(`twitchBot.chatSources.${value}`)}
157 {touched.respond && errors.respond ?
158 <Form.Control.Feedback type="invalid">
160 </Form.Control.Feedback>
163 <Form.Group as={Col} md={6} controlId="chatSettings.adlib">
164 <Form.Label>{t('twitchBot.chatAdlibChance')}</Form.Label>
166 isInvalid={!!(touched.adlib && errors.adlib)}
171 onChange={handleChange}
173 value={values.adlib || 1}
177 <div className="button-bar mt-3">
178 <Button disabled={!dirty || isSubmitting} type="submit" variant="primary">
185 ChatSettingsForm.propTypes = {
186 dirty: PropTypes.bool,
187 errors: PropTypes.shape({
188 adlib: PropTypes.string,
189 language: PropTypes.string,
190 min_age: PropTypes.string,
191 respond: PropTypes.string,
192 source: PropTypes.string,
193 wait_msgs_max: PropTypes.string,
194 wait_msgs_min: PropTypes.string,
195 wait_time_min: PropTypes.string,
196 wait_time_max: PropTypes.string,
198 handleBlur: PropTypes.func,
199 handleChange: PropTypes.func,
200 handleSubmit: PropTypes.func,
201 isSubmitting: PropTypes.bool,
202 touched: PropTypes.shape({
203 adlib: PropTypes.bool,
204 language: PropTypes.bool,
205 min_age: PropTypes.bool,
206 respond: PropTypes.bool,
207 source: PropTypes.bool,
208 wait_msgs_max: PropTypes.bool,
209 wait_msgs_min: PropTypes.bool,
210 wait_time_min: PropTypes.bool,
211 wait_time_max: PropTypes.bool,
213 values: PropTypes.shape({
214 adlib: PropTypes.number,
215 language: PropTypes.string,
216 min_age: PropTypes.number,
217 respond: PropTypes.string,
218 source: PropTypes.string,
219 wait_msgs_max: PropTypes.number,
220 wait_msgs_min: PropTypes.number,
221 wait_time_min: PropTypes.string,
222 wait_time_max: PropTypes.string,
226 export default withFormik({
227 displayName: 'ChatSettingsForm',
228 enableReinitialize: true,
229 handleSubmit: async (values, actions) => {
230 const { onSubmit } = actions.props;
233 wait_time_min: parseTime(values.wait_time_min) || 0,
234 wait_time_max: parseTime(values.wait_time_max) || 0,
237 mapPropsToValues: ({ channel }) => ({
238 adlib: channel.chat_settings.adlib || 50,
239 language: channel.chat_settings.language || channel.languages[0] || 'de',
240 min_age: channel.chat_settings.min_age || 1,
241 respond: channel.chat_settings.respond || 'yes',
242 source: channel.chat_settings.source || 'any',
243 wait_msgs_min: channel.chat_settings.wait_msgs_min || 1,
244 wait_msgs_max: channel.chat_settings.wait_msgs_max || 10,
245 wait_time_min: channel.chat_settings.wait_time_min
246 ? formatTime({ time: channel.chat_settings.wait_time_min }) : '0',
247 wait_time_max: channel.chat_settings.wait_time_max
248 ? formatTime({ time: channel.chat_settings.wait_time_max }) : '15:00',
250 validationSchema: yup.object().shape({
251 adlib: yup.number().min(0).max(100),
252 language: yup.string(),
253 min_age: yup.number().min(1),
254 respond: yup.string(),
255 wait_msgs_min: yup.number().min(1),
256 wait_msgs_max: yup.number().min(1),
257 wait_time_min: yup.string().time(),
258 wait_time_max: yup.string().time(),
260 })(ChatSettingsForm);