Make toggling of rooms list reactive and remove imperative code

src/headless/plugins/bookmarks/index.js

@@ -8,7 +8,6 @@ import "@converse/headless/plugins/muc/index.js";
 import Bookmark from './model.js';
 import Bookmarks from './collection.js';
 import { Collection } from "@converse/skeletor/src/collection.js";
-import { Model } from '@converse/skeletor/src/model.js';
 import { _converse, api, converse } from "@converse/headless/core.js";
 import { initBookmarks, getNicknameFromBookmark, handleBookmarksPush } from './utils.js';
 
@@ -57,12 +56,6 @@ converse.plugins.add('converse-bookmarks', {
         _converse.Bookmark = Bookmark;
         _converse.Bookmarks = Collection.extend(Bookmarks);
 
-        _converse.BookmarksList = Model.extend({
-            defaults: {
-                "toggle-state":  _converse.OPENED
-            }
-        });
-
         api.listen.on('addClientFeatures', () => {
             if (api.settings.get('allow_bookmarks')) {
                 api.disco.own.features.add(Strophe.NS.BOOKMARKS + '+notify')

src/plugins/bookmark-views/components/bookmarks-list.js

@@ -2,6 +2,7 @@ import debounce from "lodash-es/debounce";
 import tpl_bookmarks_list from './templates/list.js';
 import tpl_spinner from "templates/spinner.js";
 import { CustomElement } from 'shared/components/element.js';
+import { Model } from '@converse/skeletor/src/model.js';
 import { _converse, api } from '@converse/headless/core.js';
 import { initStorage } from '@converse/headless/utils/storage.js';
 
@@ -23,7 +24,7 @@ export default class BookmarksView extends CustomElement {
         this.listenTo(chatboxes, 'remove', () => this.requestUpdate());
 
         const id = `converse.bookmarks-list-model-${_converse.bare_jid}`;
-        this.model = new _converse.BookmarksList({ id });
+        this.model = new Model({ id });
         initStorage(this.model, id);
 
         this.listenTo(this.model, 'change', () => this.requestUpdate());

src/plugins/roomslist/model.js

@@ -9,7 +9,7 @@ const RoomsListModel = Model.extend({
         return {
             'muc_domain': api.settings.get('muc_domain'),
             'nick': _converse.getDefaultMUCNickname(),
-            'toggle-state':  _converse.OPENED,
+            'toggle_state':  _converse.OPENED,
         };
     },
 
@@ -25,4 +25,3 @@ const RoomsListModel = Model.extend({
 });
 
 export default RoomsListModel;
-

src/plugins/roomslist/templates/roomslist.js

@@ -77,12 +77,13 @@ export default (o) => {
     const i18n_title_list_rooms = __('Query for groupchats');
     const i18n_title_new_room = __('Add a new groupchat');
     const i18n_show_bookmarks = __('Show bookmarked groupchats');
+    const is_closed = o.model.get('toggle_state') === _converse.CLOSED;
     return html`
         <div class="d-flex controlbox-padded">
             <span class="w-100 controlbox-heading controlbox-heading--groupchats">
                 <a class="list-toggle open-rooms-toggle" title="${i18n_desc_rooms}" @click=${o.toggleRoomsList}>
                     <converse-icon
-                        class="fa ${ (o.toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"
+                        class="fa ${ is_closed ? 'fa-caret-right' : 'fa-caret-down' }"
                         size="1em"
                         color="var(--muc-color)"></converse-icon>
                     ${i18n_heading_chatrooms}
@@ -109,7 +110,7 @@ export default (o) => {
         </div>
 
         <div class="list-container list-container--openrooms ${ o.rooms.length ? '' : 'hidden' }">
-            <div class="items-list rooms-list open-rooms-list ${ o.collapsed && 'collapsed' }">
+            <div class="items-list rooms-list open-rooms-list ${ is_closed ? 'collapsed' : '' }">
                 ${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
             </div>
         </div>`;

src/plugins/roomslist/view.js

@@ -17,10 +17,11 @@ export class RoomsList extends CustomElement {
         initStorage(this.model, id);
         this.model.fetch();
 
-        this.listenTo(_converse.chatboxes, 'add', this.renderIfChatRoom)
-        this.listenTo(_converse.chatboxes, 'remove', this.renderIfChatRoom)
-        this.listenTo(_converse.chatboxes, 'destroy', this.renderIfChatRoom)
-        this.listenTo(_converse.chatboxes, 'change', this.renderIfRelevantChange)
+        this.listenTo(_converse.chatboxes, 'add', this.renderIfChatRoom);
+        this.listenTo(_converse.chatboxes, 'remove', this.renderIfChatRoom);
+        this.listenTo(_converse.chatboxes, 'destroy', this.renderIfChatRoom);
+        this.listenTo(_converse.chatboxes, 'change', this.renderIfRelevantChange);
+        this.listenTo(this.model, 'change', () => this.requestUpdate());
 
         this.requestUpdate();
     }
@@ -42,15 +43,13 @@ export class RoomsList extends CustomElement {
             'addBookmark': ev => this.addBookmark(ev),
             'allow_bookmarks': api.settings.get('allow_bookmarks') && _converse.bookmarks,
             'closeRoom': ev => this.closeRoom(ev),
-            'collapsed': this.model.get('toggle-state') !== _converse.OPENED,
             'currently_open': room => isUniView() && !room.get('hidden'),
             'model': this.model,
             'openRoom': ev => this.openRoom(ev),
             'removeBookmark': ev => this.removeBookmark(ev),
             'rooms': _converse.chatboxes.filter(m => m.get('type') === _converse.CHATROOMS_TYPE),
             'showRoomDetailsModal': ev => this.showRoomDetailsModal(ev),
-            'toggleRoomsList': ev => this.toggleRoomsList(ev),
-            'toggle_state': this.model.get('toggle-state')
+            'toggleRoomsList': ev => this.toggleRoomsList(ev)
         });
     }
 
@@ -92,20 +91,11 @@ export class RoomsList extends CustomElement {
 
     toggleRoomsList (ev) {
         ev?.preventDefault?.();
-        const target = ev.currentTarget;
-        const icon_el = target.matches('.fa') ? target : target.querySelector('.fa');
-        if (icon_el.classList.contains("fa-caret-down")) {
-            u.slideIn(this.querySelector('.open-rooms-list')).then(() => {
-                this.model.save({'toggle-state': _converse.CLOSED});
-                icon_el.classList.remove("fa-caret-down");
-                icon_el.classList.add("fa-caret-right");
-            });
+        const list_el = this.querySelector('.open-rooms-list');
+        if (this.model.get('toggle_state') === _converse.CLOSED) {
+            u.slideOut(list_el).then(() => this.model.save({'toggle_state': _converse.OPENED}));
         } else {
-            u.slideOut(this.querySelector('.open-rooms-list')).then(() => {
-                this.model.save({'toggle-state': _converse.OPENED});
-                icon_el.classList.remove("fa-caret-right");
-                icon_el.classList.add("fa-caret-down");
-            });
+            u.slideIn(list_el).then(() => this.model.save({'toggle_state': _converse.CLOSED}));
         }
     }
 }