Merge pull request #237 from xmtp/ar/typescript

feat: Typescript Updates

.github/workflows/tsc.yml

@@ -0,0 +1,13 @@
+name: Typescript
+on:
+  pull_request:
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+      - run: yarn
+      - run: yarn tsc

example/src/ConversationScreen.tsx

@@ -32,8 +32,10 @@ import {
   ReplyContent,
   useClient,
 } from 'xmtp-react-native-sdk'
+import { ConversationSendPayload } from 'xmtp-react-native-sdk/lib/types'
 
 import { NavigationParamList } from './Navigation'
+import { SupportedContentTypes } from './contentTypes/contentTypes'
 import {
   useConversation,
   useMessage,
@@ -82,17 +84,19 @@ export default function ConversationScreen({
     [messages]
   )
 
-  const sendMessage = async (content: any) => {
+  const sendMessage = async (
+    content: ConversationSendPayload<SupportedContentTypes>
+  ) => {
     setSending(true)
     console.log('Sending message', content)
     try {
       content = replyingTo
-        ? {
+        ? ({
             reply: {
               reference: replyingTo,
               content,
             },
-          }
+          } as ConversationSendPayload<SupportedContentTypes>)
         : content
       await conversation!.send(content)
       await refreshMessages()
@@ -103,8 +107,11 @@ export default function ConversationScreen({
       setSending(false)
     }
   }
-  const sendRemoteAttachmentMessage = () =>
-    sendMessage({ remoteAttachment }).then(() => setAttachment(null))
+  const sendRemoteAttachmentMessage = () => {
+    if (remoteAttachment) {
+      sendMessage({ remoteAttachment }).then(() => setAttachment(null))
+    }
+  }
   const sendTextMessage = () => sendMessage({ text }).then(() => setText(''))
   const scrollToMessageId = useCallback(
     (messageId: string) => {
@@ -804,6 +811,7 @@ function ReplyMessageHeader({
       />
     )
   }
+  const content = message.content()
   return (
     <TouchableHighlight onPress={onPress} underlayColor="#eee">
       <View
@@ -856,13 +864,13 @@ function ReplyMessageHeader({
             {message.senderAddress.slice(0, 6)}…
             {message.senderAddress.slice(-4)}
           </Text>
-          {message.content().text ? (
+          {typeof content !== 'string' && 'text' in content && content.text ? (
             <Text
               style={{ fontSize: 12, color: 'gray' }}
               ellipsizeMode="tail"
               numberOfLines={1}
             >
-              {message.content().text}
+              {content.text as string}
             </Text>
           ) : (
             <Text style={{ fontSize: 12, color: 'gray', fontStyle: 'italic' }}>
@@ -898,9 +906,10 @@ function MessageItem({
     return null
   }
   let content = message.content()
-  const replyingTo = content.reply?.reference
-  if (content.reply) {
-    content = content.reply.content
+  const replyingTo = (content as ReplyContent)?.reference
+  if (replyingTo) {
+    const replyContent = (content as ReplyContent).content
+    content = replyContent as typeof content
   }
   showSender = !!(replyingTo || showSender)
   return (
@@ -1058,7 +1067,7 @@ function MessageContents({
   contentTypeId: string
   content: any
 }) {
-  const { client } = useClient()
+  const { client } = useClient<SupportedContentTypes>()
 
   if (contentTypeId === 'xmtp.org/text:1.0') {
     const text: string = content

example/src/LaunchScreen.tsx

@@ -6,17 +6,11 @@ import * as XMTP from 'xmtp-react-native-sdk'
 import { useXmtp } from 'xmtp-react-native-sdk'
 
 import { NavigationParamList } from './Navigation'
+import { supportedCodecs } from './contentTypes/contentTypes'
 import { useSavedKeys } from './hooks'
 
 const appVersion = 'XMTP_RN_EX/0.0.1'
 
-const supportedCodecs = [
-  new XMTP.ReactionCodec(),
-  new XMTP.ReplyCodec(),
-  new XMTP.RemoteAttachmentCodec(),
-  new XMTP.StaticAttachmentCodec(),
-]
-
 /// Prompt the user to run the tests, generate a wallet, or connect a wallet.
 export default function LaunchScreen({
   navigation,

example/src/contentTypes/contentTypes.ts

@@ -0,0 +1,15 @@
+import {
+  ReactionCodec,
+  ReplyCodec,
+  RemoteAttachmentCodec,
+  StaticAttachmentCodec,
+} from 'xmtp-react-native-sdk'
+
+export const supportedCodecs = [
+  new ReactionCodec(),
+  new ReplyCodec(),
+  new RemoteAttachmentCodec(),
+  new StaticAttachmentCodec(),
+]
+
+export type SupportedContentTypes = typeof supportedCodecs

example/src/hooks.tsx

@@ -11,19 +11,20 @@ import {
   useXmtp,
 } from 'xmtp-react-native-sdk'
 
+import { SupportedContentTypes } from './contentTypes/contentTypes'
 import { downloadFile, uploadFile } from './storage'
 
 /**
  * List all conversations.
  *
  * Note: this is better done with a DB, but we're using react-query for now.
  */
-export function useConversationList<ContentTypes>(): UseQueryResult<
-  Conversation<ContentTypes>[]
+export function useConversationList(): UseQueryResult<
+  Conversation<SupportedContentTypes>[]
 > {
   const { client } = useXmtp()
   client?.contacts.refreshConsentList()
-  return useQuery<Conversation<ContentTypes>[]>(
+  return useQuery<Conversation<SupportedContentTypes>[]>(
     ['xmtp', 'conversations', client?.address],
     () => client!.conversations.list(),
     {
@@ -37,17 +38,17 @@ export function useConversationList<ContentTypes>(): UseQueryResult<
  *
  * Note: this is better done with a DB, but we're using react-query for now.
  */
-export function useConversation<ContentTypes>({
+export function useConversation({
   topic,
 }: {
   topic: string
-}): UseQueryResult<Conversation<ContentTypes> | undefined> {
+}): UseQueryResult<Conversation<SupportedContentTypes> | undefined> {
   const { client } = useXmtp()
   // TODO: use a DB instead of scanning the cached conversation list
   return useQuery<
-    Conversation<ContentTypes>[],
+    Conversation<SupportedContentTypes>[],
     unknown,
-    Conversation<ContentTypes> | undefined
+    Conversation<SupportedContentTypes> | undefined
   >(
     ['xmtp', 'conversations', client?.address, topic],
     () => client!.conversations.list(),
@@ -67,10 +68,10 @@ export function useMessages({
   topic,
 }: {
   topic: string
-}): UseQueryResult<DecodedMessage[]> {
+}): UseQueryResult<DecodedMessage<SupportedContentTypes>[]> {
   const { client } = useXmtp()
   const { data: conversation } = useConversation({ topic })
-  return useQuery<DecodedMessage[]>(
+  return useQuery<DecodedMessage<SupportedContentTypes>[]>(
     ['xmtp', 'messages', client?.address, conversation?.topic],
     () => conversation!.messages(),
     {
@@ -91,7 +92,7 @@ export function useMessage({
   topic: string
   messageId: string
 }): {
-  message: DecodedMessage | undefined
+  message: DecodedMessage<SupportedContentTypes> | undefined
   isSenderMe: boolean
   performReaction:
     | undefined
@@ -137,8 +138,7 @@ export function useConversationReactions({ topic }: { topic: string }) {
   const { client } = useXmtp()
   const { data: messages } = useMessages({ topic })
   const reactions = (messages || []).filter(
-    (message: DecodedMessage) =>
-      message.contentTypeId === 'xmtp.org/reaction:1.0'
+    (message) => message.contentTypeId === 'xmtp.org/reaction:1.0'
   )
   return useQuery<{
     [messageId: string]: {
@@ -157,9 +157,9 @@ export function useConversationReactions({ topic }: { topic: string }) {
       reactions
         .slice()
         .reverse()
-        .forEach((message: DecodedMessage) => {
+        .forEach((message) => {
           const { senderAddress } = message
-          const reaction: ReactionContent = message.content()
+          const reaction = message.content() as ReactionContent
           const messageId = reaction!.reference
           const reactionText = reaction!.content
           const v = byId[messageId] || ({} as { [reaction: string]: string[] })

example/src/tests.ts

@@ -1284,7 +1284,10 @@ test('register and use custom content types', async () => {
   const bobConvo = await bob.conversations.newConversation(alice.address)
   const aliceConvo = await alice.conversations.newConversation(bob.address)
 
-  await bobConvo.send(12, { contentType: ContentTypeNumber })
+  await bobConvo.send(
+    { topNumber: { bottomNumber: 12 } },
+    { contentType: ContentTypeNumber }
+  )
 
   const messages = await aliceConvo.messages()
   assert(messages.length === 1, 'did not get messages')
@@ -1293,7 +1296,9 @@ test('register and use custom content types', async () => {
   const messageContent = message.content()
 
   assert(
-    messageContent === 12,
+    typeof messageContent === 'object' &&
+      'topNumber' in messageContent &&
+      messageContent.topNumber.bottomNumber === 1,
     'did not get content properly: ' + JSON.stringify(messageContent)
   )