+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Nav } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Icon from '../common/Icon';
+import { useUser } from '../../helpers/UserContext';
+import { getAvatarUrl } from '../../helpers/User';
+
+const User = ({ doLogout }) => {
+ const { t } = useTranslation();
+ const user = useUser();
+
+ return user
+ ? <>
+ <Nav className="ms-auto">
+ <LinkContainer to={`/users/${user.id}`}>
+ <Nav.Link>
+ <img alt="" src={getAvatarUrl(user)} />
+ {user.username}
+ {user.discriminator && user.discriminator !== '0' ?
+ <span className="text-muted">#{user.discriminator}</span>
+ : null}
+ </Nav.Link>
+ </LinkContainer>
+ </Nav>
+ <Button
+ className="ms-2"
+ onClick={doLogout}
+ title={t('button.logout')}
+ variant="outline-secondary"
+ >
+ <Icon.LOGOUT title="" />
+ </Button>
+ </>
+ : <Button
+ className="ms-auto"
+ href="/login"
+ onClick={() => {
+ if (location.pathname.length > 1) {
+ localStorage.setItem('returnPath', location.pathname.substr(1));
+ }
+ }}
+ title={t('button.login')}
+ variant="discord"
+ >
+ <Icon.DISCORD />
+ {' '}
+ {t('button.login')}
+ </Button>;
+};
+
+User.propTypes = {
+ doLogout: PropTypes.func,
+};
+
+export default User;