Revert "Hook Setup"

Author: nplasterer

example/App.tsx

@@ -1,20 +1,21 @@
 import { NavigationContainer } from '@react-navigation/native'
+import React from 'react'
 import { Button, Platform } from 'react-native'
 import { QueryClient, QueryClientProvider } from 'react-query'
-import { XmtpProvider } from 'xmtp-react-native-sdk'
 
 import ConversationCreateScreen from './src/ConversationCreateScreen'
 import ConversationScreen from './src/ConversationScreen'
 import HomeScreen from './src/HomeScreen'
 import LaunchScreen from './src/LaunchScreen'
 import { Navigator } from './src/Navigation'
 import TestScreen from './src/TestScreen'
+import { XmtpContextProvider } from './src/XmtpContext'
 
 const queryClient = new QueryClient()
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <XmtpProvider>
+      <XmtpContextProvider>
         <NavigationContainer>
           <Navigator.Navigator>
             <Navigator.Screen
@@ -70,7 +71,7 @@ export default function App() {
             />
           </Navigator.Navigator>
         </NavigationContainer>
-      </XmtpProvider>
+      </XmtpContextProvider>
     </QueryClientProvider>
   )
 }

example/src/ConversationCreateScreen.tsx

@@ -1,9 +1,9 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React, { useState } from 'react'
 import { Button, ScrollView, Text, TextInput } from 'react-native'
-import { useXmtp } from 'xmtp-react-native-sdk'
 
 import { NavigationParamList } from './Navigation'
+import { useXmtp } from './XmtpContext'
 
 export default function ConversationCreateScreen({
   route,

example/src/ConversationScreen.tsx

@@ -8,7 +8,7 @@ import * as ImagePicker from 'expo-image-picker'
 import type { ImagePickerAsset } from 'expo-image-picker'
 import { PermissionStatus } from 'expo-modules-core'
 import moment from 'moment'
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import {
   Button,
   FlatList,
@@ -30,10 +30,11 @@ import {
   DecodedMessage,
   StaticAttachmentContent,
   ReplyContent,
-  useClient,
+  Client,
 } from 'xmtp-react-native-sdk'
 
 import { NavigationParamList } from './Navigation'
+import { useXmtp } from './XmtpContext'
 import {
   useConversation,
   useMessage,
@@ -56,7 +57,7 @@ export default function ConversationScreen({
 }: NativeStackScreenProps<NavigationParamList, 'conversation'>) {
   const { topic } = route.params
   const messageListRef = useRef<FlatList>(null)
-  const {
+  let {
     data: messages,
     refetch: refreshMessages,
     isFetching,
@@ -73,15 +74,10 @@ export default function ConversationScreen({
     fileUri: attachment?.image?.uri || attachment?.file?.uri,
     mimeType: attachment?.file?.mimeType,
   })
-
-  const filteredMessages = useMemo(
-    () =>
-      (messages ?? [])?.filter(
-        (message) => !hiddenMessageTypes.includes(message.contentTypeId)
-      ),
-    [messages]
+  messages = (messages || []).filter(
+    (message) => !hiddenMessageTypes.includes(message.contentTypeId)
   )
-
+  // console.log("messages", JSON.stringify(messages, null, 2));
   const sendMessage = async (content: any) => {
     setSending(true)
     console.log('Sending message', content)
@@ -106,22 +102,16 @@ export default function ConversationScreen({
   const sendRemoteAttachmentMessage = () =>
     sendMessage({ remoteAttachment }).then(() => setAttachment(null))
   const sendTextMessage = () => sendMessage({ text }).then(() => setText(''))
-  const scrollToMessageId = useCallback(
-    (messageId: string) => {
-      const index = (filteredMessages || []).findIndex(
-        (m) => m.id === messageId
-      )
-      if (index === -1) {
-        return
-      }
-      return messageListRef.current?.scrollToIndex({
-        index,
-        animated: true,
-      })
-    },
-    [filteredMessages]
-  )
-
+  const scrollToMessageId = (messageId: string) => {
+    const index = (messages || []).findIndex((m) => m.id === messageId)
+    if (index === -1) {
+      return
+    }
+    return messageListRef.current?.scrollToIndex({
+      index,
+      animated: true,
+    })
+  }
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <KeyboardAvoidingView
@@ -152,7 +142,7 @@ export default function ConversationScreen({
             contentContainerStyle={{ paddingBottom: 100 }}
             refreshing={isFetching || isRefetching}
             onRefresh={refreshMessages}
-            data={filteredMessages}
+            data={messages}
             inverted
             keyboardDismissMode="none"
             keyExtractor={(message) => message.id}
@@ -164,9 +154,9 @@ export default function ConversationScreen({
                 onReply={() => setReplyingTo(message.id)}
                 onMessageReferencePress={scrollToMessageId}
                 showSender={
-                  index === (filteredMessages || []).length - 1 ||
-                  (index + 1 < (filteredMessages || []).length &&
-                    filteredMessages![index + 1].senderAddress !==
+                  index === (messages || []).length - 1 ||
+                  (index + 1 < (messages || []).length &&
+                    messages![index + 1].senderAddress !==
                       message.senderAddress)
                 }
               />
@@ -1056,7 +1046,7 @@ function MessageContents({
   contentTypeId: string
   content: any
 }) {
-  const { client } = useClient()
+  const { client }: { client: Client<any> } = useXmtp()
 
   if (contentTypeId === 'xmtp.org/text:1.0') {
     const text: string = content
@@ -1090,8 +1080,8 @@ function MessageContents({
   if (contentTypeId === 'xmtp.org/reply:1.0') {
     const replyContent: ReplyContent = content
     const replyContentType = replyContent.contentType
-    const codec = client?.codecRegistry[replyContentType]
-    const actualReplyContent = codec?.decode(replyContent.content)
+    const codec = client.codecRegistry[replyContentType]
+    const actualReplyContent = codec.decode(replyContent.content)
 
     return (
       <View>

example/src/HomeScreen.tsx

@@ -9,8 +9,9 @@ import {
   Text,
   View,
 } from 'react-native'
-import { Conversation, Client, useXmtp } from 'xmtp-react-native-sdk'
+import { Conversation, Client } from 'xmtp-react-native-sdk'
 
+import { useXmtp } from './XmtpContext'
 import { useConversationList, useMessages } from './hooks'
 
 /// Show the user's list of conversations.

example/src/LaunchScreen.tsx

@@ -1,10 +1,10 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
-import React, { useCallback } from 'react'
+import React from 'react'
 import { Button, ScrollView, StyleSheet, Text, View } from 'react-native'
 import * as XMTP from 'xmtp-react-native-sdk'
-import { useXmtp } from 'xmtp-react-native-sdk'
 
 import { NavigationParamList } from './Navigation'
+import { useXmtp } from './XmtpContext'
 import { useSavedKeys } from './hooks'
 
 const appVersion = 'XMTP_RN_EX/0.0.1'
@@ -22,26 +22,24 @@ export default function LaunchScreen({
 }: NativeStackScreenProps<NavigationParamList, 'launch'>) {
   const { setClient } = useXmtp()
   const savedKeys = useSavedKeys()
-  const configureWallet = useCallback(
-    (label: string, configuring: Promise<XMTP.Client>) => {
-      console.log('Connecting XMTP client', label)
-      configuring
-        .then(async (client) => {
-          console.log('Connected XMTP client', label, {
-            address: client.address,
-          })
-          setClient(client)
-          navigation.navigate('home')
-          // Save the configured client keys for use in later sessions.
-          const keyBundle = await client.exportKeyBundle()
-          await savedKeys.save(keyBundle)
+  const configureWallet = (
+    label: string,
+    configuring: Promise<XMTP.Client>
+  ) => {
+    console.log('Connecting XMTP client', label)
+    configuring
+      .then(async (client) => {
+        console.log('Connected XMTP client', label, {
+          address: client.address,
         })
-        .catch((err) =>
-          console.log('Unable to connect XMTP client', label, err)
-        )
-    },
-    []
-  )
+        setClient(client)
+        navigation.navigate('home')
+        // Save the configured client keys for use in later sessions.
+        const keyBundle = await client.exportKeyBundle()
+        await savedKeys.save(keyBundle)
+      })
+      .catch((err) => console.log('Unable to connect XMTP client', label, err))
+  }
   return (
     <ScrollView>
       <Text

example/src/XmtpContext.tsx

@@ -0,0 +1,26 @@
+import {
+  createContext,
+  FC,
+  ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+import * as XMTP from 'xmtp-react-native-sdk'
+
+const XmtpContext = createContext<{
+  client: XMTP.Client | null
+  setClient: (client: XMTP.Client | null) => void
+}>({
+  client: null,
+  setClient: () => {},
+})
+export const useXmtp = () => useContext(XmtpContext)
+type Props = {
+  children: ReactNode
+}
+export const XmtpContextProvider: FC<Props> = ({ children }) => {
+  const [client, setClient] = useState<XMTP.Client | null>(null)
+  const context = useMemo(() => ({ client, setClient }), [client, setClient])
+  return <XmtpContext.Provider value={context}>{children}</XmtpContext.Provider>
+}

example/src/hooks.tsx

@@ -7,9 +7,9 @@ import {
   EncryptedLocalAttachment,
   ReactionContent,
   RemoteAttachmentContent,
-  useXmtp,
 } from 'xmtp-react-native-sdk'
 
+import { useXmtp } from './XmtpContext'
 import { downloadFile, uploadFile } from './storage'
 
 /**