From 45e0ba7f9b6f441d0269e35de5614a7330809d03 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Wed, 10 Feb 2021 11:44:04 +0100
Subject: [PATCH] Use `this.listenTo` instead of `api.listen.on` in components

So that event handlers are automatically deregistered when the component is dismounted.
---
 src/plugins/chatview/view.js         |  3 +--
 src/plugins/headlines-view/view.js   |  3 +--
 src/plugins/muc-views/muc.js         | 11 +++--------
 src/plugins/register/panel.js        |  2 +-
 src/plugins/rosterview/rosterview.js |  7 ++-----
 5 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/plugins/chatview/view.js b/src/plugins/chatview/view.js
index 3a97732eb..c0744f149 100644
--- a/src/plugins/chatview/view.js
+++ b/src/plugins/chatview/view.js
@@ -38,8 +38,7 @@ export default class ChatView extends BaseChatView {
         this.model = _converse.chatboxes.get(jid);
         this.initDebounced();
 
-        api.listen.on('windowStateChanged', d => this.onWindowStateChanged(d));
-
+        this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
         this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
         this.listenTo(this.model, 'change:hidden', () => !this.model.get('hidden') && this.afterShown());
         this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
diff --git a/src/plugins/headlines-view/view.js b/src/plugins/headlines-view/view.js
index c8a834e6f..9b5b8d112 100644
--- a/src/plugins/headlines-view/view.js
+++ b/src/plugins/headlines-view/view.js
@@ -20,12 +20,11 @@ class HeadlinesView extends BaseChatView {
         this.model = _converse.chatboxes.get(jid);
         this.initDebounced();
 
-        api.listen.on('windowStateChanged', d => this.onWindowStateChanged(d));
-
         this.model.disable_mam = true; // Don't do MAM queries for this box
         this.listenTo(this.model, 'change:hidden', () => this.afterShown());
         this.listenTo(this.model, 'destroy', this.remove);
         this.listenTo(this.model, 'show', this.show);
+        this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
 
         this.render();
 
diff --git a/src/plugins/muc-views/muc.js b/src/plugins/muc-views/muc.js
index 5b22eefe8..d739f4d6a 100644
--- a/src/plugins/muc-views/muc.js
+++ b/src/plugins/muc-views/muc.js
@@ -80,17 +80,12 @@ export default class MUCView extends BaseChatView {
         this.model = _converse.chatboxes.get(jid);
         this.initDebounced();
 
-        api.listen.on('windowStateChanged', d => this.onWindowStateChanged(d));
-
-        this.listenTo(
-            this.model,
-            'change',
-            debounce(() => this.renderHeading(), 250)
-        );
+        this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
+        this.listenTo(this.model, 'change', debounce(() => this.renderHeading(), 250));
         this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
         this.listenTo(this.model, 'change:hidden', () => this.afterShown());
-        this.listenTo(this.model, 'change:minimized', () => this.afterShown());
         this.listenTo(this.model, 'change:hidden_occupants', this.onSidebarToggle);
+        this.listenTo(this.model, 'change:minimized', () => this.afterShown());
         this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm);
         this.listenTo(this.model, 'show', this.show);
         this.listenTo(this.model.features, 'change:moderated', this.renderBottomPanel);
diff --git a/src/plugins/register/panel.js b/src/plugins/register/panel.js
index 64fab1085..a3c747af3 100644
--- a/src/plugins/register/panel.js
+++ b/src/plugins/register/panel.js
@@ -38,7 +38,7 @@ class RegisterPanel extends ElementView {
         this.reset();
         const controlbox = _converse.chatboxes.get('controlbox');
         this.model = controlbox;
-        api.listen.on('connectionInitialized', () => this.registerHooks());
+        this.listenTo(_converse, 'connectionInitialized', this.registerHooks);
         this.listenTo(this.model, 'change:registration_status', this.render);
 
         const domain = api.settings.get('registration_domain');
diff --git a/src/plugins/rosterview/rosterview.js b/src/plugins/rosterview/rosterview.js
index bf9874797..55af5065e 100644
--- a/src/plugins/rosterview/rosterview.js
+++ b/src/plugins/rosterview/rosterview.js
@@ -22,17 +22,14 @@ export default class RosterView extends ElementView {
     async initialize () {
         await api.waitUntil('rosterInitialized')
         this.debouncedRender = debounce(this.render, 100);
+        this.listenTo(_converse, 'rosterContactsFetched', this.render);
         this.listenTo(_converse.roster, "add", this.debouncedRender);
         this.listenTo(_converse.roster, "destroy", this.debouncedRender);
         this.listenTo(_converse.roster, "remove", this.debouncedRender);
         this.listenTo(_converse.roster, 'change', this.renderIfRelevantChange);
-
-        // FIXME Need to find a fix for this on the contact.presence
-        // this.listenTo(this.model.presence, "change:show", this.requestUpdate);
-
         this.listenTo(_converse.roster.state, "change", this.render);
         _converse.presences.on('change:show', () => this.debouncedRender());
-        api.listen.on('rosterContactsFetched', () => this.render());
+
         this.render();
         this.listenToRosterFilter();
         /**