From e6f2f518e6d901a3a34dfd7bb6cb08062b94f376 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuel@fancy.org.uk>
Date: Mon, 9 Jul 2018 01:08:40 +0100
Subject: [PATCH] Properly unbind events for emote autocomplete and dropdowns

---
 client/src/ui/bdui.js                         | 30 ++++++++-----------
 client/src/ui/components/BdSettings.vue       |  8 +++--
 .../src/ui/components/BdSettingsWrapper.vue   | 26 +++++++++++-----
 .../internal-settings/WindowPreferences.vue   | 11 +++----
 .../ui/components/bd/modals/ErrorModal.vue    |  2 +-
 .../components/bd/modals/PermissionModal.vue  | 17 +++++------
 .../ui/components/bd/modals/SettingsModal.vue |  6 ++--
 .../ui/components/bd/setting/Multiline.vue    |  6 +++-
 .../src/ui/components/common/Autocomplete.vue | 14 ++++++---
 client/src/ui/components/common/Dropdown.vue  |  8 +++--
 .../ui/components/common/EditedTimestamp.vue  |  8 -----
 client/src/ui/modals.js                       |  6 ++--
 12 files changed, 79 insertions(+), 63 deletions(-)
 delete mode 100644 client/src/ui/components/common/EditedTimestamp.vue

diff --git a/client/src/ui/bdui.js b/client/src/ui/bdui.js
index e00a3192..658019f6 100644
--- a/client/src/ui/bdui.js
+++ b/client/src/ui/bdui.js
@@ -24,25 +24,21 @@ export default class {
             channel: DiscordApi.currentChannel
         };
 
-        const ehookInterval = setInterval(() => {
-            if (!remote.BrowserWindow.getFocusedWindow()) return;
-            clearInterval(ehookInterval);
-            remote.BrowserWindow.getFocusedWindow().webContents.on('did-navigate-in-page', (e, url, isMainFrame) => {
-                const { currentGuild, currentChannel } = DiscordApi;
+        remote.getCurrentWindow().webContents.on('did-navigate-in-page', (e, url, isMainFrame) => {
+            const { currentGuild, currentChannel } = DiscordApi;
 
-                if (!this.pathCache.server)
-                    Events.emit('server-switch', { server: currentGuild, channel: currentChannel });
-                else if (!this.pathCache.channel)
-                    Events.emit('channel-switch', currentChannel);
-                else if (currentGuild && currentGuild.id && this.pathCache.server && this.pathCache.server.id !== currentGuild.id)
-                    Events.emit('server-switch', { server: currentGuild, channel: currentChannel });
-                else if (currentChannel && currentChannel.id && this.pathCache.channel && this.pathCache.channel.id !== currentChannel.id)
-                    Events.emit('channel-switch', currentChannel);
+            if (!this.pathCache.server)
+                Events.emit('server-switch', { server: currentGuild, channel: currentChannel });
+            else if (!this.pathCache.channel)
+                Events.emit('channel-switch', currentChannel);
+            else if (currentGuild && currentGuild.id && this.pathCache.server && this.pathCache.server.id !== currentGuild.id)
+                Events.emit('server-switch', { server: currentGuild, channel: currentChannel });
+            else if (currentChannel && currentChannel.id && this.pathCache.channel && this.pathCache.channel.id !== currentChannel.id)
+                Events.emit('channel-switch', currentChannel);
 
-                this.pathCache.server = currentGuild;
-                this.pathCache.channel = currentChannel;
-            });
-        }, 100);
+            this.pathCache.server = currentGuild;
+            this.pathCache.channel = currentChannel;
+        });
     }
 
     static injectUi() {
diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index 8c9c1794..1c190585 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -75,7 +75,8 @@
                 first: true,
                 Settings,
                 timeout: null,
-                SettingsWrapper
+                SettingsWrapper,
+                openMenuHandler: null
             };
         },
         props: ['active'],
@@ -154,7 +155,10 @@
             }
         },
         created() {
-            Events.on('bd-open-menu', item => item && this.itemOnClick(this.sidebarItems.find(i => i === item || i.id === item || i.contentid === item || i.set === item).id));
+            Events.on('bd-open-menu', this.openMenuHandler = item => item && this.itemOnClick(this.sidebarItems.find(i => i === item || i.id === item || i.contentid === item || i.set === item).id));
+        },
+        destroyed() {
+            if (this.openMenuHandler) Events.off('bd-open-menu', this.openMenuHandler);
         }
     }
 </script>
diff --git a/client/src/ui/components/BdSettingsWrapper.vue b/client/src/ui/components/BdSettingsWrapper.vue
index 98b94c10..196639a4 100644
--- a/client/src/ui/components/BdSettingsWrapper.vue
+++ b/client/src/ui/components/BdSettingsWrapper.vue
@@ -34,7 +34,9 @@
                 active: false,
                 animating: false,
                 timeout: null,
-                platform: process.platform
+                platform: process.platform,
+                eventHandlers: {},
+                keybindHandler: null
             };
         },
         components: {
@@ -66,21 +68,29 @@
             }
         },
         created() {
-            Events.on('ready', e => this.loaded = true);
-            Events.on('bd-open-menu', item => this.active = true);
-            Events.on('bd-close-menu', () => this.active = false);
-            Events.on('update-check-start', e => this.updating = 0);
-            Events.on('update-check-end', e => this.updating = 1);
-            Events.on('updates-available', e => this.updating = 2);
+            Events.on('ready', this.eventHandlers.ready = e => this.loaded = true);
+            Events.on('bd-open-menu', this.eventHandlers['bd-open-menu'] = item => this.active = true);
+            Events.on('bd-close-menu', this.eventHandlers['bd-close-menu'] = () => this.active = false);
+            Events.on('update-check-start', this.eventHandlers['update-check-start'] = e => this.updating = 0);
+            Events.on('update-check-end', this.eventHandlers['update-check-end'] = e => this.updating = 1);
+            Events.on('updates-available', this.eventHandlers['updates-available'] = e => this.updating = 2);
+
             window.addEventListener('keyup', this.keyupListener);
             window.addEventListener('keydown', this.prevent, true);
 
             const menuKeybind = Settings.getSetting('core', 'default', 'menu-keybind');
-            menuKeybind.on('keybind-activated', () => this.active = !this.active);
+            menuKeybind.on('keybind-activated', this.keybindHandler = () => this.active = !this.active);
         },
         destroyed() {
+            for (let event in this.eventHandlers) Events.off(event, this.eventHandlers[event]);
+
             window.removeEventListener('keyup', this.keyupListener);
             window.removeEventListener('keydown', this.prevent);
+
+            if (this.keybindHandler) {
+                const menuKeybind = Settings.getSetting('core', 'default', 'menu-keybind');
+                menuKeybind.removeListener('keybind-activated', this.keybindHandler = () => this.active = !this.active);
+            }
         }
     }
 </script>
diff --git a/client/src/ui/components/bd/internal-settings/WindowPreferences.vue b/client/src/ui/components/bd/internal-settings/WindowPreferences.vue
index 51336f9c..9330eac0 100644
--- a/client/src/ui/components/bd/internal-settings/WindowPreferences.vue
+++ b/client/src/ui/components/bd/internal-settings/WindowPreferences.vue
@@ -17,7 +17,7 @@
         </div>
 
         <div v-else-if="settingsSet" class="bd-form-item">
-            <component :is="SettingsPanel" :settings="settingsSet" />
+            <SettingsPanel :settings="settingsSet" />
 
             <p class="bd-hint">You must fully restart Discord for changes here to take effect.</p>
             <FormButton @click="restart">Restart</FormButton>
@@ -47,10 +47,7 @@
             return {
                 saved: {},
                 settingsSet: null,
-                disabled: false,
-
-                // TODO: fix recursive dependency somewhere
-                SettingsPanel
+                disabled: false
             };
         },
         components: {
@@ -119,6 +116,10 @@
                 this.settingsSet.setSaved();
             }
         },
+        beforeCreate() {
+            // https://vuejs.org/v2/guide/components.html#Circular-References-Between-Components
+            this.$options.components.SettingsPanel = SettingsPanel;
+        },
         async created() {
             if (this.filePath !== path.join(Globals.getPath('data'), 'window.json')) {
                 this.disabled = true;
diff --git a/client/src/ui/components/bd/modals/ErrorModal.vue b/client/src/ui/components/bd/modals/ErrorModal.vue
index 38f59456..3c4b70f4 100644
--- a/client/src/ui/components/bd/modals/ErrorModal.vue
+++ b/client/src/ui/components/bd/modals/ErrorModal.vue
@@ -1,6 +1,6 @@
 <template>
     <Modal :headerText="modal.event.header" @close="modal.close"
-           :class="[{'bd-err': modal.event.type && modal.event.type === 'err'}, {'bd-modal-out': modal.closing}]">
+           :class="{'bd-err': modal.event.type && modal.event.type === 'err', 'bd-modal-out': modal.closing}">
         <MiError v-if="modal.event.type === 'err'" slot="icon" size="20"/>
         <div slot="body">
             <div v-for="(content, index) in modal.event.content">
diff --git a/client/src/ui/components/bd/modals/PermissionModal.vue b/client/src/ui/components/bd/modals/PermissionModal.vue
index 805cde48..b6f0097f 100644
--- a/client/src/ui/components/bd/modals/PermissionModal.vue
+++ b/client/src/ui/components/bd/modals/PermissionModal.vue
@@ -37,19 +37,18 @@
     import { Permissions } from 'modules';
 
     export default {
-        data() {
-            return { permissions: [] }
-        },
         props: ['modal'],
         components: {
             Modal
         },
-        beforeMount() {
-            this.permissions = this.modal.perms.map(perm => {
-                const getPerm = Permissions.permissionText(perm);
-                getPerm.BODY = getPerm.BODY.replace(':NAME:', this.modal.name);
-                return getPerm;
-            });
+        computed: {
+            permissions() {
+                return this.modal.perms.map(perm => {
+                    const getPerm = Permissions.permissionText(perm);
+                    getPerm.BODY = getPerm.BODY.replace(':NAME:', this.modal.name);
+                    return getPerm;
+                });
+            }
         }
     }
 </script>
diff --git a/client/src/ui/components/bd/modals/SettingsModal.vue b/client/src/ui/components/bd/modals/SettingsModal.vue
index 24e89da8..9c3e302f 100644
--- a/client/src/ui/components/bd/modals/SettingsModal.vue
+++ b/client/src/ui/components/bd/modals/SettingsModal.vue
@@ -37,7 +37,8 @@
                 warnclose: false,
                 settings: null,
                 closing: false,
-                saving: false
+                saving: false,
+                closeHandler: null
             }
         },
         components: {
@@ -70,7 +71,7 @@
             }
         },
         created() {
-            this.modal.on('close', force => {
+            this.modal.on('close', this.closeHandler = force => {
                 if (this.changed && !force) {
                     this.warnclose = true;
                     setTimeout(() => this.warnclose = false, 400);
@@ -82,6 +83,7 @@
             this.cloneSettings();
         },
         destroyed() {
+            if (this.closeHandler) this.modal.removeListener('close', this.closeHandler);
             this.modal.settings.off('settings-updated', this.cloneSettings);
         }
     }
diff --git a/client/src/ui/components/bd/setting/Multiline.vue b/client/src/ui/components/bd/setting/Multiline.vue
index 2b82d898..2169afbe 100644
--- a/client/src/ui/components/bd/setting/Multiline.vue
+++ b/client/src/ui/components/bd/setting/Multiline.vue
@@ -30,8 +30,12 @@
                 textarea.style.height = textarea.scrollHeight + 2 + 'px';
             }
         },
+        watch: {
+            'setting.value'() {
+                this.recalculateHeight();
+            }
+        },
         mounted() {
-            this.$watch('setting.value', this.recalculateHeight);
             this.recalculateHeight();
         }
     }
diff --git a/client/src/ui/components/common/Autocomplete.vue b/client/src/ui/components/common/Autocomplete.vue
index 8e9471be..ace3ce46 100644
--- a/client/src/ui/components/common/Autocomplete.vue
+++ b/client/src/ui/components/common/Autocomplete.vue
@@ -53,20 +53,26 @@
                 selected: '',
                 open: false,
                 selectedIndex: 0,
-                sterm: ''
+                sterm: '',
+                settingUpdatedHandler: null
             };
         },
         created() {
-            const enabled = Settings.getSetting('emotes', 'default', 'enable');
-            enabled.on('setting-updated', event => {
+            const enabledSetting = Settings.getSetting('emotes', 'default', 'enable');
+            enabledSetting.on('setting-updated', this.settingUpdatedHandler = event => {
                 if (event.value) return this.addEventListeners();
                 this.removeEventListeners();
                 this.reset();
             });
 
-            if (enabled.value) this.addEventListeners();
+            if (enabledSetting.value) this.addEventListeners();
         },
         destroyed() {
+            if (this.settingUpdatedHandler) {
+                const enabledSetting = Settings.getSetting('emotes', 'default', 'enable');
+                enabledSetting.removeListener('setting-updated', this.settingUpdatedHandler);
+            }
+
             this.removeEventListeners();
         },
         methods: {
diff --git a/client/src/ui/components/common/Dropdown.vue b/client/src/ui/components/common/Dropdown.vue
index bcaad311..137f6949 100644
--- a/client/src/ui/components/common/Dropdown.vue
+++ b/client/src/ui/components/common/Dropdown.vue
@@ -27,7 +27,8 @@
         props: ['options', 'value', 'disabled'],
         data() {
             return {
-                active: false
+                active: false,
+                clickHandler: null
             };
         },
         methods: {
@@ -41,12 +42,15 @@
             }
         },
         mounted() {
-            document.addEventListener('click', e => {
+            document.addEventListener('click', this.clickHandler = e => {
                 let options = this.$refs.options;
                 if (options && !options.contains(e.target) && options !== e.target) {
                     this.active = false;
                 }
             });
+        },
+        beforeDestroy() {
+            if (this.clickHandler) document.removeEventListener('click', this.clickHandler);
         }
     }
 </script>
diff --git a/client/src/ui/components/common/EditedTimestamp.vue b/client/src/ui/components/common/EditedTimestamp.vue
deleted file mode 100644
index 723cea85..00000000
--- a/client/src/ui/components/common/EditedTimestamp.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <span class="edited" v-tooltip="ets">(edited)</span>
-</template>
-<script>
-    export default {
-        props: ['ets']
-    }
-</script>
diff --git a/client/src/ui/modals.js b/client/src/ui/modals.js
index 73a56d12..b963f765 100644
--- a/client/src/ui/modals.js
+++ b/client/src/ui/modals.js
@@ -149,9 +149,8 @@ export default class Modals {
         modal.promise = new Promise((resolve, reject) => {
             modal.confirm = () => resolve(true);
             modal.beforeClose = () => reject();
-            this.add(modal, ConfirmModal);
         });
-        return modal;
+        return this.add(modal, ConfirmModal);
     }
 
     /**
@@ -167,9 +166,8 @@ export default class Modals {
         modal.promise = new Promise((resolve, reject) => {
             modal.confirm = () => resolve(true);
             modal.beforeClose = () => reject();
-            this.add(modal, PermissionModal);
         });
-        return modal;
+        return this.add(modal, PermissionModal);
     }
 
     /**