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';
7 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
8 import yup from '../../schema/yup';
10 const CommandForm = ({
20 const { t } = useTranslation();
30 'guessing-leaderboard',
32 const RESTRICTIONS = [
38 return <Form noValidate onSubmit={handleSubmit}>
40 <Form.Group controlId="command.name">
41 <Form.Label>{t('twitchBot.commandName')}</Form.Label>
44 isInvalid={!!(touched.name && errors.name)}
47 onChange={handleChange}
51 value={values.name || ''}
53 {touched.name && errors.name ?
54 <Form.Control.Feedback type="invalid">
56 </Form.Control.Feedback>
59 <Form.Group controlId="command.restrict">
60 <Form.Label>{t('twitchBot.commandRestriction')}</Form.Label>
62 isInvalid={!!(touched.restrict && errors.restrict)}
65 onChange={handleChange}
66 value={values.restrict || 'none'}
68 {RESTRICTIONS.map(r =>
69 <option key={r} value={r}>
70 {t(`twitchBot.commandRestrictions.${r}`)}
74 {touched.restrict && errors.restrict ?
75 <Form.Control.Feedback type="invalid">
77 </Form.Control.Feedback>
80 <Form.Group controlId="command.command">
81 <Form.Label>{t('twitchBot.commandType')}</Form.Label>
83 isInvalid={!!(touched.command && errors.command)}
86 onChange={handleChange}
87 value={values.command || 'none'}
90 <option key={c} value={c}>
91 {t(`twitchBot.commandTypes.${c}`)}
95 {touched.command && errors.command ?
96 <Form.Control.Feedback type="invalid">
98 </Form.Control.Feedback>
104 <Button onClick={onCancel} variant="secondary">
108 <Button type="submit" variant="primary">
115 CommandForm.propTypes = {
116 errors: PropTypes.shape({
117 command: PropTypes.string,
118 name: PropTypes.string,
119 restrict: PropTypes.string,
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,
131 values: PropTypes.shape({
132 command: PropTypes.string,
133 name: PropTypes.string,
134 restrict: PropTypes.string,
138 export default withFormik({
139 displayName: 'CommandForm',
140 enableReinitialize: true,
141 handleSubmit: async (values, actions) => {
142 const { setErrors } = actions;
143 const { onSubmit } = actions.props;
145 await onSubmit(values);
147 if (e.response && e.response.data && e.response.data.errors) {
148 setErrors(laravelErrorsToFormik(e.response.data.errors));
152 mapPropsToValues: ({ name, settings }) => {
154 command: (settings && settings.command) || 'none',
156 restrict: (settings && settings.restrict) || 'none',
159 validationSchema: yup.object().shape({
160 command: yup.string(),
161 name: yup.string().required(),
162 restrict: yup.string(),