]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/users/EditNicknameButton.js
compact keysanity tracker
[alttp.git] / resources / js / components / users / EditNicknameButton.js
1 import PropTypes from 'prop-types';
2 import React, { useState } from 'react';
3 import { Button } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5
6 import EditNicknameDialog from './EditNicknameDialog';
7 import Icon from '../common/Icon';
8 import { mayEditNickname } from '../../helpers/permissions';
9 import { useUser } from '../../hooks/user';
10
11 const EditNicknameButton = ({ user }) => {
12         const [showDialog, setShowDialog] = useState(false);
13
14         const { t } = useTranslation();
15         const { user: authUser } = useUser();
16
17         if (mayEditNickname(authUser, user)) {
18                 return <>
19                         <EditNicknameDialog
20                                 onHide={() => setShowDialog(false)}
21                                 show={showDialog}
22                                 user={user}
23                         />
24                         <Button
25                                 onClick={() => setShowDialog(true)}
26                                 title={t('button.edit')}
27                                 variant="outline-secondary"
28                         >
29                                 <Icon.EDIT title="" />
30                         </Button>
31                 </>;
32         }
33         return null;
34 };
35
36 EditNicknameButton.propTypes = {
37         user: PropTypes.shape({
38         }),
39 };
40
41 export default EditNicknameButton;