half_the_results.js

sb.connect(userId, "...").then((user, error) => {


  sb.GroupChannel.getChannel('test2').then((channel, error) => {

    // console.log(channel)

    messageCollection = channel.createMessageCollection()
    .setStartingPoint(Date.now())
    .setLimit(30)
    .build()

    // Additional Info
    // Messages that are being held in memory.

    // When to call:
    // initialize every-time the user refreshes/opens the message view. 
    // Consider the case that the user may have scrolled do a different place in the message view so setStartingPoint may not be now. 
    messageCollection
    .initialize(sb.MessageCollection.MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API)
    .onCacheResult(function (err, messages) {
        // Messages will be retrieved from the local cache.
        // They might be too outdated or far from the startingPoint.
    

        // Additional info
        // This operation is async from when initialize is called. 
        // Max 15 messages are returned.
        // onCacheResult will fire one time when the message collection is initialized and the local cache is created.
        // If the local cache is not created onCacheResult will not fire on initialize. 

        // What to do from here:
        // messageCollection._messages may mutate with the cached messages merged - update your message list view as needed. 
        // If use an immutable message list use the "messages" to create a new immutable message list view as needed. 
    })
    .onApiResult(function (err, messages) {
         // Messages will be retrieved from the Sendbird server through API.
        // According to the MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API,
        // the existing data source needs to be cleared
        // before adding retrieved messages to the local cache.

        // Additional info
        // This operation is async from when initialize is called. 
        // Internally the setLimitValue is halved and assigned to loadPrev and loadNext API query params to call for messages. 
        // Eg. setLimit is 30, startingPoint is now, and loadPrev param=15. Therefore, 15 messages are returned.
        // The locally cached message list may or may not change after the API call.  
        // If the local storage was not yet created before initialize the local storage has now been created.


        // What to do from here:
        // If using messageCollection._messages a mutation may have occurred and with cached messages merged with API result messages - update your message list view as needed. 
        // If using a immutable message list data source use the "messages" argument to update your message list and view as needed. 
        console.log("API:", messageCollection._messages.length)
    });

    //Detects real time changes to the locally stored data. 
    var messageCollectionHandler = {
      onMessagesAdded: function (context, channel, messages) {
          // Add the messages to your data source.
          console.log(channel)
      },
      onMessagesUpdated: function (context, channel, messages) {
          // Update the messages in your data source.
      },
      onMessagesDeleted: function (context, channel, messages) {
          // Remove the messages from the data source.
      },
      onChannelUpdated: function (context, channel) {
          // Change the chat view with the updated channel information.
      },
      onChannelDeleted: function (context, channelUrl) {
          // This is called when a channel was deleted. So the current chat view should be cleared.
      },
      onHugeGapDetected: function () {
          // The Chat SDK detects more than 300 messages missing.
      }
  };

  messageCollection.setMessageCollectionHandler(messageCollectionHandler);


  })



}).catch(error => {
  console.log(error)
})




const prev = document.getElementById("prev")
prev.addEventListener('click', () => {

   //Used in the message view when the user has scrolled to, or nearly scrolled to, the oldest message in the view. 
  try {
    // Load previous messages.
    if (messageCollection.hasPrevious) {
    messageCollection
        .loadPrevious()
        .then(function (messages) {
            //"Previous" is relative to setStartingPoint + the messages already paged for and held in memmory. 
            // If starting point=now - cache likely already holds half the setLimit number. 
            // Eg. initialize called, setLimit=30, startingPoint=now, API prevLimit=15, messageCollection._messages=15, loadPrevious()=30(from setLimit), result - messageCollection._messages=45

            // What to do from here:
            // If using messageCollection._messages - update your message list view as needed. 
            // If using a immutable message list data source use the "messages" argument to update your message list and view as needed. 
            console.log("Prev:", messageCollection._messages.length)
        })
        .catch(function (err) {
            // ...
        });
    }
    // ...
} catch (e) {
    // ...
    console.log(e)
} finally {
    console.log("Done")
}

})

const next = document.getElementById("next")
next.addEventListener('click', () => {

      //Used when 
  try {
    // Load next messages.
    if (messageCollection.hasNext) {
    messageCollection.loadNext()
        .then(function (messages) {
            // ...
            //"Next" is relative to setStartingPoint + the messages already paged for and held in memory.
            // If starting point=now - cache likely already holds half the setLimit number. 
            // Eg. initialize called, setLimit=30, startingPoint=now, API nextLimit=15, messageCollection._messages=15(because prevLimit = 15), loadNext=30(from setLimit), result - messageCollection._messages=15 (0 next messages).
          

            // What to do from here:
            // If using messageCollection._messages - update your message list view as needed. 
            // If using a imutable message list data source use the "messages" arguement to update your message list and view as needed. 
        })
        .catch(function (err) {
            // ...
        });
    }
} catch (e) {
    // ...
    console.log(e)
} finally {
    console.log("Done")
}

})


const collection = document.getElementById("collection")
collection.addEventListener('click', () => {
    messageCollection._messages.forEach(message => {
        console.log(message.message)
    })
})