]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/users/EditStreamLinkForm.js
svg dungeon tracker
[alttp.git] / resources / js / components / users / EditStreamLinkForm.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 EditStreamLinkForm = ({
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="user.stream_link">
26                                 <Form.Label>{i18n.t('users.streamLink')}</Form.Label>
27                                 <Form.Control
28                                         isInvalid={!!(touched.stream_link && errors.stream_link)}
29                                         name="stream_link"
30                                         onBlur={handleBlur}
31                                         onChange={handleChange}
32                                         placeholder="https://www.twitch.tv/fgfm"
33                                         type="text"
34                                         value={values.stream_link || ''}
35                                 />
36                                 {touched.stream_link && errors.stream_link ?
37                                         <Form.Control.Feedback type="invalid">
38                                                 {i18n.t(errors.stream_link)}
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 EditStreamLinkForm.propTypes = {
57         errors: PropTypes.shape({
58                 stream_link: PropTypes.string,
59         }),
60         handleBlur: PropTypes.func,
61         handleChange: PropTypes.func,
62         handleSubmit: PropTypes.func,
63         onCancel: PropTypes.func,
64         touched: PropTypes.shape({
65                 stream_link: PropTypes.bool,
66         }),
67         values: PropTypes.shape({
68                 stream_link: PropTypes.string,
69         }),
70 };
71
72 export default withFormik({
73         displayName: 'StreamLinkForm',
74         enableReinitialize: true,
75         handleSubmit: async (values, actions) => {
76                 const { user_id, stream_link } = values;
77                 const { setErrors } = actions;
78                 const { onCancel } = actions.props;
79                 try {
80                         await axios.post(`/api/users/${user_id}/setStreamLink`, {
81                                 stream_link,
82                         });
83                         toastr.success(i18n.t('users.setStreamLinkSuccess'));
84                         if (onCancel) {
85                                 onCancel();
86                         }
87                 } catch (e) {
88                         toastr.error(i18n.t('users.setStreamLinkError'));
89                         if (e.response && e.response.data && e.response.data.errors) {
90                                 setErrors(laravelErrorsToFormik(e.response.data.errors));
91                         }
92                 }
93         },
94         mapPropsToValues: ({ user }) => ({
95                 user_id: user.id,
96                 stream_link: user.stream_link || '',
97         }),
98         validationSchema: yup.object().shape({
99                 stream_link: yup.string().required().url(),
100         }),
101 })(withTranslation()(EditStreamLinkForm));