resources/js/components/app/User.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Nav } from 'react-bootstrap';
   4 import { LinkContainer } from 'react-router-bootstrap';
   5 import { useTranslation } from 'react-i18next';
   6
   7 import Icon from '../common/Icon';
   8 import { useUser } from '../../helpers/UserContext';
   9 import { getAvatarUrl } from '../../helpers/User';
  10
  11 const User = ({ doLogout }) => {
  12         const { t } = useTranslation();
  13         const user = useUser();
  14
  15         return user
  16                 ? <>
  17                         <Nav className="ms-auto">
  18                                 <LinkContainer to={`/users/${user.id}`}>
  19                                         <Nav.Link>
  20                                                 <img alt="" src={getAvatarUrl(user)} />
  21                                                 {user.username}
  22                                                 {user.discriminator && user.discriminator !== '0' ?
  23                                                         <span className="text-muted">#{user.discriminator}</span>
  24                                                 : null}
  25                                         </Nav.Link>
  26                                 </LinkContainer>
  27                         </Nav>
  28                         <Button
  29                         className="ms-2"
  30                                 onClick={doLogout}
  31                                 title={t('button.logout')}
  32                                 variant="outline-secondary"
  33                         >
  34                                 <Icon.LOGOUT title="" />
  35                         </Button>
  36                 </>
  37                 : <Button
  38                         className="ms-auto"
  39                         href="/login"
  40                         onClick={() => {
  41                                 if (location.pathname.length > 1) {
  42                                         localStorage.setItem('returnPath', location.pathname.substr(1));
  43                                 }
  44                         }}
  45                         title={t('button.login')}
  46                         variant="discord"
  47                 >
  48                         <Icon.DISCORD />
  49                         {' '}
  50                         {t('button.login')}
  51                 </Button>;
  52 };
  53
  54 User.propTypes = {
  55         doLogout: PropTypes.func,
  56 };
  57
  58 export default User;