resources/js/components/users/EditNicknameForm.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         user,
  21         values,
  22 }) =>
  23 <Form noValidate onSubmit={handleSubmit}>
  24         <Modal.Body>
  25                 <Row>
  26                         <Form.Group as={Col} controlId="user.nickname">
  27                                 <Form.Label>{i18n.t('users.nickname')}</Form.Label>
  28                                 <Form.Control
  29                                         isInvalid={!!(touched.nickname && errors.nickname)}
  30                                         name="nickname"
  31                                         onBlur={handleBlur}
  32                                         onChange={handleChange}
  33                                         placeholder={user.username}
  34                                         type="text"
  35                                         value={values.nickname || ''}
  36                                 />
  37                                 {touched.nickname && errors.nickname ?
  38                                         <Form.Control.Feedback type="invalid">
  39                                                 {i18n.t(errors.nickname)}
  40                                         </Form.Control.Feedback>
  41                                 : null}
  42                         </Form.Group>
  43                 </Row>
  44         </Modal.Body>
  45         <Modal.Footer>
  46                 {onCancel ?
  47                         <Button onClick={onCancel} variant="secondary">
  48                                 {i18n.t('button.cancel')}
  49                         </Button>
  50                 : null}
  51                 <Button type="submit" variant="primary">
  52                         {i18n.t('button.save')}
  53                 </Button>
  54         </Modal.Footer>
  55 </Form>;
  56
  57 EditStreamLinkForm.propTypes = {
  58         errors: PropTypes.shape({
  59                 nickname: PropTypes.string,
  60         }),
  61         handleBlur: PropTypes.func,
  62         handleChange: PropTypes.func,
  63         handleSubmit: PropTypes.func,
  64         onCancel: PropTypes.func,
  65         touched: PropTypes.shape({
  66                 nickname: PropTypes.bool,
  67         }),
  68         user: PropTypes.shape({
  69                 username: PropTypes.string,
  70         }),
  71         values: PropTypes.shape({
  72                 nickname: PropTypes.string,
  73         }),
  74 };
  75
  76 export default withFormik({
  77         displayName: 'NicknameForm',
  78         enableReinitialize: true,
  79         handleSubmit: async (values, actions) => {
  80                 const { user_id, nickname } = values;
  81                 const { setErrors } = actions;
  82                 const { onCancel } = actions.props;
  83                 try {
  84                         await axios.post(`/api/users/${user_id}/setNickname`, {
  85                                 nickname,
  86                         });
  87                         toastr.success(i18n.t('users.setNicknameSuccess'));
  88                         if (onCancel) {
  89                                 onCancel();
  90                         }
  91                 } catch (e) {
  92                         toastr.error(i18n.t('users.setNicknameError'));
  93                         if (e.response && e.response.data && e.response.data.errors) {
  94                                 setErrors(laravelErrorsToFormik(e.response.data.errors));
  95                         }
  96                 }
  97         },
  98         mapPropsToValues: ({ user }) => ({
  99                 user_id: user.id,
 100                 nickname: user.nickname || '',
 101         }),
 102         validationSchema: yup.object().shape({
 103                 nickname: yup.string(),
 104         }),
 105 })(withTranslation()(EditStreamLinkForm));