Ionic Infinite Scroll X amount of loadPreviousMessages

HI. We are trying to implement Ionic Infinite Scroll component to load previous messages.

Ideally. We would like to load 100 messages in the loadMessages() function.

Then when the user scrolls to the bottom of the 100 messages the loadPreviousMessages() function would fire and load (I.e. 1-10 ) new messages for each time the user scrolls to bottom.

Here is what we have now. It works somewhat. But, it seems it loads all of the messages at once and not by count (I.e. 1-10).

Could someone please help? It would be GREATLY appreciated as we have spent countless hours trying to get this to work…

loadPreviousMessages(event) {

console.log("LOADING OLDER MESSAGES NOW")

  let limit = 100;

  let messagesRequest = new CometChat.MessagesRequestBuilder()

  .setLimit(limit)

// .setGUID(this.groupSearchListArray[i].name) // load the group(s)

  .setGUID("letzlive") // load the group(s)

  .build();

  messagesRequest.fetchPrevious().then(

    messages => {

      console.log('Message list fetched:', messages);

     this.newMessages = messages;

     let total = this.newMessages.length;

     var count = this.count;

     for(let i = 0; i < this.newMessages.length; i++) {

       

        console.log('Loading data...');

        this.wait(500);

        console.log('Done');

        event.target.complete();

   

      this.messageDetails = this.newMessages[i];

      // convert string to date

 //     this.newMessages[i].messageTimeDetails = this.convertStringToDate(this.messageDetails.sentAt);

      if (this.newMessages[i].type === "text" && 

          this.newMessages[i].text != null && 

          this.newMessages[i].category != "action"  ) {

          // from ventMessages[i] get only arrays that are of type "text"

          this.nextgroupListArray = this.newMessages.splice(i, 1);

          i--;

 

          this.finalArray.push(this.nextgroupListArray[i])

          

          this.finalArray.sort((a, b) => b.sentAt - a.sentAt);

            this.getUserStatus();

      }

        if ( i < this.newMessages.length ) {

          console.log('No More Data');

          event.target.disabled = true;

        }

    }


    },

    error => {

      console.log('Message fetching failed with error:', error);

    }

  );

}

Hello @kl2000,

We have implemented scrolling in our ionic sample app. You can check it out here: https://github.com/cometchat-pro-samples/ionic-chat-app

Also, you should not create a new builder every time the loadPreviousMessages() is called. You need to create the builder only once when the chat page is loaded and use the same builder to fetch previous messages. You can refer to our sample app to know how to achieve this. Please refer to the chat-view.page.ts file of the sample app. Hope this helps!

1 Like