resources/js/components/rounds/SeedForm.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, Modal, Row } from 'react-bootstrap';
   6 import { withTranslation } from 'react-i18next';
   7
   8 import i18n from '../../i18n';
   9 import yup from '../../schema/yup';
  10
  11 const ReportForm = ({
  12         errors,
  13         handleBlur,
  14         handleChange,
  15         handleSubmit,
  16         onCancel,
  17         touched,
  18         values,
  19 }) =>
  20 <Form noValidate onSubmit={handleSubmit}>
  21         <Modal.Body>
  22                 <Row>
  23                         <Form.Group as={Col} controlId="round.seed">
  24                                 <Form.Label>{i18n.t('rounds.seed')}</Form.Label>
  25                                 <Form.Control
  26                                         isInvalid={!!(touched.seed && errors.seed)}
  27                                         name="seed"
  28                                         onBlur={handleBlur}
  29                                         onChange={handleChange}
  30                                         placeholder="https://alttprpatch.synack.live/patcher.html?patch=https://sahasrahbot.s3.amazonaws.com/patch/DR_XXXXXXXXXXX.bps"
  31                                         type="text"
  32                                         value={values.seed || ''}
  33                                 />
  34                                 {touched.seed && errors.seed ?
  35                                         <Form.Control.Feedback type="invalid">
  36                                                 {i18n.t(errors.seed)}
  37                                         </Form.Control.Feedback>
  38                                 : null}
  39                         </Form.Group>
  40                 </Row>
  41         </Modal.Body>
  42         <Modal.Footer>
  43                 {onCancel ?
  44                         <Button onClick={onCancel} variant="secondary">
  45                                 {i18n.t('button.cancel')}
  46                         </Button>
  47                 : null}
  48                 <Button type="submit" variant="primary">
  49                         {i18n.t('button.save')}
  50                 </Button>
  51         </Modal.Footer>
  52 </Form>;
  53
  54 ReportForm.propTypes = {
  55         errors: PropTypes.shape({
  56                 seed: PropTypes.string,
  57         }),
  58         handleBlur: PropTypes.func,
  59         handleChange: PropTypes.func,
  60         handleSubmit: PropTypes.func,
  61         onCancel: PropTypes.func,
  62         touched: PropTypes.shape({
  63                 seed: PropTypes.bool,
  64         }),
  65         values: PropTypes.shape({
  66                 seed: PropTypes.string,
  67         }),
  68 };
  69
  70 export default withFormik({
  71         displayName: 'SeedForm',
  72         enableReinitialize: true,
  73         handleSubmit: async (values, actions) => {
  74                 const { round_id, seed } = values;
  75                 const { onCancel } = actions.props;
  76                 await axios.post(`/api/rounds/${round_id}/setSeed`, {
  77                         seed,
  78                 });
  79                 if (onCancel) {
  80                         onCancel();
  81                 }
  82         },
  83         mapPropsToValues: ({ round }) => ({
  84                 round_id: round.id,
  85                 seed: round.seed || '',
  86         }),
  87         validationSchema: yup.object().shape({
  88                 seed: yup.string().required().url(),
  89         }),
  90 })(withTranslation()(ReportForm));