From c0ba37d9f53de9481cab5dc914cbc0a9287d7a74 Mon Sep 17 00:00:00 2001 From: Alex Risch Date: Fri, 31 May 2024 16:17:12 -0600 Subject: [PATCH] feat: Group Names from network Added group naming from network level Removed local handling --- src/components/GroupHeader.tsx | 8 +++---- src/components/GroupListItem.tsx | 2 +- src/components/modals/GroupInfoModal.tsx | 22 ++++++------------- src/hooks/useGroupName.ts | 27 +++++++++++------------- src/mutations/MutationKeys.ts | 3 +++ src/mutations/useGroupNameMutation.ts | 23 ++++++++++++++++++++ src/queries/QueryKeys.ts | 1 + src/queries/useGroupNameQuery.ts | 22 +++++++++++++++++++ src/screens/GroupScreen.tsx | 2 +- src/screens/NewConversationScreen.tsx | 2 +- src/services/mmkvStorage.ts | 21 ------------------ 11 files changed, 75 insertions(+), 58 deletions(-) create mode 100644 src/mutations/MutationKeys.ts create mode 100644 src/mutations/useGroupNameMutation.ts create mode 100644 src/queries/useGroupNameQuery.ts diff --git a/src/components/GroupHeader.tsx b/src/components/GroupHeader.tsx index f007fe7..06fb3fb 100644 --- a/src/components/GroupHeader.tsx +++ b/src/components/GroupHeader.tsx @@ -12,7 +12,7 @@ import {Text} from './common/Text'; interface GroupHeaderProps { peerAddresses: string[]; onGroupPress: () => void; - groupId: string; + groupTopic: string; } const HeaderContainer: FC = ({children}) => { @@ -33,10 +33,10 @@ const HeaderContainer: FC = ({children}) => { export const GroupHeader: FC = ({ peerAddresses, onGroupPress, - groupId, + groupTopic, }) => { const {goBack} = useTypedNavigation(); - const groupDisplayName = useGroupName(peerAddresses, groupId); + const {groupName} = useGroupName(groupTopic); return ( @@ -56,7 +56,7 @@ export const GroupHeader: FC = ({ typography="text-lg/heavy" numberOfLines={1} textAlign={'center'}> - {groupDisplayName} + {groupName} diff --git a/src/components/GroupListItem.tsx b/src/components/GroupListItem.tsx index c2d82a8..2a94527 100644 --- a/src/components/GroupListItem.tsx +++ b/src/components/GroupListItem.tsx @@ -21,7 +21,7 @@ export const GroupListItem: FC = ({group}) => { const topic = group?.topic; const {data: addresses} = useGroupParticipantsQuery(topic); const {navigate} = useTypedNavigation(); - const groupName = useGroupName(addresses ?? [], topic); + const {groupName} = useGroupName(topic); const {data: messages, isLoading, isError} = useFirstGroupMessageQuery(topic); const firstMessage = messages?.[0]; diff --git a/src/components/modals/GroupInfoModal.tsx b/src/components/modals/GroupInfoModal.tsx index 3cb25af..6d0b12c 100644 --- a/src/components/modals/GroupInfoModal.tsx +++ b/src/components/modals/GroupInfoModal.tsx @@ -5,10 +5,9 @@ import {Alert, DeviceEventEmitter} from 'react-native'; import {AppConfig} from '../../consts/AppConfig'; import {SupportedContentTypes} from '../../consts/ContentTypes'; import {EventEmitterEvents} from '../../consts/EventEmitters'; -import {useClient} from '../../hooks/useClient'; import {useContactInfo} from '../../hooks/useContactInfo'; +import {useGroupName} from '../../hooks/useGroupName'; import {translate} from '../../i18n'; -import {mmkvStorage} from '../../services/mmkvStorage'; import {colors} from '../../theme/colors'; import {AvatarWithFallback} from '../AvatarWithFallback'; import {Button} from '../common/Button'; @@ -85,7 +84,6 @@ export const GroupInfoModal: FC = ({ group, address: currentAddress, }) => { - const {client} = useClient(); const [editing, setEditing] = useState(false); const [groupName, setGroupName] = useState(''); const onRemovePress = useCallback( @@ -103,19 +101,18 @@ export const GroupInfoModal: FC = ({ }, [group, hide], ); + const {groupName: currentGroupName, updateGroupName} = useGroupName( + group?.topic ?? '', + ); const onBlur = useCallback(() => { if (!groupName) { return; } - mmkvStorage.saveGroupName( - client?.address ?? '', - group?.topic ?? '', - groupName, - ); + updateGroupName(groupName); setEditing(false); setGroupName(''); - }, [client?.address, group?.topic, groupName]); + }, [groupName, updateGroupName]); return ( @@ -140,12 +137,7 @@ export const GroupInfoModal: FC = ({ ) : ( - {(!!group && - mmkvStorage.getGroupName( - client?.address ?? '', - group?.topic, - )) ?? - translate('group')} + {currentGroupName ?? translate('group')} setEditing(true)} alignSelf={'flex-end'}> { - const {client} = useClient(); - const data = useMemo(() => { - const groupDisplayName = addresses.map(formatAddress).join(', '); - return groupDisplayName; - }, [addresses]); - const savedGroupName = mmkvStorage.getGroupName( - client?.address ?? '', - groupId, - ); - return savedGroupName ?? data; +export const useGroupName = (groupTopic: string) => { + const {data: groupName} = useGroupNameQuery(groupTopic ?? ''); + const {mutateAsync} = useGroupNameMutation(groupTopic ?? ''); + + return { + groupName, + updateGroupName: async (newGroupName: string) => { + await mutateAsync(newGroupName); + }, + }; }; diff --git a/src/mutations/MutationKeys.ts b/src/mutations/MutationKeys.ts new file mode 100644 index 0000000..25bde07 --- /dev/null +++ b/src/mutations/MutationKeys.ts @@ -0,0 +1,3 @@ +export const MutationKeys = { + GroupName: 'GroupName', +}; diff --git a/src/mutations/useGroupNameMutation.ts b/src/mutations/useGroupNameMutation.ts new file mode 100644 index 0000000..2f92f5d --- /dev/null +++ b/src/mutations/useGroupNameMutation.ts @@ -0,0 +1,23 @@ +import {useMutation} from '@tanstack/react-query'; +import {useGroup} from '../hooks/useGroup'; +import {QueryKeys} from '../queries/QueryKeys'; +import {queryClient} from '../services/queryClient'; +import {MutationKeys} from './MutationKeys'; + +export interface GroupNameQueryOptions { + limit?: number; +} + +export const useGroupNameMutation = (topic: string) => { + const {data: group} = useGroup(topic); + + return useMutation({ + mutationKey: [MutationKeys.GroupName, topic], + mutationFn: async (newGroupName: string) => { + return group?.updateGroupName(newGroupName); + }, + onSuccess: (_, newGroupName) => { + queryClient.setQueryData([QueryKeys.GroupName, topic], newGroupName); + }, + }); +}; diff --git a/src/queries/QueryKeys.ts b/src/queries/QueryKeys.ts index 8fb330d..d9f22b6 100644 --- a/src/queries/QueryKeys.ts +++ b/src/queries/QueryKeys.ts @@ -6,6 +6,7 @@ export enum QueryKeys { Groups = 'groups', GroupParticipants = 'group_participants', GroupMessages = 'group_messages', + GroupName = 'group_name', FirstGroupMessage = 'first_group_messages', FramesClient = 'frames_client', Frame = 'frame', diff --git a/src/queries/useGroupNameQuery.ts b/src/queries/useGroupNameQuery.ts new file mode 100644 index 0000000..5d51576 --- /dev/null +++ b/src/queries/useGroupNameQuery.ts @@ -0,0 +1,22 @@ +import {useQuery} from '@tanstack/react-query'; +import {useGroup} from '../hooks/useGroup'; +import {QueryKeys} from './QueryKeys'; + +export interface GroupNameQueryOptions { + limit?: number; +} + +export const useGroupNameQuery = (topic: string) => { + const {data: group} = useGroup(topic); + + return useQuery({ + queryKey: [QueryKeys.GroupName, topic], + queryFn: async () => { + if (!group) { + return undefined; + } + return group.groupName(); + }, + enabled: !!group, + }); +}; diff --git a/src/screens/GroupScreen.tsx b/src/screens/GroupScreen.tsx index 4e51dd7..36936c1 100644 --- a/src/screens/GroupScreen.tsx +++ b/src/screens/GroupScreen.tsx @@ -187,7 +187,7 @@ export const GroupScreen = () => { }}> setShowGroupModal(true)} /> diff --git a/src/screens/NewConversationScreen.tsx b/src/screens/NewConversationScreen.tsx index 9c9408e..39ebd74 100644 --- a/src/screens/NewConversationScreen.tsx +++ b/src/screens/NewConversationScreen.tsx @@ -88,7 +88,7 @@ export const NewConversationScreen = () => { {}} - groupId="new_convo" + groupTopic="new_convo" /> ) : ( { - return `${MMKVKeys.GROUP_NAME}_${address}_${topic}`; - }; - - saveGroupName = (address: string, topic: string, groupName: string) => { - return this.storage.set(this.getGroupNameKey(address, topic), groupName); - }; - - getGroupName = (address: string, topic: string) => { - return this.storage.getString(this.getGroupNameKey(address, topic)); - }; - - clearGroupName = (address: string, topic: string) => { - return this.storage.delete(this.getGroupNameKey(address, topic)); - }; - - //#endregion Group Name - //#region Group Id Push Subscription private getGroupIdPushSubscriptionKey = (topic: string) => { return `${MMKVKeys.GROUP_ID_PUSH_SUBSCRIPTION}_${topic}`;