resources/js/app/User.js

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