Patch the UserProfileModal component instead of injecting badges when the modal is opened

This commit is contained in:
Samuel Elliott 2018-04-27 16:00:27 +01:00
parent 0944c0708f
commit 1e643b8164
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
3 changed files with 49 additions and 18 deletions

View File

@ -9,12 +9,10 @@
*/ */
<template> <template>
<div class="bd-profile-badges-wrap"> <div class="bd-profile-badges">
<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-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="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 v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-profile-badge bd-profile-badge-contributor" @click="click"></div>
</div>
</div> </div>
</template> </template>

View File

@ -21,7 +21,7 @@
import { shell } from 'electron'; import { shell } from 'electron';
export default { export default {
props: ['webdev', 'developer', 'contributor', 'hasBadges'], props: ['webdev', 'developer', 'contributor'],
methods: { methods: {
click() { click() {
if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp'); if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');

View File

@ -176,26 +176,59 @@ export default class extends Module {
} }
/** /**
* Patches UserProfileModal to inject profile badges into the modal once opened. * Patches UserProfileModal to render profile badges.
* TODO: just patch the modal component
*/ */
async patchUserProfileModal() { 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 user = ReactHelpers.findProp(component, 'user');
const c = contributors.find(c => c.id === userid); if (!user) return;
const c = contributors.find(c => c.id === user.id);
if (!c) return; if (!c) return;
const root = await Utils.until(() => document.querySelector('[class*="headerInfo"]')); const element = ReactHelpers.React.createElement('span', {
const el = DOM.createElement('div', null, 'bdprofilebadges'); className: 'bd-profile-badges',
root.insertBefore(el.element, root.firstChild.nextSibling); '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) { injectProfileBadges(element) {
const c = contributors.find(c => c.id === userid); 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; if (!c) return;
VueInjector.inject(root, { VueInjector.inject(root, {