]> git.localhorst.tv Git - alttp.git/blobdiff - resources/js/components/users/EditNicknameButton.js
improved user context
[alttp.git] / resources / js / components / users / EditNicknameButton.js
index 5366f24b280232438d632166cb83a3728395b3ce..3e39b3ab2092c7a5b290e3700417de968120f813 100644 (file)
@@ -1,17 +1,19 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { Button } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import EditNicknameDialog from './EditNicknameDialog';
 import Icon from '../common/Icon';
 import { mayEditNickname } from '../../helpers/permissions';
-import { withUser } from '../../helpers/UserContext';
-import i18n from '../../i18n';
+import { useUser } from '../../hooks/user';
 
-const EditNicknameButton = ({ authUser, user }) => {
+const EditNicknameButton = ({ user }) => {
        const [showDialog, setShowDialog] = useState(false);
 
+       const { t } = useTranslation();
+       const { user: authUser } = useUser();
+
        if (mayEditNickname(authUser, user)) {
                return <>
                        <EditNicknameDialog
@@ -21,7 +23,7 @@ const EditNicknameButton = ({ authUser, user }) => {
                        />
                        <Button
                                onClick={() => setShowDialog(true)}
-                               title={i18n.t('button.edit')}
+                               title={t('button.edit')}
                                variant="outline-secondary"
                        >
                                <Icon.EDIT title="" />
@@ -32,10 +34,8 @@ const EditNicknameButton = ({ authUser, user }) => {
 };
 
 EditNicknameButton.propTypes = {
-       authUser: PropTypes.shape({
-       }),
        user: PropTypes.shape({
        }),
 };
 
-export default withTranslation()(withUser(EditNicknameButton, 'authUser'));
+export default EditNicknameButton;