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                         <Form.Group as={Col} md={6} controlId="chatSettings.min_age">
 131                                 <Form.Label>{t('twitchBot.chatMinAge')}</Form.Label>
 132                                 <Form.Control
 133                                         isInvalid={!!(touched.min_age && errors.min_age)}
 134                                         name="min_age"
 135                                         min="1"
 136                                         onBlur={handleBlur}
 137                                         onChange={handleChange}
 138                                         type="number"
 139                                         value={values.min_age || 1}
 140                                 />
 141                         </Form.Group>
 142                         <Form.Group as={Col} md={6} controlId="chatSettings.source">
 143                                 <Form.Label>{t('twitchBot.chatSource')}</Form.Label>
 144                                 <Form.Select
 145                                         isInvalid={!!(touched.source && errors.source)}
 146                                         name="source"
 147                                         onBlur={handleBlur}
 148                                         onChange={handleChange}
 149                                         value={values.source || 'any'}
 150                                 >
 151                                         {['any', 'cat', 'chan', 'catchan'].map(value =>
 152                                                 <option key={value} value={value}>
 153                                                         {t(`twitchBot.chatSources.${value}`)}
 154                                                 </option>
 155                                         )}
 156                                 </Form.Select>
 157                                 {touched.respond && errors.respond ?
 158                                         <Form.Control.Feedback type="invalid">
 159                                                 {t(errors.respond)}
 160                                         </Form.Control.Feedback>
 161                                 : null}
 162                         </Form.Group>
 163                 </Row>
 164                 <div className="button-bar mt-3">
 165                         <Button disabled={!dirty || isSubmitting} type="submit" variant="primary">
 166                                 {t('button.save')}
 167                         </Button>
 168                 </div>
 169         </Form>;
 170 };
 171
 172 ChatSettingsForm.propTypes = {
 173         dirty: PropTypes.bool,
 174         errors: PropTypes.shape({
 175                 language: PropTypes.string,
 176                 min_age: PropTypes.string,
 177                 respond: PropTypes.string,
 178                 source: PropTypes.string,
 179                 wait_msgs_max: PropTypes.string,
 180                 wait_msgs_min: PropTypes.string,
 181                 wait_time_min: PropTypes.string,
 182                 wait_time_max: PropTypes.string,
 183         }),
 184         handleBlur: PropTypes.func,
 185         handleChange: PropTypes.func,
 186         handleSubmit: PropTypes.func,
 187         isSubmitting: PropTypes.bool,
 188         touched: PropTypes.shape({
 189                 language: PropTypes.bool,
 190                 min_age: PropTypes.bool,
 191                 respond: PropTypes.bool,
 192                 source: PropTypes.bool,
 193                 wait_msgs_max: PropTypes.bool,
 194                 wait_msgs_min: PropTypes.bool,
 195                 wait_time_min: PropTypes.bool,
 196                 wait_time_max: PropTypes.bool,
 197         }),
 198         values: PropTypes.shape({
 199                 language: PropTypes.string,
 200                 min_age: PropTypes.number,
 201                 respond: PropTypes.string,
 202                 source: PropTypes.string,
 203                 wait_msgs_max: PropTypes.number,
 204                 wait_msgs_min: PropTypes.number,
 205                 wait_time_min: PropTypes.string,
 206                 wait_time_max: PropTypes.string,
 207         }),
 208 };
 209
 210 export default withFormik({
 211         displayName: 'ChatSettingsForm',
 212         enableReinitialize: true,
 213         handleSubmit: async (values, actions) => {
 214                 const { onSubmit } = actions.props;
 215                 await onSubmit({
 216                         ...values,
 217                         wait_time_min: parseTime(values.wait_time_min) || 0,
 218                         wait_time_max: parseTime(values.wait_time_max) || 0,
 219                 });
 220         },
 221         mapPropsToValues: ({ channel }) => ({
 222                 language: channel.chat_settings.language || channel.languages[0] || 'de',
 223                 min_age: channel.chat_settings.min_age || 1,
 224                 respond: channel.chat_settings.respond || 'yes',
 225                 source: channel.chat_settings.source || 'any',
 226                 wait_msgs_min: channel.chat_settings.wait_msgs_min || 1,
 227                 wait_msgs_max: channel.chat_settings.wait_msgs_max || 10,
 228                 wait_time_min: channel.chat_settings.wait_time_min
 229                         ? formatTime({ time: channel.chat_settings.wait_time_min }) : '0',
 230                 wait_time_max: channel.chat_settings.wait_time_max
 231                         ? formatTime({ time: channel.chat_settings.wait_time_max }) : '15:00',
 232         }),
 233         validationSchema: yup.object().shape({
 234                 language: yup.string(),
 235                 min_age: yup.number().min(1),
 236                 respond: yup.string(),
 237                 wait_msgs_min: yup.number().min(1),
 238                 wait_msgs_max: yup.number().min(1),
 239                 wait_time_min: yup.string().time(),
 240                 wait_time_max: yup.string().time(),
 241         }),
 242 })(ChatSettingsForm);