resources/js/components/twitch-bot/CommandForm.js

   1 import { withFormik } from 'formik';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4 import { Button, Form, Modal } from 'react-bootstrap';
   5 import { useTranslation } from 'react-i18next';
   6
   7 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
   8 import yup from '../../schema/yup';
   9
  10 const CommandForm = ({
  11         errors,
  12         handleBlur,
  13         handleChange,
  14         handleSubmit,
  15         name,
  16         onCancel,
  17         touched,
  18         values,
  19 }) => {
  20         const { t } = useTranslation();
  21
  22         const COMMANDS = [
  23                 'none',
  24                 'runner',
  25                 'crew',
  26                 'guessing-start',
  27                 'guessing-stop',
  28                 'guessing-solve',
  29                 'guessing-cancel',
  30         ];
  31         const RESTRICTIONS = [
  32                 'none',
  33                 'mod',
  34                 'owner',
  35         ];
  36
  37         return <Form noValidate onSubmit={handleSubmit}>
  38                 <Modal.Body>
  39                         <Form.Group controlId="command.name">
  40                                 <Form.Label>{t('twitchBot.commandName')}</Form.Label>
  41                                 <Form.Control
  42                                         disabled={!!name}
  43                                         isInvalid={!!(touched.name && errors.name)}
  44                                         name="name"
  45                                         onBlur={handleBlur}
  46                                         onChange={handleChange}
  47                                         plaintext={!!name}
  48                                         readOnly={!!name}
  49                                         type="text"
  50                                         value={values.name || ''}
  51                                 />
  52                                 {touched.name && errors.name ?
  53                                         <Form.Control.Feedback type="invalid">
  54                                                 {t(errors.name)}
  55                                         </Form.Control.Feedback>
  56                                 : null}
  57                         </Form.Group>
  58                         <Form.Group controlId="command.restrict">
  59                                 <Form.Label>{t('twitchBot.commandRestriction')}</Form.Label>
  60                                 <Form.Select
  61                                         isInvalid={!!(touched.restrict && errors.restrict)}
  62                                         name="restrict"
  63                                         onBlur={handleBlur}
  64                                         onChange={handleChange}
  65                                         value={values.restrict || 'none'}
  66                                 >
  67                                         {RESTRICTIONS.map(r =>
  68                                                 <option key={r} value={r}>
  69                                                         {t(`twitchBot.commandRestrictions.${r}`)}
  70                                                 </option>
  71                                         )}
  72                                 </Form.Select>
  73                                 {touched.restrict && errors.restrict ?
  74                                         <Form.Control.Feedback type="invalid">
  75                                                 {t(errors.restrict)}
  76                                         </Form.Control.Feedback>
  77                                 : null}
  78                         </Form.Group>
  79                         <Form.Group controlId="command.command">
  80                                 <Form.Label>{t('twitchBot.commandType')}</Form.Label>
  81                                 <Form.Select
  82                                         isInvalid={!!(touched.command && errors.command)}
  83                                         name="command"
  84                                         onBlur={handleBlur}
  85                                         onChange={handleChange}
  86                                         value={values.command || 'none'}
  87                                 >
  88                                         {COMMANDS.map(c =>
  89                                                 <option key={c} value={c}>
  90                                                         {t(`twitchBot.commandTypes.${c}`)}
  91                                                 </option>
  92                                         )}
  93                                 </Form.Select>
  94                                 {touched.command && errors.command ?
  95                                         <Form.Control.Feedback type="invalid">
  96                                                 {t(errors.command)}
  97                                         </Form.Control.Feedback>
  98                                 : null}
  99                         </Form.Group>
 100                 </Modal.Body>
 101                 <Modal.Footer>
 102                         {onCancel ?
 103                                 <Button onClick={onCancel} variant="secondary">
 104                                         {t('button.cancel')}
 105                                 </Button>
 106                         : null}
 107                         <Button type="submit" variant="primary">
 108                                 {t('button.save')}
 109                         </Button>
 110                 </Modal.Footer>
 111         </Form>;
 112 };
 113
 114 CommandForm.propTypes = {
 115         errors: PropTypes.shape({
 116                 command: PropTypes.string,
 117                 name: PropTypes.string,
 118                 restrict: PropTypes.string,
 119         }),
 120         handleBlur: PropTypes.func,
 121         handleChange: PropTypes.func,
 122         handleSubmit: PropTypes.func,
 123         name: PropTypes.string,
 124         onCancel: PropTypes.func,
 125         touched: PropTypes.shape({
 126                 command: PropTypes.bool,
 127                 name: PropTypes.bool,
 128                 restrict: PropTypes.bool,
 129         }),
 130         values: PropTypes.shape({
 131                 command: PropTypes.string,
 132                 name: PropTypes.string,
 133                 restrict: PropTypes.string,
 134         }),
 135 };
 136
 137 export default withFormik({
 138         displayName: 'CommandForm',
 139         enableReinitialize: true,
 140         handleSubmit: async (values, actions) => {
 141                 const { setErrors } = actions;
 142                 const { onSubmit } = actions.props;
 143                 try {
 144                         await onSubmit(values);
 145                 } catch (e) {
 146                         if (e.response && e.response.data && e.response.data.errors) {
 147                                 setErrors(laravelErrorsToFormik(e.response.data.errors));
 148                         }
 149                 }
 150         },
 151         mapPropsToValues: ({ name, settings }) => {
 152                 return {
 153                         command: (settings && settings.command) || 'none',
 154                         name: name || '',
 155                         restrict: (settings && settings.restrict) || 'none',
 156                 };
 157         },
 158         validationSchema: yup.object().shape({
 159                 command: yup.string(),
 160                 name: yup.string().required(),
 161                 restrict: yup.string(),
 162         }),
 163 })(CommandForm);