diff options
Diffstat (limited to 'src/screens/Messages')
| -rw-r--r-- | src/screens/Messages/Conversation/MessageItem.tsx | 15 | ||||
| -rw-r--r-- | src/screens/Messages/Conversation/MessagesList.tsx | 180 | ||||
| -rw-r--r-- | src/screens/Messages/Conversation/index.tsx | 8 | ||||
| -rw-r--r-- | src/screens/Messages/List/index.tsx | 49 | ||||
| -rw-r--r-- | src/screens/Messages/Temp/query/query.ts | 305 |
5 files changed, 100 insertions, 457 deletions
diff --git a/src/screens/Messages/Conversation/MessageItem.tsx b/src/screens/Messages/Conversation/MessageItem.tsx index 85e1c5f32..ba10978e8 100644 --- a/src/screens/Messages/Conversation/MessageItem.tsx +++ b/src/screens/Messages/Conversation/MessageItem.tsx @@ -1,5 +1,6 @@ import React, {useCallback, useMemo} from 'react' import {StyleProp, TextStyle, View} from 'react-native' +import {ChatBskyConvoDefs} from '@atproto-labs/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -7,14 +8,16 @@ import {useSession} from '#/state/session' import {TimeElapsed} from '#/view/com/util/TimeElapsed' import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' -import * as TempDmChatDefs from '#/temp/dm/defs' export function MessageItem({ item, next, }: { - item: TempDmChatDefs.MessageView - next: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage | null + item: ChatBskyConvoDefs.MessageView + next: + | ChatBskyConvoDefs.MessageView + | ChatBskyConvoDefs.DeletedMessageView + | null }) { const t = useTheme() const {currentAccount} = useSession() @@ -22,7 +25,7 @@ export function MessageItem({ const isFromSelf = item.sender?.did === currentAccount?.did const isNextFromSelf = - TempDmChatDefs.isMessageView(next) && + ChatBskyConvoDefs.isMessageView(next) && next.sender?.did === currentAccount?.did const isLastInGroup = useMemo(() => { @@ -32,7 +35,7 @@ export function MessageItem({ } // or, if there's a 10 minute gap between this message and the next - if (TempDmChatDefs.isMessageView(next)) { + if (ChatBskyConvoDefs.isMessageView(next)) { const thisDate = new Date(item.sentAt) const nextDate = new Date(next.sentAt) @@ -88,7 +91,7 @@ function Metadata({ isLastInGroup, style, }: { - message: TempDmChatDefs.MessageView + message: ChatBskyConvoDefs.MessageView isLastInGroup: boolean style: StyleProp<TextStyle> }) { diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx index 25aaf28c4..ca32a6d68 100644 --- a/src/screens/Messages/Conversation/MessagesList.tsx +++ b/src/screens/Messages/Conversation/MessagesList.tsx @@ -1,24 +1,15 @@ -import React, {useCallback, useMemo, useRef, useState} from 'react' +import React, {useCallback, useMemo, useRef} from 'react' import {FlatList, View, ViewToken} from 'react-native' -import {Alert} from 'react-native' import {KeyboardAvoidingView} from 'react-native-keyboard-controller' -import {isWeb} from '#/platform/detection' +import {useChat} from '#/state/messages' +import {ChatProvider} from '#/state/messages' +import {ConvoItem, ConvoStatus} from '#/state/messages/convo' +import {isWeb} from 'platform/detection' import {MessageInput} from '#/screens/Messages/Conversation/MessageInput' import {MessageItem} from '#/screens/Messages/Conversation/MessageItem' -import { - useChat, - useChatLogQuery, - useSendMessageMutation, -} from '#/screens/Messages/Temp/query/query' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' -import * as TempDmChatDefs from '#/temp/dm/defs' - -type MessageWithNext = { - message: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage - next: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage | null -} function MaybeLoader({isLoading}: {isLoading: boolean}) { return ( @@ -34,47 +25,43 @@ function MaybeLoader({isLoading}: {isLoading: boolean}) { ) } -function renderItem({item}: {item: MessageWithNext}) { - if (TempDmChatDefs.isMessageView(item.message)) - return <MessageItem item={item.message} next={item.next} /> - - if (TempDmChatDefs.isDeletedMessage(item)) return <Text>Deleted message</Text> +function renderItem({item}: {item: ConvoItem}) { + if (item.type === 'message') { + return <MessageItem item={item.message} next={item.nextMessage} /> + } else if (item.type === 'deleted-message') { + return <Text>Deleted message</Text> + } else if (item.type === 'pending-message') { + return <Text>{item.message.text}</Text> + } return null } -// TODO rm -// TEMP: This is a temporary function to generate unique keys for mutation placeholders -const generateUniqueKey = () => `_${Math.random().toString(36).substr(2, 9)}` - function onScrollToEndFailed() { // Placeholder function. You have to give FlatList something or else it will error. } -export function MessagesList({chatId}: {chatId: string}) { - const flatListRef = useRef<FlatList>(null) - - // Whenever we reach the end (visually the top), we don't want to keep calling it. We will set `isFetching` to true - // once the request for new posts starts. Then, we will change it back to false after the content size changes. - const isFetching = useRef(false) +export function MessagesList({convoId}: {convoId: string}) { + return ( + <ChatProvider convoId={convoId}> + <MessagesListInner /> + </ChatProvider> + ) +} +export function MessagesListInner() { + const chat = useChat() + const flatListRef = useRef<FlatList>(null) // We use this to know if we should scroll after a new clop is added to the list const isAtBottom = useRef(false) // Because the viewableItemsChanged callback won't have access to the updated state, we use a ref to store the // total number of clops // TODO this needs to be set to whatever the initial number of messages is - const totalMessages = useRef(10) + // const totalMessages = useRef(10) // TODO later - const [_, setShowSpinner] = useState(false) - - // Query Data - const {data: chat} = useChat(chatId) - const {mutate: sendMessage} = useSendMessageMutation(chatId) - useChatLogQuery() - const [onViewableItemsChanged, viewabilityConfig] = useMemo(() => { return [ (info: {viewableItems: Array<ViewToken>; changed: Array<ViewToken>}) => { @@ -93,23 +80,11 @@ export function MessagesList({chatId}: {chatId: string}) { if (isAtBottom.current) { flatListRef.current?.scrollToOffset({offset: 0, animated: true}) } - - isFetching.current = false - setShowSpinner(false) }, []) const onEndReached = useCallback(() => { - if (isFetching.current) return - isFetching.current = true - setShowSpinner(true) - - // Eventually we will add more here when we hit the top through RQuery - // We wouldn't actually use a timeout, but there would be a delay while loading - setTimeout(() => { - // Do something - setShowSpinner(false) - }, 1000) - }, []) + chat.service.fetchMessageHistory() + }, [chat]) const onInputFocus = useCallback(() => { if (!isAtBottom.current) { @@ -117,84 +92,51 @@ export function MessagesList({chatId}: {chatId: string}) { } }, []) - const onSendMessage = useCallback( - async (message: string) => { - if (!message) return - - try { - sendMessage({ - message, - tempId: generateUniqueKey(), - }) - } catch (e: any) { - Alert.alert(e.toString()) - } - }, - [sendMessage], - ) - const onInputBlur = useCallback(() => {}, []) - const messages = useMemo(() => { - if (!chat) return [] - - const filtered = chat.messages - .filter( - ( - message, - ): message is - | TempDmChatDefs.MessageView - | TempDmChatDefs.DeletedMessage => { - return ( - TempDmChatDefs.isMessageView(message) || - TempDmChatDefs.isDeletedMessage(message) - ) - }, - ) - .reduce((acc, message) => { - // convert [n1, n2, n3, ...] to [{message: n1, next: n2}, {message: n2, next: n3}, {message: n3, next: n4}, ...] - - return [...acc, {message, next: acc.at(-1)?.message ?? null}] - }, [] as MessageWithNext[]) - totalMessages.current = filtered.length - - return filtered - }, [chat]) - return ( <KeyboardAvoidingView style={{flex: 1, marginBottom: isWeb ? 20 : 85}} behavior="padding" keyboardVerticalOffset={70} contentContainerStyle={{flex: 1}}> - <FlatList - data={messages} - keyExtractor={item => item.message.id} - renderItem={renderItem} - contentContainerStyle={{paddingHorizontal: 10}} - inverted={true} - // In the future, we might want to adjust this value. Not very concerning right now as long as we are only - // dealing with text. But whenever we have images or other media and things are taller, we will want to lower - // this...probably. - initialNumToRender={20} - // Same with the max to render per batch. Let's be safe for now though. - maxToRenderPerBatch={25} - removeClippedSubviews={true} - onEndReached={onEndReached} - onScrollToIndexFailed={onScrollToEndFailed} - onContentSizeChange={onContentSizeChange} - onViewableItemsChanged={onViewableItemsChanged} - viewabilityConfig={viewabilityConfig} - maintainVisibleContentPosition={{ - minIndexForVisible: 1, - }} - ListFooterComponent={<MaybeLoader isLoading={false} />} - ref={flatListRef} - keyboardDismissMode="none" - /> + {chat.state.status === ConvoStatus.Ready && ( + <FlatList + data={chat.state.items} + keyExtractor={item => item.key} + renderItem={renderItem} + contentContainerStyle={{paddingHorizontal: 10}} + // In the future, we might want to adjust this value. Not very concerning right now as long as we are only + // dealing with text. But whenever we have images or other media and things are taller, we will want to lower + // this...probably. + initialNumToRender={20} + // Same with the max to render per batch. Let's be safe for now though. + maxToRenderPerBatch={25} + inverted={true} + onEndReached={onEndReached} + onScrollToIndexFailed={onScrollToEndFailed} + onContentSizeChange={onContentSizeChange} + onViewableItemsChanged={onViewableItemsChanged} + viewabilityConfig={viewabilityConfig} + maintainVisibleContentPosition={{ + minIndexForVisible: 0, + }} + ListFooterComponent={ + <MaybeLoader isLoading={chat.state.isFetchingHistory} /> + } + removeClippedSubviews={true} + ref={flatListRef} + keyboardDismissMode="none" + /> + )} + <View style={{paddingHorizontal: 10}}> <MessageInput - onSendMessage={onSendMessage} + onSendMessage={text => { + chat.service.sendMessage({ + text, + }) + }} onFocus={onInputFocus} onBlur={onInputBlur} /> diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index d06913857..9c5fd7912 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -9,13 +9,13 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack' import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' import {useGate} from '#/lib/statsig/statsig' +import {useConvoQuery} from '#/state/queries/messages/conversation' import {BACK_HITSLOP} from 'lib/constants' import {isWeb} from 'platform/detection' import {useSession} from 'state/session' import {UserAvatar} from 'view/com/util/UserAvatar' 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' @@ -29,11 +29,11 @@ type Props = NativeStackScreenProps< > export function MessagesConversationScreen({route}: Props) { const gate = useGate() - const chatId = route.params.conversation + const convoId = route.params.conversation const {currentAccount} = useSession() const myDid = currentAccount?.did - const {data: chat, isError: isError} = useChatQuery(chatId) + const {data: chat, isError: isError} = useConvoQuery(convoId) const otherProfile = React.useMemo(() => { return chat?.members?.find(m => m.did !== myDid) }, [chat?.members, myDid]) @@ -51,7 +51,7 @@ export function MessagesConversationScreen({route}: Props) { return ( <CenteredView style={{flex: 1}} sideBorders> <Header profile={otherProfile} /> - <MessagesList chatId={chatId} /> + <MessagesList convoId={convoId} /> </CenteredView> ) } diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/List/index.tsx index ccf0d2044..65a2ff1e7 100644 --- a/src/screens/Messages/List/index.tsx +++ b/src/screens/Messages/List/index.tsx @@ -2,6 +2,7 @@ import React, {useCallback, useMemo, useState} from 'react' import {View} from 'react-native' +import {ChatBskyConvoDefs} from '@atproto-labs/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {NativeStackScreenProps} from '@react-navigation/native-stack' @@ -11,24 +12,22 @@ import {MessagesTabNavigatorParams} from '#/lib/routes/types' import {useGate} from '#/lib/statsig/statsig' import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' +import {useListConvos} from '#/state/queries/messages/list-converations' import {useSession} from '#/state/session' import {List} from '#/view/com/util/List' import {TimeElapsed} from '#/view/com/util/TimeElapsed' import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {useBreakpoints, useTheme} from '#/alf' -import {atoms as a} from '#/alf' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {DialogControlProps, useDialogControl} from '#/components/Dialog' +import {NewChat} from '#/components/dms/NewChat' import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider' import {Link} from '#/components/Link' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' import {Text} from '#/components/Typography' -import * as TempDmChatDefs from '#/temp/dm/defs' -import {NewChat} from '../../../components/dms/NewChat' import {ClipClopGate} from '../gate' -import {useListChats} from '../Temp/query/query' type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'MessagesList'> export function MessagesListScreen({navigation}: Props) { @@ -59,13 +58,13 @@ export function MessagesListScreen({navigation}: Props) { fetchNextPage, error, refetch, - } = useListChats() + } = useListConvos() const isError = !!error const conversations = useMemo(() => { if (data?.pages) { - return data.pages.flatMap(page => page.chats) + return data.pages.flatMap(page => page.convos) } return [] }, [data]) @@ -99,9 +98,12 @@ export function MessagesListScreen({navigation}: Props) { navigation.navigate('MessagesSettings') }, [navigation]) - const renderItem = useCallback(({item}: {item: TempDmChatDefs.ChatView}) => { - return <ChatListItem key={item.id} chat={item} /> - }, []) + const renderItem = useCallback( + ({item}: {item: ChatBskyConvoDefs.ConvoView}) => { + return <ChatListItem key={item.id} convo={item} /> + }, + [], + ) const gate = useGate() if (!gate('dms')) return <ClipClopGate /> @@ -119,7 +121,7 @@ export function MessagesListScreen({navigation}: Props) { errorMessage={cleanError(error)} onRetry={isError ? refetch : undefined} /> - <NewChat onNewChat={onNewChat} control={newChatControl} /> + {!isError && <NewChat onNewChat={onNewChat} control={newChatControl} />} </> ) } @@ -166,26 +168,26 @@ export function MessagesListScreen({navigation}: Props) { ) } -function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) { +function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) { const t = useTheme() const {_} = useLingui() const {currentAccount} = useSession() let lastMessage = _(msg`No messages yet`) let lastMessageSentAt: string | null = null - if (TempDmChatDefs.isMessageView(chat.lastMessage)) { - if (chat.lastMessage.sender?.did === currentAccount?.did) { - lastMessage = _(msg`You: ${chat.lastMessage.text}`) + if (ChatBskyConvoDefs.isMessageView(convo.lastMessage)) { + if (convo.lastMessage.sender?.did === currentAccount?.did) { + lastMessage = _(msg`You: ${convo.lastMessage.text}`) } else { - lastMessage = chat.lastMessage.text + lastMessage = convo.lastMessage.text } - lastMessageSentAt = chat.lastMessage.sentAt + lastMessageSentAt = convo.lastMessage.sentAt } - if (TempDmChatDefs.isDeletedMessage(chat.lastMessage)) { + if (ChatBskyConvoDefs.isDeletedMessageView(convo.lastMessage)) { lastMessage = _(msg`Message deleted`) } - const otherUser = chat.members.find( + const otherUser = convo.members.find( member => member.did !== currentAccount?.did, ) @@ -194,7 +196,7 @@ function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) { } return ( - <Link to={`/messages/${chat.id}`} style={a.flex_1}> + <Link to={`/messages/${convo.id}`} style={a.flex_1}> {({hovered, pressed}) => ( <View style={[ @@ -211,7 +213,8 @@ function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) { </View> <View style={[a.flex_1]}> <Text numberOfLines={1} style={[a.text_md, a.leading_normal]}> - <Text style={[t.atoms.text, chat.unreadCount > 0 && a.font_bold]}> + <Text + style={[t.atoms.text, convo.unreadCount > 0 && a.font_bold]}> {otherUser.displayName || otherUser.handle} </Text>{' '} {lastMessageSentAt ? ( @@ -233,14 +236,14 @@ function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) { style={[ a.text_sm, a.leading_snug, - chat.unreadCount > 0 + convo.unreadCount > 0 ? a.font_bold : t.atoms.text_contrast_medium, ]}> {lastMessage} </Text> </View> - {chat.unreadCount > 0 && ( + {convo.unreadCount > 0 && ( <View style={[ a.flex_0, diff --git a/src/screens/Messages/Temp/query/query.ts b/src/screens/Messages/Temp/query/query.ts deleted file mode 100644 index 02f31c029..000000000 --- a/src/screens/Messages/Temp/query/query.ts +++ /dev/null @@ -1,305 +0,0 @@ -import { - useInfiniteQuery, - useMutation, - useQuery, - useQueryClient, -} from '@tanstack/react-query' - -import {useSession} from '#/state/session' -import * as TempDmChatDefs from '#/temp/dm/defs' -import * as TempDmChatGetChat from '#/temp/dm/getChat' -import * as TempDmChatGetChatForMembers from '#/temp/dm/getChatForMembers' -import * as TempDmChatGetChatLog from '#/temp/dm/getChatLog' -import * as TempDmChatGetChatMessages from '#/temp/dm/getChatMessages' -import * as TempDmChatListChats from '#/temp/dm/listChats' -import {useDmServiceUrlStorage} from '../useDmServiceUrlStorage' - -/** - * TEMPORARY, PLEASE DO NOT JUDGE ME REACT QUERY OVERLORDS 🙏 - * (and do not try this at home) - */ - -const useHeaders = () => { - const {currentAccount} = useSession() - return { - get Authorization() { - return currentAccount!.did - }, - } -} - -type Chat = { - chatId: string - messages: TempDmChatGetChatMessages.OutputSchema['messages'] - lastCursor?: string - lastRev?: string -} - -export function useChat(chatId: string) { - const queryClient = useQueryClient() - const headers = useHeaders() - const {serviceUrl} = useDmServiceUrlStorage() - - return useQuery({ - queryKey: ['chat', chatId], - queryFn: async () => { - const currentChat = queryClient.getQueryData(['chat', chatId]) - - if (currentChat) { - return currentChat as Chat - } - - const messagesResponse = await fetch( - `${serviceUrl}/xrpc/temp.dm.getChatMessages?chatId=${chatId}`, - { - headers, - }, - ) - - if (!messagesResponse.ok) throw new Error('Failed to fetch messages') - - const messagesJson = - (await messagesResponse.json()) as TempDmChatGetChatMessages.OutputSchema - - const chatResponse = await fetch( - `${serviceUrl}/xrpc/temp.dm.getChat?chatId=${chatId}`, - { - headers, - }, - ) - - if (!chatResponse.ok) throw new Error('Failed to fetch chat') - - const chatJson = - (await chatResponse.json()) as TempDmChatGetChat.OutputSchema - - queryClient.setQueryData(['chatQuery', chatId], chatJson.chat) - - const newChat = { - chatId, - messages: messagesJson.messages, - lastCursor: messagesJson.cursor, - lastRev: chatJson.chat.rev, - } satisfies Chat - - queryClient.setQueryData(['chat', chatId], newChat) - - return newChat - }, - }) -} - -interface SendMessageMutationVariables { - message: string - tempId: string -} - -export function createTempId() { - return Math.random().toString(36).substring(7).toString() -} - -export function useSendMessageMutation(chatId: string) { - const queryClient = useQueryClient() - const headers = useHeaders() - const {serviceUrl} = useDmServiceUrlStorage() - - return useMutation< - TempDmChatDefs.Message, - Error, - SendMessageMutationVariables, - unknown - >({ - // eslint-disable-next-line @typescript-eslint/no-unused-vars - mutationFn: async ({message, tempId}) => { - const response = await fetch( - `${serviceUrl}/xrpc/temp.dm.sendMessage?chatId=${chatId}`, - { - method: 'POST', - headers: { - ...headers, - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - chatId, - message: { - text: message, - }, - }), - }, - ) - - if (!response.ok) throw new Error('Failed to send message') - - return response.json() - }, - onMutate: async variables => { - queryClient.setQueryData(['chat', chatId], (prev: Chat) => { - return { - ...prev, - messages: [ - { - $type: 'temp.dm.defs#messageView', - id: variables.tempId, - text: variables.message, - sender: {did: headers.Authorization}, // TODO a real DID get - sentAt: new Date().toISOString(), - }, - ...prev.messages, - ], - } - }) - }, - onSuccess: (result, variables) => { - queryClient.setQueryData(['chat', chatId], (prev: Chat) => { - return { - ...prev, - messages: prev.messages.map(m => - m.id === variables.tempId ? {...m, id: result.id} : m, - ), - } - }) - }, - onError: (_, variables) => { - console.log(_) - queryClient.setQueryData(['chat', chatId], (prev: Chat) => ({ - ...prev, - messages: prev.messages.filter(m => m.id !== variables.tempId), - })) - }, - }) -} - -export function useChatLogQuery() { - const queryClient = useQueryClient() - const headers = useHeaders() - const {serviceUrl} = useDmServiceUrlStorage() - - return useQuery({ - queryKey: ['chatLog'], - queryFn: async () => { - const prevLog = queryClient.getQueryData([ - 'chatLog', - ]) as TempDmChatGetChatLog.OutputSchema - - try { - const response = await fetch( - `${serviceUrl}/xrpc/temp.dm.getChatLog?cursor=${ - prevLog?.cursor ?? '' - }`, - { - headers, - }, - ) - - if (!response.ok) throw new Error('Failed to fetch chat log') - - const json = - (await response.json()) as TempDmChatGetChatLog.OutputSchema - - if (json.logs.length > 0) { - queryClient.invalidateQueries({queryKey: ['chats']}) - } - - for (const log of json.logs) { - if (TempDmChatDefs.isLogCreateMessage(log)) { - queryClient.setQueryData(['chat', log.chatId], (prev: Chat) => { - // TODO hack filter out duplicates - if (prev?.messages.find(m => m.id === log.message.id)) return - - return { - ...prev, - messages: [log.message, ...prev.messages], - } - }) - } - } - - return json - } catch (e) { - console.log(e) - } - }, - refetchInterval: 5000, - }) -} - -export function useGetChatFromMembers({ - onSuccess, - onError, -}: { - onSuccess?: (data: TempDmChatGetChatForMembers.OutputSchema) => void - onError?: (error: Error) => void -}) { - const queryClient = useQueryClient() - const headers = useHeaders() - const {serviceUrl} = useDmServiceUrlStorage() - - return useMutation({ - mutationFn: async (members: string[]) => { - const response = await fetch( - `${serviceUrl}/xrpc/temp.dm.getChatForMembers?members=${members.join( - ',', - )}`, - {headers}, - ) - - if (!response.ok) throw new Error('Failed to fetch chat') - - return (await response.json()) as TempDmChatGetChatForMembers.OutputSchema - }, - onSuccess: data => { - queryClient.setQueryData(['chat', data.chat.id], { - chatId: data.chat.id, - messages: [], - lastRev: data.chat.rev, - }) - onSuccess?.(data) - }, - onError, - }) -} - -export function useListChats() { - const headers = useHeaders() - const {serviceUrl} = useDmServiceUrlStorage() - - return useInfiniteQuery({ - queryKey: ['chats'], - queryFn: async ({pageParam}) => { - const response = await fetch( - `${serviceUrl}/xrpc/temp.dm.listChats${ - pageParam ? `?cursor=${pageParam}` : '' - }`, - {headers}, - ) - - if (!response.ok) throw new Error('Failed to fetch chats') - - return (await response.json()) as TempDmChatListChats.OutputSchema - }, - initialPageParam: undefined as string | undefined, - 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 json = (await chatResponse.json()) as TempDmChatGetChat.OutputSchema - return json.chat - }, - }) -} |