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