Suggested implementation
Fetch messages with useQuery from @tanstack/react-query. Always store single cache entry (set cacheTime to 0). As parameter for query use room identifier and object anchors which has 2 fields: before and after. Depending on type of user event, different anchors will be required:
- Handle top reached: set
before to first item and after to undefined
- Handle bottom reached: set
after to last item and before to undefined
- Search message
X OR next result OR previous result: set both after and before to X
In each case we will have an array of previous messages and array of new messages. New messages are constructed accordingly to the type of user event.
As an alternative to useBoundedArray we will just need one function getClippedArray in order to get resulting messages.
What to do on receiving message?
- If
noMessagesAfter then clip previous array with new message and directly set cache of currently rendered query.
- Else, do nothing
Suggested implementation
Fetch messages with
useQueryfrom@tanstack/react-query. Always store single cache entry (setcacheTimeto 0). As parameter for query useroom identifierand objectanchorswhich has 2 fields:beforeandafter. Depending on type of user event, different anchors will be required:beforeto first item andafterto undefinedafterto last item andbeforeto undefinedXOR next result OR previous result: set bothafterandbeforetoXIn each case we will have an array of
previous messagesand array ofnew messages. New messages are constructed accordingly to the type of user event.As an alternative to
useBoundedArraywe will just need one functiongetClippedArrayin order to get resulting messages.What to do on receiving message?
noMessagesAfterthen clip previous array with new message and directly set cache of currently rendered query.