From 98083ea9971982c7bfbf9959f3529d29d9baddaf Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Apr 2024 12:38:29 -0700 Subject: [PATCH 01/11] add temp `getchat` query --- src/screens/Messages/Temp/query/query.ts | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/screens/Messages/Temp/query/query.ts b/src/screens/Messages/Temp/query/query.ts index a51929bcab..f7d5cbeb01 100644 --- a/src/screens/Messages/Temp/query/query.ts +++ b/src/screens/Messages/Temp/query/query.ts @@ -70,6 +70,8 @@ export function useChat(chatId: string) { if (!chatResponse.ok) throw new Error('Failed to fetch chat') + queryClient.setQueryData(['chatQuery', chatId], chatResponse) + const chatJson = (await chatResponse.json()) as TempDmChatGetChat.OutputSchema @@ -275,3 +277,25 @@ export function useListChats() { getNextPageParam: lastPage => lastPage.cursor, }) } + +export function useChatQuery(chatId: string) { + const headers = useHeaders() + const {serviceUrl} = useDmServiceUrlStorage() + + return useQuery({ + queryKey: ['chatQuery', chatId], + queryFn: async () => { + const chatResponse = await fetch( + `${serviceUrl}/xrpc/temp.dm.getChat?chatId=${chatId}`, + { + headers, + }, + ) + + if (!chatResponse.ok) throw new Error('Failed to fetch chat') + + const chatResponseJson = await chatResponse.json() + return chatResponseJson as TempDmChatGetChat.OutputSchema + }, + }) +} From 2bafbb8dc083045276cd7e3237a7b5dfd93c1dc2 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Apr 2024 12:49:44 -0700 Subject: [PATCH 02/11] properly get the other profile --- src/screens/Messages/Conversation/index.tsx | 95 +++++++++++++++++++-- src/screens/Messages/Temp/query/query.ts | 8 +- 2 files changed, 92 insertions(+), 11 deletions(-) diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index efa64f5f85..0142ee9ed9 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -1,13 +1,24 @@ import React from 'react' -import {msg} from '@lingui/macro' +import {View} from 'react-native' +import {AppBskyActorDefs} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {NativeStackScreenProps} from '@react-navigation/native-stack' import {CommonNavigatorParams} from '#/lib/routes/types' import {useGate} from '#/lib/statsig/statsig' +import {useSession} from 'state/session' import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' import {MessagesList} from '#/screens/Messages/Conversation/MessagesList' +import {useChat, useChatQuery} from '#/screens/Messages/Temp/query/query' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {DialogControlProps} from '#/components/Dialog' +import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' +import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider' +import {ListMaybePlaceholder} from '#/components/Lists' +import {Text} from '#/components/Typography' import {ClipClopGate} from '../gate' type Props = NativeStackScreenProps< @@ -15,20 +26,90 @@ type Props = NativeStackScreenProps< 'MessagesConversation' > export function MessagesConversationScreen({route}: Props) { - const chatId = route.params.conversation const {_} = useLingui() const gate = useGate() + const chatId = route.params.conversation + + const {currentAccount} = useSession() + const myDid = currentAccount?.did + + const { + data: chat, + isLoading: isLoading, + isError: isError, + } = useChatQuery(chatId) + + const otherProfile = React.useMemo(() => { + return chat?.members?.find(m => m.did !== myDid) + }, [chat?.members, myDid]) + + console.log(otherProfile) + if (!gate('dms')) return + if (!chat || !otherProfile) { + return ( + + + + ) + } + return ( - +
) } + +function Header({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) { + const t = useTheme() + const {_} = useLingui() + const {gtTablet} = useBreakpoints() + + return ( + + + Messages + + + + {gtTablet && ( + + )} + + + ) +} diff --git a/src/screens/Messages/Temp/query/query.ts b/src/screens/Messages/Temp/query/query.ts index f7d5cbeb01..a4d78e0bb7 100644 --- a/src/screens/Messages/Temp/query/query.ts +++ b/src/screens/Messages/Temp/query/query.ts @@ -70,11 +70,11 @@ export function useChat(chatId: string) { if (!chatResponse.ok) throw new Error('Failed to fetch chat') - queryClient.setQueryData(['chatQuery', chatId], chatResponse) - const chatJson = (await chatResponse.json()) as TempDmChatGetChat.OutputSchema + queryClient.setQueryData(['chatQuery', chatId], chatJson.chat) + const newChat = { chatId, messages: messagesJson.messages, @@ -294,8 +294,8 @@ export function useChatQuery(chatId: string) { if (!chatResponse.ok) throw new Error('Failed to fetch chat') - const chatResponseJson = await chatResponse.json() - return chatResponseJson as TempDmChatGetChat.OutputSchema + const json = (await chatResponse.json()) as TempDmChatGetChat.OutputSchema + return json.chat }, }) } From 7f2ced1d1260b821e983cebc17ae3afcd99bc965 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Apr 2024 12:59:44 -0700 Subject: [PATCH 03/11] add basic header --- src/screens/Messages/Conversation/index.tsx | 64 ++++++++++++++------- 1 file changed, 44 insertions(+), 20 deletions(-) diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index 0142ee9ed9..be2b5e540e 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -1,14 +1,19 @@ import React from 'react' -import {View} from 'react-native' +import {TouchableOpacity, View} from 'react-native' import {AppBskyActorDefs} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {CommonNavigatorParams} from '#/lib/routes/types' +import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' import {useGate} from '#/lib/statsig/statsig' +import {BACK_HITSLOP} from 'lib/constants' +import {isWeb} from 'platform/detection' import {useSession} from 'state/session' import {ViewHeader} from '#/view/com/util/ViewHeader' +import {UserAvatar} from 'view/com/util/UserAvatar' import {CenteredView} from 'view/com/util/Views' import {MessagesList} from '#/screens/Messages/Conversation/MessagesList' import {useChat, useChatQuery} from '#/screens/Messages/Temp/query/query' @@ -68,6 +73,15 @@ function Header({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) { const t = useTheme() const {_} = useLingui() const {gtTablet} = useBreakpoints() + const navigation = useNavigation() + + const onPressBack = React.useCallback(() => { + if (isWeb) { + navigation.replace('MessagesList') + } else { + navigation.pop() + } + }, [navigation]) return ( - - Messages - + + + + + + + + + {profile.displayName} + + - {gtTablet && ( - - )} ) From b7305885cbc2bc770c20415b2d7aacdaa7f9b7cb Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Apr 2024 13:36:44 -0700 Subject: [PATCH 04/11] normalize layout on all devices --- src/screens/Messages/Conversation/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index be2b5e540e..6e66b7cd56 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -90,13 +90,12 @@ function Header({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) { t.atoms.border_contrast_low, a.border_b, a.flex_row, - a.align_center, a.justify_between, a.gap_lg, a.px_lg, a.py_sm, ]}> - + {!gtTablet ? ( - + ) : ( + + )} {profile.displayName} - + + + + ) From a2d82bb8044786bc1ae02e1c954fb3a27755ba5b Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Apr 2024 14:39:38 -0700 Subject: [PATCH 06/11] remove unnecessary log --- src/screens/Messages/Temp/useDmServiceUrlStorage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/Messages/Temp/useDmServiceUrlStorage.tsx b/src/screens/Messages/Temp/useDmServiceUrlStorage.tsx index 3679858f4c..d78128b5c7 100644 --- a/src/screens/Messages/Temp/useDmServiceUrlStorage.tsx +++ b/src/screens/Messages/Temp/useDmServiceUrlStorage.tsx @@ -35,7 +35,6 @@ export function DmServiceUrlProvider({children}: {children: React.ReactNode}) { React.useEffect(() => { ;(async () => { const v = await getItem() - console.log(v) setServiceUrl(v ?? '') })() }, [getItem]) From 6258b0edc74898fd0b18b9b42317699929d91ad1 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Apr 2024 14:39:44 -0700 Subject: [PATCH 07/11] remove another log --- src/screens/Messages/Conversation/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index c09ad45ee6..0c8ce19103 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -42,8 +42,6 @@ export function MessagesConversationScreen({route}: Props) { return chat?.members?.find(m => m.did !== myDid) }, [chat?.members, myDid]) - console.log(otherProfile) - if (!gate('dms')) return if (!chat || !otherProfile) { From 2b3343b4c5704b97b5590f2e3f335d9ed869ead0 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Apr 2024 14:40:33 -0700 Subject: [PATCH 08/11] remove some more imports --- src/screens/Messages/Conversation/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index 0c8ce19103..7deb9ae498 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -17,9 +17,7 @@ import {CenteredView} from 'view/com/util/Views' import {MessagesList} from '#/screens/Messages/Conversation/MessagesList' import {useChatQuery} from '#/screens/Messages/Temp/query/query' import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import {Button, ButtonIcon} from '#/components/Button' import {DotGrid_Stroke2_Corner0_Rounded} from '#/components/icons/DotGrid' -import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider' import {ListMaybePlaceholder} from '#/components/Lists' import {Text} from '#/components/Typography' import {ClipClopGate} from '../gate' From b9d985426e45d6d47f960d6e61eac8586c5cc57b Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Apr 2024 14:41:21 -0700 Subject: [PATCH 09/11] cleanup --- src/screens/Messages/Conversation/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index 7deb9ae498..af1d33bb63 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -28,14 +28,11 @@ type Props = NativeStackScreenProps< > export function MessagesConversationScreen({route}: Props) { const gate = useGate() - const chatId = route.params.conversation - const {currentAccount} = useSession() const myDid = currentAccount?.did const {data: chat, isError: isError} = useChatQuery(chatId) - const otherProfile = React.useMemo(() => { return chat?.members?.find(m => m.did !== myDid) }, [chat?.members, myDid]) From 31938a5d35c9c7cb539ff2961c6ea8c1830e1db6 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Apr 2024 14:58:50 -0700 Subject: [PATCH 10/11] use `Button` instead in the header --- src/screens/Messages/Conversation/index.tsx | 32 ++++++++------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index af1d33bb63..c046494dd8 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -17,7 +17,10 @@ import {CenteredView} from 'view/com/util/Views' import {MessagesList} from '#/screens/Messages/Conversation/MessagesList' import {useChatQuery} from '#/screens/Messages/Temp/query/query' import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {DotGrid_Stroke2_Corner0_Rounded} from '#/components/icons/DotGrid' +import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' +import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider' import {ListMaybePlaceholder} from '#/components/Lists' import {Text} from '#/components/Typography' import {ClipClopGate} from '../gate' @@ -112,26 +115,15 @@ function Header({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) { - - - + ) From ef1c89d395ad6dbe3b93c8e79091b41549806a2d Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Apr 2024 15:01:23 -0700 Subject: [PATCH 11/11] lint --- src/screens/Messages/Conversation/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index c046494dd8..d069138570 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -17,10 +17,8 @@ import {CenteredView} from 'view/com/util/Views' import {MessagesList} from '#/screens/Messages/Conversation/MessagesList' import {useChatQuery} from '#/screens/Messages/Temp/query/query' import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Button, ButtonIcon} from '#/components/Button' import {DotGrid_Stroke2_Corner0_Rounded} from '#/components/icons/DotGrid' -import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' -import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider' import {ListMaybePlaceholder} from '#/components/Lists' import {Text} from '#/components/Typography' import {ClipClopGate} from '../gate'