Fetch chat messages in the model, not the view

spec/converse.js

@@ -307,8 +307,8 @@
                 expect(box instanceof Object).toBeTruthy();
                 expect(box.get('box_id')).toBe(`box-${btoa(jid)}`);
 
-                const chatboxview = _converse.chatboxviews.get(jid);
+                const view = _converse.chatboxviews.get(jid);
-                expect(u.isVisible(chatboxview.el)).toBeTruthy();
+                await test_utils.waitUntil(() => u.isVisible(view.el));
                 // Test for multiple JIDs
                 test_utils.openChatBoxFor(_converse, jid2);
                 await test_utils.waitUntil(() => _converse.chatboxes.length == 2);
@@ -339,8 +339,8 @@
                     _.keys(box),
                     ['close', 'endOTR', 'focus', 'get', 'initiateOTR', 'is_chatroom', 'maximize', 'minimize', 'open', 'set']
                 );
-                const chatboxview = _converse.chatboxviews.get(jid);
+                const view = _converse.chatboxviews.get(jid);
-                expect(u.isVisible(chatboxview.el)).toBeTruthy();
+                await test_utils.waitUntil(() => u.isVisible(view.el));
                 // Test for multiple JIDs
                 const list = await _converse.api.chats.open([jid, jid2]);
                 expect(Array.isArray(list)).toBeTruthy();

src/converse-chatview.js

@@ -337,7 +337,6 @@ converse.plugins.add('converse-chatview', {
 
             initialize () {
                 this.initDebounced();
-
                 this.model.messages.on('add', this.onMessageAdded, this);
                 this.model.messages.on('rendered', this.scrollDown, this);
 
@@ -347,8 +346,7 @@ converse.plugins.add('converse-chatview', {
                 this.model.presence.on('change:show', this.onPresenceChanged, this);
                 this.model.on('showHelpMessages', this.showHelpMessages, this);
                 this.render();
-
+                this.updateAfterMessagesFetched();
-                this.fetchMessages();
                 /**
                  * Triggered once the _converse.ChatBoxView has been initialized
                  * @event _converse#chatBoxInitialized
@@ -530,27 +528,12 @@ converse.plugins.add('converse-chatview', {
                 });
             },
 
-            afterMessagesFetched () {
+            async updateAfterMessagesFetched () {
+                await this.model.messages.fetched;
+                await Promise.all(this.model.messages.map(m => this.onMessageAdded(m)));
                 this.insertIntoDOM();
                 this.scrollDown();
                 this.content.addEventListener('scroll', this.markScrolled.bind(this));
-                /**
-                 * Triggered whenever a `_converse.ChatBox` instance has fetched its messages from
-                 * `sessionStorage` but **NOT** from the server.
-                 * @event _converse#afterMessagesFetched 
-                 * @type {_converse.ChatBoxView | _converse.ChatRoomView}
-                 * @example _converse.api.listen.on('afterMessagesFetched', view => { ... });
-                 */
-                _converse.api.trigger('afterMessagesFetched', this);
-            },
-
-            fetchMessages () {
-                this.model.messages.fetch({
-                    'add': true,
-                    'success': this.afterMessagesFetched.bind(this),
-                    'error': this.afterMessagesFetched.bind(this),
-                });
-                return this;
             },
 
             insertIntoDOM () {

src/converse-headline.js

@@ -88,7 +88,9 @@ converse.plugins.add('converse-headline', {
                 this.model.on('destroy', this.hide, this);
                 this.model.on('change:minimized', this.onMinimizedChanged, this);
 
-                this.render().insertHeading().fetchMessages().insertIntoDOM().hide();
+                this.render().insertHeading()
+                this.updateAfterMessagesFetched();
+                this.insertIntoDOM().hide();
                 _converse.api.trigger('chatBoxInitialized', this);
             },
 

src/converse-mam-views.js

@@ -153,7 +153,7 @@ converse.plugins.add('converse-mam-views', {
         const { _converse } = this;
 
         /* Event handlers */
-        _converse.api.listen.on('afterMessagesFetched', view => view.model.fetchNewestMessages());
+        _converse.api.listen.on('afterMessagesFetched', chatbox => chatbox.fetchNewestMessages());
 
         _converse.api.listen.on('reconnected', () => {
             const private_chats = _converse.chatboxviews.filter(

src/converse-muc-views.js

@@ -564,6 +564,7 @@ converse.plugins.add('converse-muc-views', {
 
                 this.createEmojiPicker();
                 this.render();
+                this.updateAfterMessagesFetched();
                 this.createOccupantsView();
                 this.insertIntoDOM();
                 this.registerHandlers();
@@ -581,7 +582,7 @@ converse.plugins.add('converse-muc-views', {
                     }
                     this.populateAndJoin();
                 } else {
-                    this.fetchMessages();
+                    this.model.fetchMessages();
                 }
                 /**
                  * Triggered once a groupchat has been opened
@@ -1195,7 +1196,7 @@ converse.plugins.add('converse-muc-views', {
             populateAndJoin () {
                 this.model.occupants.fetchMembers();
                 this.join();
-                this.fetchMessages();
+                this.model.fetchMessages();
             },
 
             /**

src/headless/converse-chatboxes.js

@@ -272,7 +272,6 @@ converse.plugins.add('converse-chatboxes', {
                     // from being persisted if there's no jid, but that gets
                     // called after model instantiation, so we have to deal
                     // with invalid models here also.
-                    //
                     // This happens when the controlbox is in browser storage,
                     // but we're in embedded mode.
                     return;
@@ -288,6 +287,7 @@ converse.plugins.add('converse-chatboxes', {
                 }
                 this.on('change:chat_state', this.sendChatState, this);
                 this.initMessages();
+                this.fetchMessages();
             },
 
             initMessages () {
@@ -304,6 +304,27 @@ converse.plugins.add('converse-chatboxes', {
                 });
             },
 
+            afterMessagesFetched () {
+                /**
+                 * Triggered whenever a `_converse.ChatBox` instance has fetched its messages from
+                 * `sessionStorage` but **NOT** from the server.
+                 * @event _converse#afterMessagesFetched
+                 * @type {_converse.ChatBox | _converse.ChatRoom}
+                 * @example _converse.api.listen.on('afterMessagesFetched', view => { ... });
+                 */
+                _converse.api.trigger('afterMessagesFetched', this);
+            },
+
+            fetchMessages () {
+                this.messages.fetched = new Promise(resolve => {
+                    this.messages.fetch({
+                        'add': true,
+                        'success': _.flow(this.afterMessagesFetched.bind(this), resolve),
+                        'error': _.flow(this.afterMessagesFetched.bind(this), resolve)
+                    });
+                });
+            },
+
             validate (attrs, options) {
                 const { _converse } = this.__super__;
                 if (!attrs.jid) {