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