feat: Subscribe guides to a new presence pusher channel

src/components/ActiveGuidesEventListener.tsx

@@ -0,0 +1,36 @@
+import {useEffect, useRef} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
+import * as Report from '@userActions/Report';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {User} from '@src/types/onyx';
+
+type ActiveGuidesEventListenerOnyxProps = {
+    user: OnyxEntry<User>;
+};
+
+type ActiveGuidesEventListenerProps = ActiveGuidesEventListenerOnyxProps;
+
+function ActiveGuidesEventListener({user}: ActiveGuidesEventListenerProps) {
+    const didSubscribeToActiveGuides = useRef(false);
+    useEffect(
+        () => () => {
+            if (didSubscribeToActiveGuides.current) {
+                return;
+            }
+            if (user?.isGuide) {
+                didSubscribeToActiveGuides.current = true;
+                Report.subscribeToActiveGuides();
+            }
+        },
+
+        [user],
+    );
+    return null;
+}
+
+export default withOnyx<ActiveGuidesEventListenerProps, ActiveGuidesEventListenerOnyxProps>({
+    user: {
+        key: ONYXKEYS.USER,
+    },
+})(ActiveGuidesEventListener);

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -1,8 +1,9 @@
-import React, {memo, useEffect, useMemo, useRef} from 'react';
+import React, {memo, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import Onyx, {withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import ActiveGuidesEventListener from '@components/ActiveGuidesEventListener';
 import ComposeProviders from '@components/ComposeProviders';
 import OptionsListContextProvider from '@components/OptionListContextProvider';
 import {SearchContextProvider} from '@components/Search/SearchContext';
@@ -107,7 +108,7 @@ function getCentralPaneScreenInitialParams(screenName: CentralPaneName, initialR
 }
 
 function initializePusher() {
-    Pusher.init({
+    return Pusher.init({
         appKey: CONFIG.PUSHER.APP_KEY,
         cluster: CONFIG.PUSHER.CLUSTER,
         authEndpoint: `${CONFIG.EXPENSIFY.DEFAULT_API_ROOT}api/AuthenticatePusher?`,
@@ -227,6 +228,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
         [StyleUtils, shouldUseNarrowLayout, onboardingIsMediumOrLargerScreenWidth, styles],
     );
     const modal = useRef<OnyxTypes.Modal>({});
+    const [didPusherInit, setDidPusherInit] = useState(false);
 
     let initialReportID: string | undefined;
     const isInitialRender = useRef(true);
@@ -264,7 +266,9 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
         NetworkConnection.listenForReconnect();
         NetworkConnection.onReconnect(handleNetworkReconnect);
         PusherConnectionManager.init();
-        initializePusher();
+        initializePusher().then(() => {
+            setDidPusherInit(true);
+        });
 
         // If we are on this screen then we are "logged in", but the user might not have "just logged in". They could be reopening the app
         // or returning from background. If so, we'll assume they have some app data already and we can call reconnectApp() instead of openApp().
@@ -562,6 +566,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                     })}
                 </RootStack.Navigator>
             </View>
+            {didPusherInit && <ActiveGuidesEventListener />}
         </ComposeProviders>
     );
 }

src/libs/Pusher/pusher.ts

@@ -156,7 +156,7 @@ function getChannel(channelName: string): Channel | undefined {
 /**
  * Binds an event callback to a channel + eventName
  */
-function bindEventToChannel<EventName extends PusherEventName>(channel: Channel | undefined, eventName: EventName, eventCallback: (data: EventData<EventName>) => void = () => {}) {
+function bindEventToChannel<EventName extends PusherEventName>(channel: Channel | undefined, eventName?: EventName, eventCallback: (data: EventData<EventName>) => void = () => {}) {
     if (!eventName || !channel) {
         return;
     }
@@ -232,7 +232,7 @@ function bindEventToChannel<EventName extends PusherEventName>(channel: Channel
  */
 function subscribe<EventName extends PusherEventName>(
     channelName: string,
-    eventName: EventName,
+    eventName?: EventName,
     eventCallback: (data: EventData<EventName>) => void = () => {},
     onResubscribe = () => {},
 ): Promise<void> {

src/libs/actions/Report.ts

@@ -4087,6 +4087,16 @@ function markAsManuallyExported(reportID: string, connectionName: ConnectionName
     API.write(WRITE_COMMANDS.MARK_AS_EXPORTED, params, {optimisticData, successData, failureData});
 }
 
+function subscribeToActiveGuides() {
+    Pusher.subscribe(`activeGuides`).catch((error: ReportError) => {
+        Log.hmmm('[Report] Failed to initially subscribe to Pusher channel', {errorType: error.type, pusherChanelName: 'activeGuides'});
+    });
+}
+
+function unsubscribeToActiveGuides() {
+    Pusher.unsubscribe(`activeGuides`);
+}
+
 export type {Video};
 
 export {
@@ -4175,4 +4185,6 @@ export {
     exportToIntegration,
     markAsManuallyExported,
     handleReportChanged,
+    subscribeToActiveGuides,
+    unsubscribeToActiveGuides,
 };

src/types/onyx/User.ts

@@ -29,6 +29,9 @@ type User = {
 
     /** Whether the form is being submitted */
     loading?: boolean;
+
+    /** Whether the user is Expensify Guide */
+    isGuide?: boolean;
 };
 
 export default User;