some discord discriminator stuff

[alttp.git] / resources / js / components / users / Box.js

diff --git a/resources/js/components/users/Box.js b/resources/js/components/users/Box.js
index 139e6f65573081dda97849ead6a0681b5ae292b4..fd5814f6216896baa4dcdda3d7ee784c394b917d 100644 (file)
--- a/resources/js/components/users/Box.js
+++ b/resources/js/components/users/Box.js
@@ -1,26 +1,50 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Button } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { getAvatarUrl } from '../../helpers/User';
 import i18n from '../../i18n';
 
-const Box = ({ user }) => user ?
-       <span className="user-box">
+const Box = ({ discriminator, noLink, user }) => {
+       const navigate = useNavigate();
+
+       if (!user) {
+               return <span>{i18n.t('general.anonymous')}</span>;
+       }
+
+       const content = <>
                <img alt="" src={getAvatarUrl(user)} />
-               <span>{user.username}</span>
-               <span className="text-muted">
-                       {'#'}
-                       {user.discriminator}
-               </span>
-       </span>
-:
-       <span>{i18n.t('general.anonymous')}</span>
-;
+               <span>{discriminator || !user.nickname ? user.username : user.nickname}</span>
+               {discriminator && user.discriminator ?
+                       <span className="text-muted">
+                               {'#'}
+                               {user.discriminator}
+                       </span>
+               : null}
+       </>;
+
+       if (noLink) {
+               return <span className="user-box">{content}</span>;
+       }
+
+       return <Button
+               className="user-box"
+               onClick={() => navigate(`/users/${user.id}`)}
+               variant="link"
+       >
+               {content}
+       </Button>;
+};
 
 Box.propTypes = {
+       discriminator: PropTypes.bool,
+       noLink: PropTypes.bool,
        user: PropTypes.shape({
                discriminator: PropTypes.string,
+               id: PropTypes.string,
+               nickname: PropTypes.string,
                username: PropTypes.string,
        }),
 };