feat: optimistic DB and UI updates for reactions and messages

[vishalnarkhede]

🎯 Goal

Implements #1709
Fixes #1773

🛠 Implementation details

• Introduced sendReaction, deleteReaction and deleteMessage functions within Channel component, which will be passed down through context. These functions are responsible for optimistically updating the reaction or adding a new message to local state and DB.
• Introduced DBSyncManager which is responsible for all the tasks regarding syncing channel states within local DB e.g., calling sync api and executing pending tasks etc.

How it works

• When user updates the reaction
  • update the reaction within local state first
  • update the reaction within local DB
  • add a task (api call) for this within pendingTasks table
  • call the relevant api e.g., sendReaction or deleteReaction
  • If API is successful then remove the entry for this api call from pendingTasks table.

It works the same way for new messages or deleted messages

• When app is opened
  • load the channels from local DB first
  • If the ws connection is already active
    • call the sync api
    • execute any pending api calls e.g., send reaction or delete reaction etc
    • reload channels from local DB again
    • call queryChannels api and get fresh set of channels
  • If the ws connection is not active yet
    • wait for connection.changed event with online value as true
    • call the sync api
    • execute any pending api calls e.g., send reaction or delete reaction etc
    • reload channels from local DB again
    • call queryChannels api and get fresh set of channels

🎨 UI Changes

iOS

Before	After

Android

Before	After

🧪 Testing

☑️ Checklist

• I have signed the Stream CLA (required)
• PR targets the develop branch
• Documentation is updated
• New code is tested in main example apps, including all possible scenarios
  • SampleApp iOS and Android
  • Expo iOS and Android

[vanGalilea]

Some of the findings/questions from my manual testing run

[vanGalilea]

When sending a "/giphy cat" message (when offline), it's not possible to resend it when establishing an internet connection again. This results in an exclamation mark bubble for eternity.

Can we handle it in a more sustainable and user-friendly way?

[vanGalilea]

When sending a message (messages 4,5,6) when offline (optimistically) the messages do not appear before a different message (that was sent by another user when online). Although they were sent optimistically before that "new message" message was sent.

I expected that the messages (4,5,6) that were sent offline would appear in their respective location (before the message that was sent by the other user "New message"). This can be confusing to some people.

@vishalnarkhede can you check how other SDKs have implemented this?

Screen.Recording.2022-11-02.at.10.52.41_compressed.mp4

[vanGalilea]

When sending a message offline, the exclamation mark sometimes appears and in some cases, it doesn't can we be more consistent about it?

To reproduce send messages from both devices when offline, it happened mainly on android for me

[vishalnarkhede]

When sending a "/giphy cat" message (when offline), it's not possible to resend it when establishing an internet connection again. This results in an exclamation mark bubble for eternity.

Can we handle it in a more sustainable and user-friendly way?

hmm good point. I think its best to simply not allow sending a giphy while offline

[vishalnarkhede]

When sending a message (messages 4,5,6) when offline (optimistically) the messages do not appear before a different message (that was sent by another user when online). Although they were sent optimistically before that "new message" message was sent.

I expected that the messages (4,5,6) that were sent offline would appear in their respective location (before the message that was sent by the other user "New message"). This can be confusing to some people.

@vishalnarkhede can you check how other SDKs have implemented this?

Screen.Recording.2022-11-02.at.10.52.41_compressed.mp4

This is a technical limitation for us from backend side. We don't allow inserting the messages before latest message

[sonarqubecloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
6 Code Smells

62.6% Coverage
4.1% Duplication

[sonarqubecloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
7 Code Smells

61.6% Coverage
0.4% Duplication

[vishalnarkhede]

🎉 This PR is included in version 5.6.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀