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;