Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@nakajima
nakajima committed Dec 1, 2023
1 parent c6d8533 commit 997b3e4
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 29 deletions.
53 changes: 39 additions & 14 deletions example/src/ConversationScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
RemoteAttachmentContent,
DecodedMessage,
StaticAttachmentContent,
ReplyContent,

Check warning on line 32 in example/src/ConversationScreen.tsx

View workflow job for this annotation

GitHub Actions / lint 

'ReplyContent' is defined but never used
} from 'xmtp-react-native-sdk'

import { NavigationParamList } from './Navigation'
Expand All @@ -46,6 +47,8 @@ type Attachment = {
image?: ImagePickerAsset
}

const hiddenMessageTypes = ['xmtp.org/reaction:1.0']

/// Show the messages in a conversation.
export default function ConversationScreen({
route,
Expand All @@ -69,7 +72,9 @@ export default function ConversationScreen({
fileUri: attachment?.image?.uri || attachment?.file?.uri,
mimeType: attachment?.file?.mimeType,
})
messages = (messages || []).filter((message) => !message.content().reaction)
messages = (messages || []).filter(
(message) => !hiddenMessageTypes.includes(message.contentTypeId)
)
// console.log("messages", JSON.stringify(messages, null, 2));
const sendMessage = async (content: any) => {
setSending(true)
Expand Down Expand Up @@ -932,7 +937,10 @@ function MessageItem({
</Text>
</View>
)}
<MessageContents message={message} />
<MessageContents
contentTypeId={message.contentTypeId}
content={message.content()}
/>
<MessageReactions
reactions={reactions || []}
onAddReaction={(reaction) =>
Expand Down Expand Up @@ -1029,38 +1037,55 @@ function RemoteAttachmentMessageContents({
)
}

function MessageContents({ message }: { message: DecodedMessage }) {
if (message.contentTypeId === 'xmtp.org/text:1.0') {
const content: string = message.content()
function MessageContents({
contentTypeId,
content,
}: {
contentTypeId: string
content: any
}) {
if (contentTypeId === 'xmtp.org/text:1.0') {
const text: string = content

return (
<>
<Text>{content}</Text>
<Text>{text}</Text>
</>
)
}
if (message.contentTypeId === 'xmtp.org/attachment:1.0') {
const content: StaticAttachmentContent = message.content()
if (contentTypeId === 'xmtp.org/attachment:1.0') {
const attachment: StaticAttachmentContent = content

return (
<>
<Text style={{ fontStyle: 'italic' }}>
Attachment: {content.filename} ({content.mimeType}) (
{new Buffer(content.data, 'base64').length} bytes)
Attachment: {attachment.filename} ({attachment.mimeType}) (
{new Buffer(attachment.data, 'base64').length} bytes)
</Text>
</>
)
}
if (message.contentTypeId === 'xmtp.org/remoteStaticAttachment:1.0') {
const content: RemoteAttachmentContent = message.content()
if (contentTypeId === 'xmtp.org/remoteStaticAttachment:1.0') {
const remoteAttachment: RemoteAttachmentContent = content

return <RemoteAttachmentMessageContents remoteAttachment={content} />
return (
<RemoteAttachmentMessageContents remoteAttachment={remoteAttachment} />
)
}

if (contentTypeId === 'xmtp.org/reply:1.0') {
const replyContent: any = content

return (
<MessageContents contentTypeId={contentTypeId} content={replyContent} />
)
}

// console.log("unsupported content", content);
return (
<>
<Text style={{ opacity: 0.5, fontStyle: 'italic' }}>
unsupported message content {message.contentTypeId}
unsupported message content {contentTypeId}
</Text>
</>
)
Expand Down
22 changes: 19 additions & 3 deletions example/src/LaunchScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ 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,
Expand Down Expand Up @@ -75,7 +82,11 @@ export default function LaunchScreen({
onPress={() => {
configureWallet(
'dev',
XMTP.Client.createRandom({ env: 'dev', appVersion })
XMTP.Client.createRandom({
env: 'dev',
appVersion,
codecs: supportedCodecs,
})
)
}}
/>
Expand All @@ -87,7 +98,11 @@ export default function LaunchScreen({
onPress={() => {
configureWallet(
'local',
XMTP.Client.createRandom({ env: 'local', appVersion, codecs: [new XMTP.ReactionCodec()] })
XMTP.Client.createRandom({
env: 'local',
appVersion,
codecs: supportedCodecs,
})
)
}}
/>
Expand Down Expand Up @@ -117,6 +132,7 @@ export default function LaunchScreen({
XMTP.Client.createFromKeyBundle(savedKeys.keyBundle!, {
env: 'dev',
appVersion,
codecs: supportedCodecs,
})
)
}}
Expand All @@ -132,7 +148,7 @@ export default function LaunchScreen({
XMTP.Client.createFromKeyBundle(savedKeys.keyBundle!, {
env: 'local',
appVersion,
codecs: [new XMTP.ReactionCodec()]
codecs: supportedCodecs,
})
)
}}
Expand Down
36 changes: 27 additions & 9 deletions example/src/hooks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
DecodedMessage,
DecryptedLocalAttachment,
EncryptedLocalAttachment,
ReactionContent,
RemoteAttachmentContent,
} from 'xmtp-react-native-sdk'

Expand All @@ -16,10 +17,12 @@ import { downloadFile, uploadFile } from './storage'
*
* Note: this is better done with a DB, but we're using react-query for now.
*/
export function useConversationList(): UseQueryResult<Conversation[]> {
export function useConversationList<ContentTypes>(): UseQueryResult<
Conversation<ContentTypes>[]
> {
const { client } = useXmtp()
client?.contacts.refreshConsentList()
return useQuery<Conversation[]>(
return useQuery<Conversation<ContentTypes>[]>(
['xmtp', 'conversations', client?.address],
() => client!.conversations.list(),
{
Expand All @@ -33,14 +36,18 @@ export function useConversationList(): UseQueryResult<Conversation[]> {
*
* Note: this is better done with a DB, but we're using react-query for now.
*/
export function useConversation({
export function useConversation<ContentTypes>({
topic,
}: {
topic: string
}): UseQueryResult<Conversation | undefined> {
}): UseQueryResult<Conversation<ContentTypes> | undefined> {
const { client } = useXmtp()
// TODO: use a DB instead of scanning the cached conversation list
return useQuery<Conversation[], unknown, Conversation | undefined>(
return useQuery<
Conversation<ContentTypes>[],
unknown,
Conversation<ContentTypes> | undefined
>(
['xmtp', 'conversations', client?.address, topic],
() => client!.conversations.list(),
{
Expand Down Expand Up @@ -127,7 +134,10 @@ export function useMessage({
export function useConversationReactions({ topic }: { topic: string }) {
const { client } = useXmtp()
const { data: messages } = useMessages({ topic })
const reactions = (messages || []).filter(({ content }) => content.reaction)
const reactions = (messages || []).filter(
(message: DecodedMessage) =>
message.contentTypeId === 'xmtp.org/reaction:1.0'
)
return useQuery<{
[messageId: string]: {
reaction: string
Expand All @@ -145,7 +155,9 @@ export function useConversationReactions({ topic }: { topic: string }) {
reactions
.slice()
.reverse()
.forEach(({ id, senderAddress, content: { reaction } }) => {
.forEach((message: DecodedMessage) => {
const { senderAddress } = message
const reaction: ReactionContent = message.content()
const messageId = reaction!.reference
const reactionText = reaction!.content
const v = byId[messageId] || ({} as { [reaction: string]: string[] })
Expand Down Expand Up @@ -193,7 +205,13 @@ export function useConversationReactions({ topic }: { topic: string }) {
)
}

export function useMessageReactions({ topic, messageId }) {
export function useMessageReactions({
topic,
messageId,
}: {
topic: string
messageId: string
}) {
const { data: reactionsByMessageId } = useConversationReactions({ topic })
const reactions = ((reactionsByMessageId || {})[messageId] || []) as {
reaction: string
Expand All @@ -213,7 +231,7 @@ export function useLoadRemoteAttachment({
enabled: boolean
}): { decrypted: DecryptedLocalAttachment | undefined } {
const { client } = useXmtp()
const { data: encryptedLocalFileUri } = useQuery<`file://${string}`>(
const { data: encryptedLocalFileUri } = useQuery<string>(
[
'xmtp',
'localAttachment',
Expand Down
4 changes: 2 additions & 2 deletions example/src/storage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ const headers = {
}

export async function uploadFile(
localFileUri: `file://${string}`,
fileId: string
localFileUri: string,
fileId: string | undefined
): Promise<string> {
const url = `${storageUrl}/${fileId}`
console.log('uploading to', url)
Expand Down
2 changes: 1 addition & 1 deletion src/lib/Client.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import type {
} from './ContentCodec'
import Conversations from './Conversations'
import { DecodedMessage } from './DecodedMessage'
import { TextCodec } from './NativeCodecs/TextCodec'
import { Query } from './Query'
import { hexToBytes } from './util'
import * as XMTPModule from '../index'
import { TextCodec } from './NativeCodecs/TextCodec'

declare const Buffer

Expand Down

0 comments on commit 997b3e4

Please sign in to comment.