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