]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/twitch-bot/ChatSettingsForm.js
svg dungeon 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                 </Row>
89                 <div className="button-bar mt-3">
90                         <Button disabled={!dirty || isSubmitting} type="submit" variant="primary">
91                                 {t('button.save')}
92                         </Button>
93                 </div>
94         </Form>;
95 };
96
97 ChatSettingsForm.propTypes = {
98         dirty: PropTypes.bool,
99         errors: PropTypes.shape({
100                 wait_msgs_max: PropTypes.string,
101                 wait_msgs_min: PropTypes.string,
102                 wait_time_min: PropTypes.string,
103                 wait_time_max: PropTypes.string,
104         }),
105         handleBlur: PropTypes.func,
106         handleChange: PropTypes.func,
107         handleSubmit: PropTypes.func,
108         isSubmitting: PropTypes.bool,
109         touched: PropTypes.shape({
110                 wait_msgs_max: PropTypes.bool,
111                 wait_msgs_min: PropTypes.bool,
112                 wait_time_min: PropTypes.bool,
113                 wait_time_max: PropTypes.bool,
114         }),
115         values: PropTypes.shape({
116                 wait_msgs_max: PropTypes.number,
117                 wait_msgs_min: PropTypes.number,
118                 wait_time_min: PropTypes.string,
119                 wait_time_max: PropTypes.string,
120         }),
121 };
122
123 export default withFormik({
124         displayName: 'ChatSettingsForm',
125         enableReinitialize: true,
126         handleSubmit: async (values, actions) => {
127                 const { onSubmit } = actions.props;
128                 await onSubmit({
129                         ...values,
130                         wait_time_min: parseTime(values.wait_time_min) || 0,
131                         wait_time_max: parseTime(values.wait_time_max) || 0,
132                 });
133         },
134         mapPropsToValues: ({ channel }) => ({
135                 wait_msgs_min: channel.chat_settings.wait_msgs_min || 1,
136                 wait_msgs_max: channel.chat_settings.wait_msgs_max || 10,
137                 wait_time_min: channel.chat_settings.wait_time_min
138                         ? formatTime({ time: channel.chat_settings.wait_time_min }) : '0',
139                 wait_time_max: channel.chat_settings.wait_time_max
140                         ? formatTime({ time: channel.chat_settings.wait_time_max }) : '15:00',
141         }),
142         validationSchema: yup.object().shape({
143                 wait_msgs_min: yup.number().min(1),
144                 wait_msgs_max: yup.number().min(1),
145                 wait_time_min: yup.string().time(),
146                 wait_time_max: yup.string().time(),
147         }),
148 })(ChatSettingsForm);