1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
import {useCallback, useMemo} from 'react'
import {ChatBskyConvoDefs, ChatBskyConvoListConvos} from '@atproto/api'
import {useInfiniteQuery, useQueryClient} from '@tanstack/react-query'
import {useCurrentConvoId} from '#/state/messages/current-convo-id'
import {DM_SERVICE_HEADERS} from '#/state/queries/messages/const'
import {useAgent} from '#/state/session'
export const RQKEY = ['convo-list']
type RQPageParam = string | undefined
export function useListConvos({refetchInterval}: {refetchInterval: number}) {
const {getAgent} = useAgent()
return useInfiniteQuery({
queryKey: RQKEY,
queryFn: async ({pageParam}) => {
const {data} = await getAgent().api.chat.bsky.convo.listConvos(
{cursor: pageParam},
{headers: DM_SERVICE_HEADERS},
)
return data
},
initialPageParam: undefined as RQPageParam,
getNextPageParam: lastPage => lastPage.cursor,
refetchInterval,
})
}
export function useUnreadMessageCount() {
const {currentConvoId} = useCurrentConvoId()
const convos = useListConvos({
refetchInterval: 30_000,
})
const count =
convos.data?.pages
.flatMap(page => page.convos)
.filter(convo => convo.id !== currentConvoId)
.reduce((acc, convo) => {
return acc + (!convo.muted && convo.unreadCount > 0 ? 1 : 0)
}, 0) ?? 0
return useMemo(() => {
return {
count,
numUnread: count > 0 ? (count > 30 ? '30+' : String(count)) : undefined,
}
}, [count])
}
type ConvoListQueryData = {
pageParams: Array<string | undefined>
pages: Array<ChatBskyConvoListConvos.OutputSchema>
}
export function useOnDeleteMessage() {
const queryClient = useQueryClient()
return useCallback(
(chatId: string, messageId: string) => {
queryClient.setQueryData(RQKEY, (old: ConvoListQueryData) => {
return optimisticUpdate(chatId, old, convo =>
messageId === convo.lastMessage?.id
? {
...convo,
lastMessage: {
$type: 'chat.bsky.convo.defs#deletedMessageView',
id: messageId,
rev: '',
},
}
: convo,
)
})
},
[queryClient],
)
}
export function useOnNewMessage() {
const queryClient = useQueryClient()
return useCallback(
(chatId: string, message: ChatBskyConvoDefs.MessageView) => {
queryClient.setQueryData(RQKEY, (old: ConvoListQueryData) => {
return optimisticUpdate(chatId, old, convo => ({
...convo,
lastMessage: message,
unreadCount: convo.unreadCount + 1,
}))
})
queryClient.invalidateQueries({queryKey: RQKEY})
},
[queryClient],
)
}
export function useOnCreateConvo() {
const queryClient = useQueryClient()
return useCallback(() => {
queryClient.invalidateQueries({queryKey: RQKEY})
}, [queryClient])
}
export function useOnMarkAsRead() {
const queryClient = useQueryClient()
return useCallback(
(chatId: string) => {
queryClient.setQueryData(RQKEY, (old: ConvoListQueryData) => {
return optimisticUpdate(chatId, old, convo => ({
...convo,
unreadCount: 0,
}))
})
},
[queryClient],
)
}
function optimisticUpdate(
chatId: string,
old: ConvoListQueryData,
updateFn: (convo: ChatBskyConvoDefs.ConvoView) => ChatBskyConvoDefs.ConvoView,
) {
if (!old) {
return old
}
return {
...old,
pages: old.pages.map(page => ({
...page,
convos: page.convos.map(convo =>
chatId === convo.id ? updateFn(convo) : convo,
),
})),
}
}
|
