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';
9 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
10 import i18n from '../../i18n';
11 import yup from '../../schema/yup';
13 const EditStreamLinkForm = ({
22 <Form noValidate onSubmit={handleSubmit}>
25 <Form.Group as={Col} controlId="user.stream_link">
26 <Form.Label>{i18n.t('users.streamLink')}</Form.Label>
28 isInvalid={!!(touched.stream_link && errors.stream_link)}
31 onChange={handleChange}
32 placeholder="https://www.twitch.tv/fgfm"
34 value={values.stream_link || ''}
36 {touched.stream_link && errors.stream_link ?
37 <Form.Control.Feedback type="invalid">
38 {i18n.t(errors.stream_link)}
39 </Form.Control.Feedback>
46 <Button onClick={onCancel} variant="secondary">
47 {i18n.t('button.cancel')}
50 <Button type="submit" variant="primary">
51 {i18n.t('button.save')}
56 EditStreamLinkForm.propTypes = {
57 errors: PropTypes.shape({
58 stream_link: PropTypes.string,
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,
67 values: PropTypes.shape({
68 stream_link: PropTypes.string,
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;
80 await axios.post(`/api/users/${user_id}/setStreamLink`, {
83 toastr.success(i18n.t('users.setStreamLinkSuccess'));
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));
94 mapPropsToValues: ({ user }) => ({
96 stream_link: user.stream_link || '',
98 validationSchema: yup.object().shape({
99 stream_link: yup.string().required().url(),
101 })(withTranslation()(EditStreamLinkForm));