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

@@ -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);

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();
 

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);

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');

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();
         /**