yarn
or npm
MessageListManager
that takes care of all of the above along with some more nifty features for fine-grained control over message rendering.mitter-web-starter
and use a message list from recat-scl
instead.MessageListManager
we need to be able to tell the manager how to render individual messages. To do so, we'll start with creating a message component:true
since we want to use the same producer for all messages.NOTE The above is code adapted from themitter-web-starter
package which you can use as a starting point to test out SCL.
MessageListManager
component. An example is as shown below:renderMessages
function. The various props passed to the component are:messages
This is a list of messages that are to be rendered. This can be a reference to the entire message list if required, or only a subset that is available. The MessageListManager
uses a virtualized list that will create DOM elements for only the messages that are visible.defaultView
This is the view producer used when there is no other view available. Do note that we don't directly use the view producer, but instead use .produceView
function on it. This is because defaultView
does not perform any predicate checking and expects only rendering to be performed.producers
are a list of producers used to render messages. To render a particular message all producers are run (in insertion order) till one of their predicates returns true
. If no such producer is found, then the defaultView
is used.onEndCallback
is a function called when new messages are to be fetched. We will shortly look into how to use this callback.mitter-web-starter
. In terms of functionality we haven't really added anything else. Let's now add a PaginationManager
to handle various events where the messages would be populated.PaginationManager
is a construct available in the @mitter-io/core
module which makes it easy to consume paginated APIs (like /v1/channels/{}/messages
, /v1/channels
) etc.setChannels
method (which in turn is called by componentDidMount
).PaginationManager
(this is required because pagination managers maintain state regarding which page they are on and hence should be persisted across the component lifecycle):this.fetchPreviousPage
is called when the user scrolls to the top. To do so, pass on the method as a prop down to the MessageListManager
:onEndCallback
prop in MessageListManager
MessageListManager
isLoading
is true, the message list will display the component returned by loader
in the top area where the new messages would be appended.