nasso.dev
my fork of the bluesky client
[Clipclops] Improve message list behaviour (#3789)
* improve message list behaviour
* replace useAgent with useSession
* add explicit types to appease linter
samuel.fm
+4
-4
src/screens/Messages/Conversation/MessageItem.tsx
+4
-4
src/screens/Messages/Conversation/MessageItem.tsx
···
3
3
import {msg} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
5
5
6
-
import {useAgent} from '#/state/session'
6
+
import {useSession} from '#/state/session'
7
7
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
8
8
import {atoms as a, useTheme} from '#/alf'
9
9
import {Text} from '#/components/Typography'
···
17
17
next: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage | null
18
18
}) {
19
19
const t = useTheme()
20
-
const {getAgent} = useAgent()
20
+
const {currentAccount} = useSession()
21
21
22
-
const isFromSelf = item.sender?.did === getAgent().session?.did
22
+
const isFromSelf = item.sender?.did === currentAccount?.did
23
23
24
24
const isNextFromSelf =
25
25
TempDmChatDefs.isMessageView(next) &&
26
-
next.sender?.did === getAgent().session?.did
26
+
next.sender?.did === currentAccount?.did
27
27
28
28
const isLastInGroup = useMemo(() => {
29
29
// if the next message is from a different sender, then it's the last in the group
+34
-11
src/screens/Messages/List/index.tsx
+34
-11
src/screens/Messages/List/index.tsx
···
11
11
import {useGate} from '#/lib/statsig/statsig'
12
12
import {cleanError} from '#/lib/strings/errors'
13
13
import {logger} from '#/logger'
14
-
import {useAgent} from '#/state/session'
14
+
import {useSession} from '#/state/session'
15
15
import {List} from '#/view/com/util/List'
16
+
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
16
17
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
17
18
import {ViewHeader} from '#/view/com/util/ViewHeader'
18
19
import {useBreakpoints, useTheme} from '#/alf'
···
168
169
function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) {
169
170
const t = useTheme()
170
171
const {_} = useLingui()
171
-
const {getAgent} = useAgent()
172
+
const {currentAccount} = useSession()
172
173
173
174
let lastMessage = _(msg`No messages yet`)
175
+
let lastMessageSentAt: string | null = null
174
176
if (TempDmChatDefs.isMessageView(chat.lastMessage)) {
175
-
lastMessage = chat.lastMessage.text
177
+
if (chat.lastMessage.sender?.did === currentAccount?.did) {
178
+
lastMessage = _(msg`You: ${chat.lastMessage.text}`)
179
+
} else {
180
+
lastMessage = chat.lastMessage.text
181
+
}
182
+
lastMessageSentAt = chat.lastMessage.sentAt
183
+
}
184
+
if (TempDmChatDefs.isDeletedMessage(chat.lastMessage)) {
185
+
lastMessage = _(msg`Message deleted`)
176
186
}
177
187
178
188
const otherUser = chat.members.find(
179
-
member => member.did !== getAgent().session?.did,
189
+
member => member.did !== currentAccount?.did,
180
190
)
181
191
182
192
if (!otherUser) {
···
200
210
<PreviewableUserAvatar profile={otherUser} size={42} />
201
211
</View>
202
212
<View style={[a.flex_1]}>
203
-
<Text numberOfLines={1} style={a.leading_snug}>
213
+
<Text numberOfLines={1} style={[a.text_md, a.leading_normal]}>
204
214
<Text style={[t.atoms.text, chat.unreadCount > 0 && a.font_bold]}>
205
215
{otherUser.displayName || otherUser.handle}
206
216
</Text>{' '}
207
-
<Text style={t.atoms.text_contrast_medium}>
208
-
@{otherUser.handle}
209
-
</Text>
217
+
{lastMessageSentAt ? (
218
+
<TimeElapsed timestamp={lastMessageSentAt}>
219
+
{({timeElapsed}) => (
220
+
<Text style={t.atoms.text_contrast_medium}>
221
+
@{otherUser.handle} · {timeElapsed}
222
+
</Text>
223
+
)}
224
+
</TimeElapsed>
225
+
) : (
226
+
<Text style={t.atoms.text_contrast_medium}>
227
+
@{otherUser.handle}
228
+
</Text>
229
+
)}
210
230
</Text>
211
231
<Text
212
232
numberOfLines={2}
213
233
style={[
214
234
a.text_sm,
215
-
chat.unread ? a.font_bold : t.atoms.text_contrast_medium,
235
+
a.leading_snug,
236
+
chat.unreadCount > 0
237
+
? a.font_bold
238
+
: t.atoms.text_contrast_medium,
216
239
]}>
217
240
{lastMessage}
218
241
</Text>
···
221
244
<View
222
245
style={[
223
246
a.flex_0,
224
-
a.ml_2xl,
225
-
a.mt_xs,
247
+
a.ml_md,
248
+
a.mt_sm,
226
249
{backgroundColor: t.palette.primary_500},
227
250
a.rounded_full,
228
251
{height: 7, width: 7},
+7
-3
src/screens/Messages/Temp/query/query.ts
+7
-3
src/screens/Messages/Temp/query/query.ts
···
5
5
useQueryClient,
6
6
} from '@tanstack/react-query'
7
7
8
-
import {useAgent} from '#/state/session'
8
+
import {useSession} from '#/state/session'
9
9
import * as TempDmChatDefs from '#/temp/dm/defs'
10
10
import * as TempDmChatGetChat from '#/temp/dm/getChat'
11
11
import * as TempDmChatGetChatForMembers from '#/temp/dm/getChatForMembers'
···
20
20
*/
21
21
22
22
const useHeaders = () => {
23
-
const {getAgent} = useAgent()
23
+
const {currentAccount} = useSession()
24
24
return {
25
25
get Authorization() {
26
-
return getAgent().session!.did
26
+
return currentAccount!.did
27
27
},
28
28
}
29
29
}
···
195
195
196
196
const json =
197
197
(await response.json()) as TempDmChatGetChatLog.OutputSchema
198
+
199
+
if (json.logs.length > 0) {
200
+
queryClient.invalidateQueries({queryKey: ['chats']})
201
+
}
198
202
199
203
for (const log of json.logs) {
200
204
if (TempDmChatDefs.isLogCreateMessage(log)) {