From fcd2acd2460f3a33ace393af67db1f25fb46d84c Mon Sep 17 00:00:00 2001
From: datlechin <datlechin@gmail.com>
Date: Fri, 17 Jun 2022 17:00:51 +0700
Subject: [PATCH] Fixes #9: Badges visible on `UserCard`

---
 .../forum/components/addBadgeListUserCard.js  | 27 +++++++++++++++++++
 js/src/forum/index.js                         |  2 ++
 less/forum.less                               |  1 +
 less/forum/BadgeUserCard.less                 | 14 ++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 js/src/forum/components/addBadgeListUserCard.js
 create mode 100644 less/forum/BadgeUserCard.less

diff --git a/js/src/forum/components/addBadgeListUserCard.js b/js/src/forum/components/addBadgeListUserCard.js
new file mode 100644
index 0000000..baf2742
--- /dev/null
+++ b/js/src/forum/components/addBadgeListUserCard.js
@@ -0,0 +1,27 @@
+import { extend } from 'flarum/common/extend';
+import UserCard from 'flarum/forum/components/UserCard';
+import UserBadge from '../../common/components/UserBadge';
+import BadgeModal from './BadgeModal';
+
+export default function addBadgeListUserCard() {
+  extend(UserCard.prototype, 'infoItems', function (items) {
+    const userBadges = this.attrs.user.userBadges();
+
+    if (userBadges.length < 1) return;
+
+    items.add(
+      'badges',
+      userBadges.map((userBadge) => (
+        <UserBadge
+          badge={userBadge.badge()}
+          onclick={() =>
+            app.modal.show(BadgeModal, {
+              badge: userBadge.badge(),
+              userBadgeData: userBadge,
+            })
+          }
+        />
+      ))
+    );
+  });
+}
diff --git a/js/src/forum/index.js b/js/src/forum/index.js
index b122547..179c48e 100644
--- a/js/src/forum/index.js
+++ b/js/src/forum/index.js
@@ -16,6 +16,7 @@ import addSidebarNav from './addSidebarNav';
 import UserBadgeListState from './states/UserBadgeListState';
 import BadgeReceivedNotification from './notification/BadgeReceivedNotification';
 import NotificationGrid from 'flarum/forum/components/NotificationGrid';
+import addBadgeListUserCard from './components/addBadgeListUserCard';
 
 app.initializers.add('v17development-flarum-badges', (app) => {
   app.store.models.badges = Badge;
@@ -105,4 +106,5 @@ app.initializers.add('v17development-flarum-badges', (app) => {
       );
     }
   });
+  addBadgeListUserCard();
 });
diff --git a/less/forum.less b/less/forum.less
index e5f40c9..53692c9 100644
--- a/less/forum.less
+++ b/less/forum.less
@@ -4,3 +4,4 @@
 @import "./forum/BadgePage.less";
 @import "./forum/BadgeOverviewPage.less";
 @import "./forum/BadgeUserList.less";
+@import "forum/BadgeUserCard";
diff --git a/less/forum/BadgeUserCard.less b/less/forum/BadgeUserCard.less
new file mode 100644
index 0000000..667add0
--- /dev/null
+++ b/less/forum/BadgeUserCard.less
@@ -0,0 +1,14 @@
+.UserCard-info {
+  .item-badges {
+    display: block!important;
+    margin-top: 15px;
+
+    .UserBadge {
+      color: #fff;
+
+      &:hover {
+        border-color: #fff;
+      }
+    }
+  }
+}