resources/js/components/tournament/DiscordForm.js

   1 import axios from 'axios';
   2 import { withFormik } from 'formik';
   3 import PropTypes from 'prop-types';
   4 import React from 'react';
   5 import { Button, Col, Form, Row } from 'react-bootstrap';
   6 import { withTranslation } from 'react-i18next';
   7 import toastr from 'toastr';
   8
   9 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
  10 import i18n from '../../i18n';
  11 import yup from '../../schema/yup';
  12
  13 const DiscordForm = ({
  14         errors,
  15         handleBlur,
  16         handleChange,
  17         handleSubmit,
  18         touched,
  19         values,
  20 }) =>
  21 <Form noValidate onSubmit={handleSubmit}>
  22         <fieldset>
  23                 <legend>{i18n.t('tournaments.discordSettings')}</legend>
  24                 <Form.Group controlId="tournament.discord_round_template">
  25                         <Form.Label>
  26                                 {i18n.t('tournaments.discordRoundTemplate')}
  27                         </Form.Label>
  28                         <Form.Control
  29                                 isInvalid={!!(touched.round_template && errors.round_template)}
  30                                 name="round_template"
  31                                 onBlur={handleBlur}
  32                                 onChange={handleChange}
  33                                 type="text"
  34                                 value={values.round_template || ''}
  35                         />
  36                 </Form.Group>
  37                 <Button className="mt-3" type="submit" variant="primary">
  38                         {i18n.t('button.save')}
  39                 </Button>
  40         </fieldset>
  41 </Form>;
  42
  43 DiscordForm.propTypes = {
  44         errors: PropTypes.shape({
  45                 round_template: PropTypes.string,
  46         }),
  47         handleBlur: PropTypes.func,
  48         handleChange: PropTypes.func,
  49         handleSubmit: PropTypes.func,
  50         touched: PropTypes.shape({
  51                 round_template: PropTypes.bool,
  52         }),
  53         values: PropTypes.shape({
  54                 round_template: PropTypes.string,
  55         }),
  56 };
  57
  58 export default withFormik({
  59         displayName: 'DiscordForm',
  60         enableReinitialize: true,
  61         handleSubmit: async (values, actions) => {
  62                 const { round_template } = values;
  63                 const { setErrors } = actions;
  64                 const { tournament } = actions.props;
  65                 try {
  66                         await axios.post(`/api/tournaments/${tournament.id}/discord-settings`, {
  67                                 round_template,
  68                         });
  69                         toastr.success(i18n.t('tournaments.discordSettingsSuccess'));
  70                 } catch (e) {
  71                         toastr.error(i18n.t('tournaments.discordSettingsError'));
  72                         if (e.response && e.response.data && e.response.data.errors) {
  73                                 setErrors(laravelErrorsToFormik(e.response.data.errors));
  74                         }
  75                 }
  76         },
  77         mapPropsToValues: ({ tournament }) => ({
  78                 round_template: tournament.discord_round_template || '',
  79         }),
  80         validationSchema: yup.object().shape({
  81                 round_template: yup.string(),
  82         }),
  83 })(withTranslation()(DiscordForm));