From 61e75164126863535b78eb4455fb6bd12a9db901 Mon Sep 17 00:00:00 2001 From: Nicholas Molnar <65710+neekolas@users.noreply.github.com> Date: Tue, 6 Feb 2024 12:33:23 -0600 Subject: [PATCH 1/9] Add group listing --- .gitignore | 1 + example/src/HomeScreen.tsx | 123 +++++++++++++++++++++++++++++-------- example/src/hooks.tsx | 37 +++++++++++ 3 files changed, 135 insertions(+), 26 deletions(-) diff --git a/.gitignore b/.gitignore index 84068a05d..b9ec20389 100644 --- a/.gitignore +++ b/.gitignore @@ -63,3 +63,4 @@ android/keystores/debug.keystore # Typedocs docs/ +**/.yarn/* \ No newline at end of file diff --git a/example/src/HomeScreen.tsx b/example/src/HomeScreen.tsx index f137b2d55..c8f146e82 100644 --- a/example/src/HomeScreen.tsx +++ b/example/src/HomeScreen.tsx @@ -10,8 +10,9 @@ import { View, } from 'react-native' import { Conversation, Client, useXmtp } from 'xmtp-react-native-sdk' +import { Group } from 'xmtp-react-native-sdk/lib/Group' -import { useConversationList, useMessages } from './hooks' +import { useConversationList, useGroupsList, useMessages } from './hooks' /// Show the user's list of conversations. @@ -23,34 +24,104 @@ export default function HomeScreen() { isFetching, isRefetching, } = useConversationList() + const { + data: groups, + refetch: refetchGroups, + isFetching: isFetchingGroups, + isRefetching: isRefetchingGroups, + } = useGroupsList() + return ( + <> + + + DMs + + item.topic} + renderItem={({ item: conversation }) => ( + + )} + ListHeaderComponent={ + + Connected as + + {client?.address} + + + } + /> + + + + Groups + + item.id} + renderItem={({ item: group }) => ( + + )} + /> + + + ) +} + +function GroupListItem({ + group, + client, +}: { + group: Group + client: Client | null +}) { + const navigation = useContext(NavigationContext) + const messages = [] return ( - item.topic} - renderItem={({ item: conversation }) => ( - - )} - ListHeaderComponent={ - - Connected as - - {client?.address} + + navigation!.navigate('group', { + id: group.id, + }) + } + > + + + + ({messages?.length} messages) - } - /> + + + Fallback text + + {/* {lastMessage?.senderAddress}: + {moment(lastMessage?.sent).fromNow()} + + {getConsentState} + */} + + + ) } diff --git a/example/src/hooks.tsx b/example/src/hooks.tsx index c406c4929..feb6065ac 100644 --- a/example/src/hooks.tsx +++ b/example/src/hooks.tsx @@ -10,6 +10,7 @@ import { RemoteAttachmentContent, useXmtp, } from 'xmtp-react-native-sdk' +import { Group } from 'xmtp-react-native-sdk/lib/Group' import { SupportedContentTypes } from './contentTypes/contentTypes' import { downloadFile, uploadFile } from './storage' @@ -33,6 +34,42 @@ export function useConversationList(): UseQueryResult< ) } +export function useGroupsList(): UseQueryResult< + Group[] +> { + const { client } = useXmtp() + return useQuery[]>( + ['xmtp', 'groups', client?.address], + async () => (await client?.conversations.listGroups()) || [], + { + enabled: !!client, + } + ) +} + +export function useGroup({ + groupId, +}: { + groupId: string +}): UseQueryResult | undefined> { + const { client } = useXmtp() + return useQuery< + Group[], + unknown, + Group | undefined + >( + ['xmtp', 'group', client?.address, groupId], + async () => { + const groups = await client?.conversations.listGroups() + return groups || [] + }, + { + select: (groups) => groups.find((g) => g.id === groupId), + enabled: !!client, + } + ) +} + /** * Get the conversation identified by `topic`. * From 5524467aaf81f917a02897ebf37cb8ed972db6d0 Mon Sep 17 00:00:00 2001 From: Nicholas Molnar <65710+neekolas@users.noreply.github.com> Date: Tue, 6 Feb 2024 13:15:56 -0600 Subject: [PATCH 2/9] Add group toggle to new conversation --- example/package.json | 1 + example/src/ConversationCreateScreen.tsx | 18 +- example/src/Navigation.tsx | 1 + example/yarn.lock | 11552 ++++++++++++--------- 4 files changed, 6442 insertions(+), 5130 deletions(-) diff --git a/example/package.json b/example/package.json index 9dc6f0b5e..38d3a2844 100644 --- a/example/package.json +++ b/example/package.json @@ -37,6 +37,7 @@ "react-native-safe-area-context": "4.5.0", "react-native-screens": "~3.20.0", "react-native-svg": "^13.9.0", + "react-native-toggle-element": "^2.0.1", "react-native-url-polyfill": "^2.0.0", "react-query": "^3.39.3", "stream-browserify": "^3.0.0", diff --git a/example/src/ConversationCreateScreen.tsx b/example/src/ConversationCreateScreen.tsx index 9f0676dc9..45b8db0d8 100644 --- a/example/src/ConversationCreateScreen.tsx +++ b/example/src/ConversationCreateScreen.tsx @@ -1,6 +1,7 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack' import React, { useState } from 'react' import { Button, ScrollView, Text, TextInput } from 'react-native' +import Toggle from 'react-native-toggle-element' import { useXmtp } from 'xmtp-react-native-sdk' import { NavigationParamList } from './Navigation' @@ -13,6 +14,8 @@ export default function ConversationCreateScreen({ const [alert, setAlert] = useState('') const [isCreating, setCreating] = useState(false) const { client } = useXmtp() + const [groupsEnabled, setGroupsEnabled] = useState(false) + const startNewConversation = async (toAddress: string) => { if (!client) { setAlert('Client not initialized') @@ -23,9 +26,15 @@ export default function ConversationCreateScreen({ setAlert(`${toAddress} is not on the XMTP network yet`) return } - const convo = await client.conversations.newConversation(toAddress) - navigation.navigate('conversation', { topic: convo.topic }) + if (groupsEnabled) { + const group = await client.conversations.newGroup([toAddress]) + navigation.navigate('group', { id: group.id }) + } else { + const convo = await client.conversations.newConversation(toAddress) + navigation.navigate('conversation', { topic: convo.topic }) + } } + return ( <> @@ -48,6 +57,11 @@ export default function ConversationCreateScreen({ opacity: isCreating ? 0.5 : 1, }} /> + setGroupsEnabled(!newState)} + leftTitle="Group" + />