[🐴] Integrate global event bus (#3904)

* Conditionally run global event bus * Add current convo id context, bundle providers
bluesky-social · May 8, 2024 · 165fdb7 · 165fdb7
1 parent 37f22ca
commit 165fdb7
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 31 deletions.
diff --git a/src/App.native.tsx b/src/App.native.tsx
@@ -16,6 +16,7 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
+import {MessagesProvider} from '#/state/messages'
 import {init as initPersistedState} from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
@@ -97,21 +98,23 @@ function InnerApp() {
                 <QueryProvider currentDid={currentAccount?.did}>
                   <PushNotificationsListener>
                     <StatsigProvider>
-                      {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                      <LabelDefsProvider>
-                        <ModerationOptsProvider>
-                          <LoggedOutViewProvider>
-                            <SelectedFeedProvider>
-                              <UnreadNotifsProvider>
-                                <GestureHandlerRootView style={s.h100pct}>
-                                  <TestCtrls />
-                                  <Shell />
-                                </GestureHandlerRootView>
-                              </UnreadNotifsProvider>
-                            </SelectedFeedProvider>
-                          </LoggedOutViewProvider>
-                        </ModerationOptsProvider>
-                      </LabelDefsProvider>
+                      <MessagesProvider>
+                        {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                        <LabelDefsProvider>
+                          <ModerationOptsProvider>
+                            <LoggedOutViewProvider>
+                              <SelectedFeedProvider>
+                                <UnreadNotifsProvider>
+                                  <GestureHandlerRootView style={s.h100pct}>
+                                    <TestCtrls />
+                                    <Shell />
+                                  </GestureHandlerRootView>
+                                </UnreadNotifsProvider>
+                              </SelectedFeedProvider>
+                            </LoggedOutViewProvider>
+                          </ModerationOptsProvider>
+                        </LabelDefsProvider>
+                      </MessagesProvider>
                     </StatsigProvider>
                   </PushNotificationsListener>
                 </QueryProvider>

diff --git a/src/App.web.tsx b/src/App.web.tsx
@@ -9,6 +9,7 @@ import {useLingui} from '@lingui/react'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
+import {MessagesProvider} from '#/state/messages'
 import {init as initPersistedState} from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
@@ -84,20 +85,22 @@ function InnerApp() {
             key={currentAccount?.did}>
             <QueryProvider currentDid={currentAccount?.did}>
               <StatsigProvider>
-                {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                <LabelDefsProvider>
-                  <ModerationOptsProvider>
-                    <LoggedOutViewProvider>
-                      <SelectedFeedProvider>
-                        <UnreadNotifsProvider>
-                          <SafeAreaProvider>
-                            <Shell />
-                          </SafeAreaProvider>
-                        </UnreadNotifsProvider>
-                      </SelectedFeedProvider>
-                    </LoggedOutViewProvider>
-                  </ModerationOptsProvider>
-                </LabelDefsProvider>
+                <MessagesProvider>
+                  {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                  <LabelDefsProvider>
+                    <ModerationOptsProvider>
+                      <LoggedOutViewProvider>
+                        <SelectedFeedProvider>
+                          <UnreadNotifsProvider>
+                            <SafeAreaProvider>
+                              <Shell />
+                            </SafeAreaProvider>
+                          </UnreadNotifsProvider>
+                        </SelectedFeedProvider>
+                      </LoggedOutViewProvider>
+                    </ModerationOptsProvider>
+                  </LabelDefsProvider>
+                </MessagesProvider>
               </StatsigProvider>
             </QueryProvider>
           </React.Fragment>

diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx
@@ -5,11 +5,12 @@ import {AppBskyActorDefs} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/native'
+import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
+import {useCurrentConvoId} from '#/state/messages/current-convo-id'
 import {BACK_HITSLOP} from 'lib/constants'
 import {isWeb} from 'platform/detection'
 import {ChatProvider, useChat} from 'state/messages'
@@ -31,6 +32,16 @@ type Props = NativeStackScreenProps<
 export function MessagesConversationScreen({route}: Props) {
   const gate = useGate()
   const convoId = route.params.conversation
+  const {setCurrentConvoId} = useCurrentConvoId()
+
+  useFocusEffect(
+    useCallback(() => {
+      setCurrentConvoId(convoId)
+      return () => {
+        setCurrentConvoId(undefined)
+      }
+    }, [convoId, setCurrentConvoId]),
+  )
 
   if (!gate('dms')) return <ClipClopGate />
 

diff --git a/src/state/messages/current-convo-id.tsx b/src/state/messages/current-convo-id.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+const CurrentConvoIdContext = React.createContext<{
+  currentConvoId: string | undefined
+  setCurrentConvoId: (convoId: string | undefined) => void
+}>({
+  currentConvoId: undefined,
+  setCurrentConvoId: () => {},
+})
+
+export function useCurrentConvoId() {
+  const ctx = React.useContext(CurrentConvoIdContext)
+  if (!ctx) {
+    throw new Error(
+      'useCurrentConvoId must be used within a CurrentConvoIdProvider',
+    )
+  }
+  return ctx
+}
+
+export function CurrentConvoIdProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [currentConvoId, setCurrentConvoId] = React.useState<
+    string | undefined
+  >()
+  const ctx = React.useMemo(
+    () => ({currentConvoId, setCurrentConvoId}),
+    [currentConvoId],
+  )
+  return (
+    <CurrentConvoIdContext.Provider value={ctx}>
+      {children}
+    </CurrentConvoIdContext.Provider>
+  )
+}
diff --git a/src/state/messages/events/index.tsx b/src/state/messages/events/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {AppState} from 'react-native'
 import {BskyAgent} from '@atproto-labs/api'
 
+import {useGate} from '#/lib/statsig/statsig'
 import {isWeb} from '#/platform/detection'
 import {MessagesEventBus} from '#/state/messages/events/agent'
 import {MessagesEventBusState} from '#/state/messages/events/types'
@@ -20,7 +21,7 @@ export function useMessagesEventBus() {
   return ctx
 }
 
-export function MessagesEventBusProvider({
+export function Temp_MessagesEventBusProvider({
   children,
 }: {
   children: React.ReactNode
@@ -65,3 +66,18 @@ export function MessagesEventBusProvider({
     </MessagesEventBusContext.Provider>
   )
 }
+
+export function MessagesEventBusProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const gate = useGate()
+  const {serviceUrl} = useDmServiceUrlStorage()
+  if (gate('dms') && serviceUrl) {
+    return (
+      <Temp_MessagesEventBusProvider>{children}</Temp_MessagesEventBusProvider>
+    )
+  }
+  return children
+}
diff --git a/src/state/messages/index.tsx b/src/state/messages/index.tsx
@@ -4,6 +4,8 @@ import {BskyAgent} from '@atproto-labs/api'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 
 import {Convo, ConvoParams, ConvoState} from '#/state/messages/convo'
+import {CurrentConvoIdProvider} from '#/state/messages/current-convo-id'
+import {MessagesEventBusProvider} from '#/state/messages/events'
 import {useAgent} from '#/state/session'
 import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
 
@@ -66,3 +68,11 @@ export function ChatProvider({
 
   return <ChatContext.Provider value={service}>{children}</ChatContext.Provider>
 }
+
+export function MessagesProvider({children}: {children: React.ReactNode}) {
+  return (
+    <CurrentConvoIdProvider>
+      <MessagesEventBusProvider>{children}</MessagesEventBusProvider>
+    </CurrentConvoIdProvider>
+  )
+}