[Clipclops] Improve message list behaviour (#3789)

* improve message list behaviour

* replace useAgent with useSession

* add explicit types to appease linter
zio/stable
Samuel Newman 2024-05-01 15:16:54 +01:00 committed by GitHub
parent b8d8bec388
commit 09f3b2ae14
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 45 additions and 18 deletions

View File

@ -3,7 +3,7 @@ import {StyleProp, TextStyle, View} from 'react-native'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useAgent} from '#/state/session'
import {useSession} from '#/state/session'
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/components/Typography'
@ -17,13 +17,13 @@ export function MessageItem({
next: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage | null
}) {
const t = useTheme()
const {getAgent} = useAgent()
const {currentAccount} = useSession()
const isFromSelf = item.sender?.did === getAgent().session?.did
const isFromSelf = item.sender?.did === currentAccount?.did
const isNextFromSelf =
TempDmChatDefs.isMessageView(next) &&
next.sender?.did === getAgent().session?.did
next.sender?.did === currentAccount?.did
const isLastInGroup = useMemo(() => {
// if the next message is from a different sender, then it's the last in the group

View File

@ -11,8 +11,9 @@ import {MessagesTabNavigatorParams} from '#/lib/routes/types'
import {useGate} from '#/lib/statsig/statsig'
import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {useAgent} from '#/state/session'
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'
@ -168,15 +169,24 @@ export function MessagesListScreen({navigation}: Props) {
function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) {
const t = useTheme()
const {_} = useLingui()
const {getAgent} = useAgent()
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}`)
} else {
lastMessage = chat.lastMessage.text
}
lastMessageSentAt = chat.lastMessage.sentAt
}
if (TempDmChatDefs.isDeletedMessage(chat.lastMessage)) {
lastMessage = _(msg`Message deleted`)
}
const otherUser = chat.members.find(
member => member.did !== getAgent().session?.did,
member => member.did !== currentAccount?.did,
)
if (!otherUser) {
@ -200,19 +210,32 @@ function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) {
<PreviewableUserAvatar profile={otherUser} size={42} />
</View>
<View style={[a.flex_1]}>
<Text numberOfLines={1} style={a.leading_snug}>
<Text numberOfLines={1} style={[a.text_md, a.leading_normal]}>
<Text style={[t.atoms.text, chat.unreadCount > 0 && a.font_bold]}>
{otherUser.displayName || otherUser.handle}
</Text>{' '}
{lastMessageSentAt ? (
<TimeElapsed timestamp={lastMessageSentAt}>
{({timeElapsed}) => (
<Text style={t.atoms.text_contrast_medium}>
@{otherUser.handle} &middot; {timeElapsed}
</Text>
)}
</TimeElapsed>
) : (
<Text style={t.atoms.text_contrast_medium}>
@{otherUser.handle}
</Text>
)}
</Text>
<Text
numberOfLines={2}
style={[
a.text_sm,
chat.unread ? a.font_bold : t.atoms.text_contrast_medium,
a.leading_snug,
chat.unreadCount > 0
? a.font_bold
: t.atoms.text_contrast_medium,
]}>
{lastMessage}
</Text>
@ -221,8 +244,8 @@ function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) {
<View
style={[
a.flex_0,
a.ml_2xl,
a.mt_xs,
a.ml_md,
a.mt_sm,
{backgroundColor: t.palette.primary_500},
a.rounded_full,
{height: 7, width: 7},

View File

@ -5,7 +5,7 @@ import {
useQueryClient,
} from '@tanstack/react-query'
import {useAgent} from '#/state/session'
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'
@ -20,10 +20,10 @@ import {useDmServiceUrlStorage} from '../useDmServiceUrlStorage'
*/
const useHeaders = () => {
const {getAgent} = useAgent()
const {currentAccount} = useSession()
return {
get Authorization() {
return getAgent().session!.did
return currentAccount!.did
},
}
}
@ -196,6 +196,10 @@ export function useChatLogQuery() {
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) => {