From a21cc53ca73ca1690f53bc2ec3c2a1a2948d67dd Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Sun, 20 Mar 2022 15:59:17 +0100
Subject: [PATCH] clickable user boxes

---
 resources/js/components/users/Box.js | 23 +++++++++++++++++------
 resources/sass/users.scss            |  4 ++++
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/users/Box.js b/resources/js/components/users/Box.js
index 7bbc186..d7ee3af 100644
--- a/resources/js/components/users/Box.js
+++ b/resources/js/components/users/Box.js
@@ -1,12 +1,24 @@
 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 = ({ discriminator, user }) => user ?
-	<span className="user-box">
+const Box = ({ discriminator, user }) => {
+	const navigate = useNavigate();
+
+	if (!user) {
+		return <span>{i18n.t('general.anonymous')}</span>;
+	}
+
+	return <Button
+		className="user-box"
+		onClick={() => navigate(`/users/${user.id}`)}
+		variant="link"
+	>
 		<img alt="" src={getAvatarUrl(user)} />
 		<span>{user.username}</span>
 		{discriminator ?
@@ -15,15 +27,14 @@ const Box = ({ discriminator, user }) => user ?
 				{user.discriminator}
 			</span>
 		: null}
-	</span>
-:
-	<span>{i18n.t('general.anonymous')}</span>
-;
+	</Button>;
+};
 
 Box.propTypes = {
 	discriminator: PropTypes.bool,
 	user: PropTypes.shape({
 		discriminator: PropTypes.string,
+		id: PropTypes.string,
 		username: PropTypes.string,
 	}),
 };
diff --git a/resources/sass/users.scss b/resources/sass/users.scss
index 94aab1e..c6f7509 100644
--- a/resources/sass/users.scss
+++ b/resources/sass/users.scss
@@ -1,4 +1,8 @@
 .user-box {
+	padding: 0;
+	color: inherit;
+	text-decoration: none;
+
 	img {
 		max-height: 2rem;
 		width: auto;
-- 
2.39.2