]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/users/EditNicknameForm.js
svg dungeon tracker
[alttp.git] / 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));