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