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 laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
8 import i18n from '../../i18n';
9 import yup from '../../schema/yup';
11 const GuessingSettingsForm = ({
20 const { t } = useTranslation();
22 return <Form noValidate onSubmit={handleSubmit}>
24 <Form.Group as={Col} controlId="gg.points_exact_first" md={6}>
25 <Form.Label>{t('twitchBot.guessingGame.pointsExactFirst')}</Form.Label>
27 isInvalid={!!(touched.points_exact_first && errors.points_exact_first)}
30 name="points_exact_first"
32 onChange={handleChange}
35 value={values.points_exact_first || 0}
37 {touched.points_exact_first && errors.points_exact_first ?
38 <Form.Control.Feedback type="invalid">
39 {t(errors.points_exact_first)}
40 </Form.Control.Feedback>
43 <Form.Group as={Col} controlId="gg.points_exact_other" md={6}>
44 <Form.Label>{t('twitchBot.guessingGame.pointsExactOther')}</Form.Label>
46 isInvalid={!!(touched.points_exact_other && errors.points_exact_other)}
49 name="points_exact_other"
51 onChange={handleChange}
54 value={values.points_exact_other || 0}
56 {touched.points_exact_other && errors.points_exact_other ?
57 <Form.Control.Feedback type="invalid">
58 {t(errors.points_exact_other)}
59 </Form.Control.Feedback>
62 <Form.Group as={Col} controlId="gg.points_close_first" md={6}>
63 <Form.Label>{t('twitchBot.guessingGame.pointsCloseFirst')}</Form.Label>
65 isInvalid={!!(touched.points_close_first && errors.points_close_first)}
68 name="points_close_first"
70 onChange={handleChange}
73 value={values.points_close_first || 0}
75 {touched.points_close_first && errors.points_close_first ?
76 <Form.Control.Feedback type="invalid">
77 {t(errors.points_close_first)}
78 </Form.Control.Feedback>
81 <Form.Group as={Col} controlId="gg.points_close_other" md={6}>
82 <Form.Label>{t('twitchBot.guessingGame.pointsCloseOther')}</Form.Label>
84 isInvalid={!!(touched.points_close_other && errors.points_close_other)}
87 name="points_close_other"
89 onChange={handleChange}
92 value={values.points_close_other || 0}
94 {touched.points_close_other && errors.points_close_other ?
95 <Form.Control.Feedback type="invalid">
96 {t(errors.points_close_other)}
97 </Form.Control.Feedback>
100 <Form.Group as={Col} controlId="gg.points_close_max" md={6}>
101 <Form.Label>{t('twitchBot.guessingGame.pointsCloseMax')}</Form.Label>
103 isInvalid={!!(touched.points_close_max && errors.points_close_max)}
105 name="points_close_max"
107 onChange={handleChange}
110 value={values.points_close_max || 0}
112 {touched.points_close_max && errors.points_close_max ?
113 <Form.Control.Feedback type="invalid">
114 {t(errors.points_close_max)}
115 </Form.Control.Feedback>
119 <Form.Group controlId="gg.start_message">
120 <Form.Label>{t('twitchBot.guessingGame.startMessage')}</Form.Label>
122 isInvalid={!!(touched.start_message && errors.start_message)}
125 onChange={handleChange}
127 value={values.start_message || ''}
129 {touched.start_message && errors.start_message ?
130 <Form.Control.Feedback type="invalid">
131 {t(errors.start_message)}
132 </Form.Control.Feedback>
135 <Form.Group controlId="gg.stop_message">
136 <Form.Label>{t('twitchBot.guessingGame.stopMessage')}</Form.Label>
138 isInvalid={!!(touched.stop_message && errors.stop_message)}
141 onChange={handleChange}
143 value={values.stop_message || ''}
145 {touched.stop_message && errors.stop_message ?
146 <Form.Control.Feedback type="invalid">
147 {t(errors.stop_message)}
148 </Form.Control.Feedback>
151 <Form.Group controlId="gg.winners_message">
152 <Form.Label>{t('twitchBot.guessingGame.winnersMessage')}</Form.Label>
154 isInvalid={!!(touched.winners_message && errors.winners_message)}
155 name="winners_message"
157 onChange={handleChange}
159 value={values.winners_message || ''}
161 {touched.winners_message && errors.winners_message ?
162 <Form.Control.Feedback type="invalid">
163 {t(errors.winners_message)}
164 </Form.Control.Feedback>
167 {t('twitchBot.guessingGame.winnersMessageHint')}
171 <Form.Group controlId="gg.no_winners_message">
172 <Form.Label>{t('twitchBot.guessingGame.noWinnersMessage')}</Form.Label>
174 isInvalid={!!(touched.no_winners_message && errors.no_winners_message)}
175 name="no_winners_message"
177 onChange={handleChange}
179 value={values.no_winners_message || ''}
181 {touched.no_winners_message && errors.no_winners_message ?
182 <Form.Control.Feedback type="invalid">
183 {t(errors.no_winners_message)}
184 </Form.Control.Feedback>
187 <Form.Group controlId="gg.cancel_message">
188 <Form.Label>{t('twitchBot.guessingGame.cancelMessage')}</Form.Label>
190 isInvalid={!!(touched.cancel_message && errors.cancel_message)}
191 name="cancel_message"
193 onChange={handleChange}
195 value={values.cancel_message || ''}
197 {touched.cancel_message && errors.cancel_message ?
198 <Form.Control.Feedback type="invalid">
199 {t(errors.cancel_message)}
200 </Form.Control.Feedback>
203 <Form.Group controlId="gg.invalid_solution_message">
204 <Form.Label>{t('twitchBot.guessingGame.invalidSolutionMessage')}</Form.Label>
206 isInvalid={!!(touched.invalid_solution_message && errors.invalid_solution_message)}
207 name="invalid_solution_message"
209 onChange={handleChange}
211 value={values.invalid_solution_message || ''}
213 {touched.invalid_solution_message && errors.invalid_solution_message ?
214 <Form.Control.Feedback type="invalid">
215 {t(errors.invalid_solution_message)}
216 </Form.Control.Feedback>
219 <Form.Group controlId="gg.active_message">
220 <Form.Label>{t('twitchBot.guessingGame.activeMessage')}</Form.Label>
222 isInvalid={!!(touched.active_message && errors.active_message)}
223 name="active_message"
225 onChange={handleChange}
227 value={values.active_message || ''}
229 {touched.active_message && errors.active_message ?
230 <Form.Control.Feedback type="invalid">
231 {t(errors.active_message)}
232 </Form.Control.Feedback>
235 <Form.Group controlId="gg.not_active_message">
236 <Form.Label>{t('twitchBot.guessingGame.notActiveMessage')}</Form.Label>
238 isInvalid={!!(touched.not_active_message && errors.not_active_message)}
239 name="not_active_message"
241 onChange={handleChange}
243 value={values.not_active_message || ''}
245 {touched.not_active_message && errors.not_active_message ?
246 <Form.Control.Feedback type="invalid">
247 {t(errors.not_active_message)}
248 </Form.Control.Feedback>
251 <div className="button-bar mt-3">
253 <Button onClick={onCancel} variant="secondary">
257 <Button type="submit" variant="primary">
264 GuessingSettingsForm.propTypes = {
265 errors: PropTypes.shape({
266 active_message: PropTypes.string,
267 cancel_message: PropTypes.string,
268 invalid_solution_message: PropTypes.string,
269 name: PropTypes.string,
270 no_winners_message: PropTypes.string,
271 not_active_message: PropTypes.string,
272 points_close_first: PropTypes.string,
273 points_close_max: PropTypes.string,
274 points_close_other: PropTypes.string,
275 points_exact_first: PropTypes.string,
276 points_exact_other: PropTypes.string,
277 start_message: PropTypes.string,
278 stop_message: PropTypes.string,
279 winners_message: PropTypes.string,
281 handleBlur: PropTypes.func,
282 handleChange: PropTypes.func,
283 handleSubmit: PropTypes.func,
284 name: PropTypes.string,
285 onCancel: PropTypes.func,
286 touched: PropTypes.shape({
287 active_message: PropTypes.bool,
288 cancel_message: PropTypes.bool,
289 invalid_solution_message: PropTypes.bool,
290 name: PropTypes.bool,
291 no_winners_message: PropTypes.bool,
292 not_active_message: PropTypes.bool,
293 points_close_first: PropTypes.bool,
294 points_close_max: PropTypes.bool,
295 points_close_other: PropTypes.bool,
296 points_exact_first: PropTypes.bool,
297 points_exact_other: PropTypes.bool,
298 start_message: PropTypes.bool,
299 stop_message: PropTypes.bool,
300 winners_message: PropTypes.bool,
302 values: PropTypes.shape({
303 active_message: PropTypes.string,
304 cancel_message: PropTypes.string,
305 invalid_solution_message: PropTypes.string,
306 name: PropTypes.string,
307 no_winners_message: PropTypes.string,
308 not_active_message: PropTypes.string,
309 points_close_first: PropTypes.number,
310 points_close_max: PropTypes.number,
311 points_close_other: PropTypes.number,
312 points_exact_first: PropTypes.number,
313 points_exact_other: PropTypes.number,
314 start_message: PropTypes.string,
315 stop_message: PropTypes.string,
316 winners_message: PropTypes.string,
320 export default withFormik({
321 displayName: 'GuessingSettingsForm',
322 enableReinitialize: true,
323 handleSubmit: async (values, actions) => {
324 const { setErrors } = actions;
325 const { onSubmit } = actions.props;
327 await onSubmit(values);
329 if (e.response && e.response.data && e.response.data.errors) {
330 setErrors(laravelErrorsToFormik(e.response.data.errors));
334 mapPropsToValues: ({ name, settings }) => {
335 const getNumericValue = (s, n, d) => s && Object.prototype.hasOwnProperty.call(s, n)
337 const getStringValue = (s, n, d) => s && Object.prototype.hasOwnProperty.call(s, n)
338 ? s[n] : i18n.t(`twitchBot.guessingGame.default${d}`);
340 active_message: getStringValue(settings, 'active_message', 'ActiveMessage'),
341 cancel_message: getStringValue(settings, 'cancel_message', 'CancelMessage'),
342 invalid_solution_message:
343 getStringValue(settings, 'invalid_solution_message', 'InvalidSolutionMessage'),
345 no_winners_message: getStringValue(settings, 'no_winners_message', 'NoWinnersMessage'),
346 not_active_message: getStringValue(settings, 'not_active_message', 'NotActiveMessage'),
347 points_close_first: getNumericValue(settings, 'points_close_first', 1),
348 points_close_max: getNumericValue(settings, 'points_close_max', 3),
349 points_close_other: getNumericValue(settings, 'points_close_other', 1),
350 points_exact_first: getNumericValue(settings, 'points_exact_first', 1),
351 points_exact_other: getNumericValue(settings, 'points_exact_other', 1),
352 start_message: getStringValue(settings, 'start_message', 'StartMessage'),
353 stop_message: getStringValue(settings, 'stop_message', 'StopMessage'),
354 winners_message: getStringValue(settings, 'winners_message', 'WinnersMessage'),
357 validationSchema: yup.object().shape({
358 active_message: yup.string(),
359 cancel_message: yup.string(),
360 invalid_solution_message: yup.string(),
361 name: yup.string().required(),
362 no_winners_message: yup.string(),
363 not_active_message: yup.string(),
364 points_close_first: yup.number(),
365 points_close_max: yup.number(),
366 points_close_other: yup.number(),
367 points_exact_first: yup.number(),
368 points_exact_other: yup.number(),
369 start_message: yup.string(),
370 stop_message: yup.string(),
371 winners_message: yup.string(),
373 })(GuessingSettingsForm);