Turn `ChatRoomOccupants` and `ChatRoomOccupant` into classes

src/headless/plugins/muc/occupant.js

@@ -6,28 +6,48 @@ import { Model } from '@converse/skeletor/src/model.js';
  * @namespace _converse.ChatRoomOccupant
  * @memberOf _converse
  */
-const ChatRoomOccupant = Model.extend({
-    defaults: {
-        'hats': [],
-        'show': 'offline',
-        'states': []
-    },
+class ChatRoomOccupant extends Model {
+
+    defaults () { // eslint-disable-line class-methods-use-this
+        return {
+            'hats': [],
+            'show': 'offline',
+            'states': []
+        }
+    }
+
+    save (key, val, options) {
+        let attrs;
+        if (key == null) { // eslint-disable-line no-eq-null
+            return super.save(key, val, options);
+        } else if (typeof key === 'object') {
+            attrs = key;
+            options = val;
+        } else {
+            (attrs = {})[key] = val;
+        }
+
+        if (attrs.occupant_id) {
+            attrs.id = attrs.occupant_id;
+        }
+        return super.save(attrs, options);
+    }
 
     getDisplayName () {
         return this.get('nick') || this.get('jid');
-    },
+    }
 
     isMember () {
         return ['admin', 'owner', 'member'].includes(this.get('affiliation'));
-    },
+    }
 
     isModerator () {
         return ['admin', 'owner'].includes(this.get('affiliation')) || this.get('role') === 'moderator';
-    },
+    }
 
     isSelf () {
         return this.get('states').includes('110');
     }
-});
+}
 
 export default ChatRoomOccupant;

src/headless/plugins/muc/occupants.js

@@ -1,10 +1,11 @@
 import ChatRoomOccupant from './occupant.js';
 import u from '../../utils/form';
-import { Collection } from '@converse/skeletor/src/collection';
+import { Collection } from '@converse/skeletor/src/collection.js';
 import { MUC_ROLE_WEIGHTS } from './constants.js';
-import { Strophe } from 'strophe.js/src/strophe';
+import { Strophe } from 'strophe.js/src/strophe.js';
 import { _converse, api } from '../../core.js';
 import { getAffiliationList } from './affiliations/utils.js';
+import { getAutoFetchedAffiliationLists } from './utils.js';
 
 
 /**
@@ -13,10 +14,10 @@ import { getAffiliationList } from './affiliations/utils.js';
  * @namespace _converse.ChatRoomOccupants
  * @memberOf _converse
  */
-const ChatRoomOccupants = Collection.extend({
-    model: ChatRoomOccupant,
+class ChatRoomOccupants extends Collection {
+    model = ChatRoomOccupant;
 
-    comparator (occupant1, occupant2) {
+    comparator (occupant1, occupant2) { // eslint-disable-line class-methods-use-this
         const role1 = occupant1.get('role') || 'none';
         const role2 = occupant2.get('role') || 'none';
         if (MUC_ROLE_WEIGHTS[role1] === MUC_ROLE_WEIGHTS[role2]) {
@@ -26,7 +27,7 @@ const ChatRoomOccupants = Collection.extend({
         } else {
             return MUC_ROLE_WEIGHTS[role1] < MUC_ROLE_WEIGHTS[role2] ? -1 : 1;
         }
-    },
+    }
 
     /**
      * Get the {@link _converse.ChatRoomOccupant} instance which
@@ -36,19 +37,14 @@ const ChatRoomOccupants = Collection.extend({
      */
     getOwnOccupant () {
         return this.findWhere({ 'jid': _converse.bare_jid });
-    },
-
-    getAutoFetchedAffiliationLists () {
-        const affs = api.settings.get('muc_fetch_members');
-        return Array.isArray(affs) ? affs : affs ? ['member', 'admin', 'owner'] : [];
-    },
+    }
 
     async fetchMembers () {
         if (!['member', 'admin', 'owner'].includes(this.getOwnOccupant()?.get('affiliation'))) {
             // https://xmpp.org/extensions/xep-0045.html#affil-priv
             return;
         }
-        const affiliations = this.getAutoFetchedAffiliationLists();
+        const affiliations = getAutoFetchedAffiliationLists();
         if (affiliations.length === 0) {
             return;
         }
@@ -86,7 +82,7 @@ const ChatRoomOccupants = Collection.extend({
          * @example _converse.api.listen.on('membersFetched', () => { ... });
          */
         api.trigger('membersFetched');
-    },
+    }
 
     /**
      * @typedef { Object} OccupantData
@@ -110,7 +106,7 @@ const ChatRoomOccupants = Collection.extend({
             data.occupant_id && this.findWhere({ 'occupant_id': data.occupant_id }) ||
             data.nick && this.findWhere({ 'nick': data.nick });
     }
-});
+}
 
 
 export default ChatRoomOccupants;

src/headless/plugins/muc/utils.js

@@ -6,6 +6,11 @@ import { safeSave } from '@converse/headless/utils/core.js';
 
 const { Strophe, sizzle, u } = converse.env;
 
+export function getAutoFetchedAffiliationLists () {
+    const affs = api.settings.get('muc_fetch_members');
+    return Array.isArray(affs) ? affs : affs ? ['member', 'admin', 'owner'] : [];
+}
+
 /**
  * Given an occupant model, see which roles may be assigned to that user.
  * @param { Model } occupant

src/plugins/muc-views/modtools.js

@@ -1,10 +1,10 @@
-import log from '@converse/headless/log';
+import log from '@converse/headless/log.js';
 import tpl_moderator_tools from './templates/moderator-tools.js';
 import { AFFILIATIONS, ROLES } from '@converse/headless/plugins/muc/index.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
-import { _converse, api, converse } from '@converse/headless/core';
-import { getAssignableRoles } from '@converse/headless/plugins/muc/utils.js';
+import { _converse, api, converse } from '@converse/headless/core.js';
+import { getAssignableRoles, getAutoFetchedAffiliationLists } from '@converse/headless/plugins/muc/utils.js';
 import { getOpenPromise } from '@converse/openpromise';
 import {
     getAffiliationList,
@@ -118,8 +118,7 @@ export default class ModeratorTools extends CustomElement {
         if (affiliation === 'none') {
             return false;
         }
-        const chatroom = this.muc;
-        const auto_fetched_affs = chatroom.occupants.getAutoFetchedAffiliationLists();
+        const auto_fetched_affs = getAutoFetchedAffiliationLists();
         if (auto_fetched_affs.includes(affiliation)) {
             return false;
         } else {