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));