Implement the React-Native Pusher library for iOS and Android

[tgolen]

Problem

Pusher has been having problems reconnecting on Android devices (see this GH). This keeps people from using the app properly.

Solution

After speaking with Pusher support, they recommend using their React-Native Pusher library instead of Pusher-JS for the mobile clients. We will need to continue using Pusher-JS for web and desktop clients.

This will cause some changes to our pusher libraries like PusherConnectionManager.ts and pusher.ts and maybe even PusherUtils.ts in order to use a different lib for the mobile platforms.

Issue Owner

Current Issue Owner: @VickyStash

[VickyStash]

Hi, I'm Viktoryia from Callstack - expert contributor group - and I would like to work on this issue.

[VickyStash]

Updates:
I've compared the pusher-js and @pusher/pusher-websocket-react-native key differences and started the app update to use @pusher/pusher-websocket-react-native on mobile platforms.
There are a lot of syntax differences in pusher initialization and authorization.

The main difference that will result in significant code updates is the way we process events:

• In the pusher-js - we bind the event handler to the socket/channel - simple example. We even have function bindEventToChannel.

• In the @pusher/pusher-websocket-react-native we pass callbacks during pusher initialization or channel subscription:

  • onEvent <- most important one as all events received here
  • onConnectionStateChange, onError, onSubscriptionSucceeded, onSubscriptionError, etc

What I managed to do today:

• Updated pusher init function to follow @pusher/pusher-websocket-react-native syntaxis and made pusher authorization work.
• Updated pusher subscribe function.

The app can already initialize the pusher, subscribe to the private channel, and even receive events for it, but it can't process the events correctly because handlers need to be updated. That's what I'm going to work on next.
Besides that, I need to do a lot of code cleanup/polish and TS typing fixes.

[tgolen]

That sounds like great progress, thank you!

[VickyStash]

Updates:

• Today, I was focused on pusher events listening and processing. Finally, it seems to work as expected, at least with the message receiving scenario! I've prepared a raw Draft PR.
• My next steps:
  • Tests fixes
  • TS and lint fixes
  • Testing of all pusher-related functionality, @tgolen do you know, maybe we have a QA checklist for that? So I don't miss anything

[tgolen]

Testing of all pusher-related functionality, @tgolen do you know, maybe we have a QA checklist for that? So I don't miss anything

I don't think we have anything specific to pusher, no. Here are the main things that I would test out:

• With two separate clients signed into NewDot, chat with each other and verify each client is receiving the chats from the other person
• With the two accounts, submit some expenses and have the other account approve and pay them
• Make sure the "other user is typing..." feature works

I think that's generally it.

[VickyStash]

Updates:

• Resolved TS and lint fixes
• Working on jest tests fixes. Before,pusher-js-mock was used to mock the lib but it doesn't work as expected for @pusher/pusher-websocket-react-native. So I'm mocking @pusher/pusher-websocket-react-native to make it all work. Hopefully, I'll deal with it tomorrow.

[VickyStash]

Updates:

• Fixed jest tests!
• Updated Pusher folder to follow the rules of file organization for platform-specific implementations
• Minor code improvements/clean up
• Added Test steps to the Draft PR
• Started recording preparations.

We just need to finalize the recordings for all platforms. The PR will most likely be ready for the review tomorrow.

[VickyStash]

The PR has been opened for the review!