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);