resources/js/components/users/Box.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5 import { useNavigate } from 'react-router-dom';
   6
   7 import { getAvatarUrl } from '../../helpers/User';
   8 import i18n from '../../i18n';
   9
  10 const Box = ({ discriminator, noLink, user }) => {
  11         const navigate = useNavigate();
  12
  13         if (!user) {
  14                 return <span>{i18n.t('general.anonymous')}</span>;
  15         }
  16
  17         const content = <>
  18                 <img alt="" src={getAvatarUrl(user)} />
  19                 <span>{discriminator || !user.nickname ? user.username : user.nickname}</span>
  20                 {discriminator && user.discriminator ?
  21                         <span className="text-muted">
  22                                 {'#'}
  23                                 {user.discriminator}
  24                         </span>
  25                 : null}
  26         </>;
  27
  28         if (noLink) {
  29                 return <span className="user-box">{content}</span>;
  30         }
  31
  32         return <Button
  33                 className="user-box"
  34                 onClick={() => navigate(`/users/${user.id}`)}
  35                 variant="link"
  36         >
  37                 {content}
  38         </Button>;
  39 };
  40
  41 Box.propTypes = {
  42         discriminator: PropTypes.bool,
  43         noLink: PropTypes.bool,
  44         user: PropTypes.shape({
  45                 discriminator: PropTypes.string,
  46                 id: PropTypes.string,
  47                 nickname: PropTypes.string,
  48                 username: PropTypes.string,
  49         }),
  50 };
  51
  52 export default withTranslation()(Box);