From 1e643b8164118a8299139541c2126cda53356462 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 27 Apr 2018 16:00:27 +0100
Subject: [PATCH] Patch the UserProfileModal component instead of injecting
 badges when the modal is opened

---
 client/src/ui/components/bd/BdBadge.vue       | 10 ++--
 .../src/ui/components/bd/BdMessageBadge.vue   |  2 +-
 client/src/ui/profilebadges.js                | 55 +++++++++++++++----
 3 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/client/src/ui/components/bd/BdBadge.vue b/client/src/ui/components/bd/BdBadge.vue
index 1d71284f..bf38307a 100644
--- a/client/src/ui/components/bd/BdBadge.vue
+++ b/client/src/ui/components/bd/BdBadge.vue
@@ -9,12 +9,10 @@
 */
 
 <template>
-    <div class="bd-profile-badges-wrap">
-        <div class="bd-profile-badges">
-            <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
-            <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
-            <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-profile-badge bd-profile-badge-contributor" @click="click"></div>
-        </div>
+    <div class="bd-profile-badges">
+        <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
+        <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
+        <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-profile-badge bd-profile-badge-contributor" @click="click"></div>
     </div>
 </template>
 
diff --git a/client/src/ui/components/bd/BdMessageBadge.vue b/client/src/ui/components/bd/BdMessageBadge.vue
index 1344529b..3664c4bc 100644
--- a/client/src/ui/components/bd/BdMessageBadge.vue
+++ b/client/src/ui/components/bd/BdMessageBadge.vue
@@ -21,7 +21,7 @@
     import { shell } from 'electron';
 
     export default {
-        props: ['webdev', 'developer', 'contributor', 'hasBadges'],
+        props: ['webdev', 'developer', 'contributor'],
         methods: {
             click() {
                 if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
diff --git a/client/src/ui/profilebadges.js b/client/src/ui/profilebadges.js
index 2e8ec33e..a785fd37 100644
--- a/client/src/ui/profilebadges.js
+++ b/client/src/ui/profilebadges.js
@@ -176,26 +176,59 @@ export default class extends Module {
     }
 
     /**
-     * Patches UserProfileModal to inject profile badges into the modal once opened.
-     * TODO: just patch the modal component
+     * Patches UserProfileModal to render profile badges.
      */
     async patchUserProfileModal() {
-        const UserProfileModal = WebpackModules.getModuleByName('UserProfileModal');
+        this.UserProfileModal = await ReactComponents.getComponent('UserProfileModal');
+        this.unpatchUserProfileModal = MonkeyPatch('ProfileBadges', this.UserProfileModal.component.prototype).after('renderBadges', (component, args, retVal, setRetVal) => {
 
-        MonkeyPatch('BdUI', UserProfileModal).after('open', async (context, [userid]) => {
-            const c = contributors.find(c => c.id === userid);
+            const user = ReactHelpers.findProp(component, 'user');
+            if (!user) return;
+            const c = contributors.find(c => c.id === user.id);
             if (!c) return;
 
-            const root = await Utils.until(() => document.querySelector('[class*="headerInfo"]'));
-            const el = DOM.createElement('div', null, 'bdprofilebadges');
-            root.insertBefore(el.element, root.firstChild.nextSibling);
+            const element = ReactHelpers.React.createElement('span', {
+                className: 'bd-profile-badges',
+                'data-userid': user.id
+            });
 
-            this.injectProfileBadge(userid, el.element);
+            if (!retVal) {
+                setRetVal(ReactHelpers.React.createElement('div', {
+                    className: 'bd-profile-badges-wrap',
+                    children: element
+                }));
+            } else retVal.props.children.splice(0, 0, element);
+        });
+
+        this.UserProfileModal.component.prototype.componentDidMount = this.UserProfileModal.component.prototype.componentDidMount || (() => {});
+        this.unpatchUserProfileModalMount = MonkeyPatch('ProfileBadges', this.UserProfileModal.component.prototype).after('componentDidMount', component => {
+            const element = ReactHelpers.ReactDOM.findDOMNode(component);
+            if (!element) return;
+            this.injectProfileBadges(element);
+        });
+
+        this.UserProfileModal.component.prototype.componentDidUpdate = this.UserProfileModal.component.prototype.componentDidUpdate || (() => {});
+        this.unpatchUserProfileModalUpdate = MonkeyPatch('ProfileBadges', this.UserProfileModal.component.prototype).after('componentDidUpdate', component => {
+            const element = ReactHelpers.ReactDOM.findDOMNode(component);
+            if (!element) return;
+            this.injectProfileBadges(element);
         });
     }
 
-    injectProfileBadge(userid, root) {
-        const c = contributors.find(c => c.id === userid);
+    injectProfileBadges(element) {
+        for (const beo of element.getElementsByClassName('bd-profile-badges'))
+            this.injectProfileBadge(beo);
+    }
+
+    injectProfileBadge(root) {
+        while (root.firstChild) {
+            root.removeChild(root.firstChild);
+        }
+
+        const { userid } = root.dataset;
+        if (!userid) return;
+
+        const c = contributors.find(c => c.id == userid);
         if (!c) return;
 
         VueInjector.inject(root, {