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