[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 {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useAgent} from '#/state/session' import {useSession} from '#/state/session'
import {TimeElapsed} from '#/view/com/util/TimeElapsed' import {TimeElapsed} from '#/view/com/util/TimeElapsed'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
@ -17,13 +17,13 @@ export function MessageItem({
next: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage | null next: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage | null
}) { }) {
const t = useTheme() 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 = const isNextFromSelf =
TempDmChatDefs.isMessageView(next) && TempDmChatDefs.isMessageView(next) &&
next.sender?.did === getAgent().session?.did next.sender?.did === currentAccount?.did
const isLastInGroup = useMemo(() => { const isLastInGroup = useMemo(() => {
// if the next message is from a different sender, then it's the last in the group // 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 {useGate} from '#/lib/statsig/statsig'
import {cleanError} from '#/lib/strings/errors' import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger' import {logger} from '#/logger'
import {useAgent} from '#/state/session' import {useSession} from '#/state/session'
import {List} from '#/view/com/util/List' import {List} from '#/view/com/util/List'
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {ViewHeader} from '#/view/com/util/ViewHeader' import {ViewHeader} from '#/view/com/util/ViewHeader'
import {useBreakpoints, useTheme} from '#/alf' import {useBreakpoints, useTheme} from '#/alf'
@ -168,15 +169,24 @@ export function MessagesListScreen({navigation}: Props) {
function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) { function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) {
const t = useTheme() const t = useTheme()
const {_} = useLingui() const {_} = useLingui()
const {getAgent} = useAgent() const {currentAccount} = useSession()
let lastMessage = _(msg`No messages yet`) let lastMessage = _(msg`No messages yet`)
let lastMessageSentAt: string | null = null
if (TempDmChatDefs.isMessageView(chat.lastMessage)) { if (TempDmChatDefs.isMessageView(chat.lastMessage)) {
if (chat.lastMessage.sender?.did === currentAccount?.did) {
lastMessage = _(msg`You: ${chat.lastMessage.text}`)
} else {
lastMessage = chat.lastMessage.text lastMessage = chat.lastMessage.text
} }
lastMessageSentAt = chat.lastMessage.sentAt
}
if (TempDmChatDefs.isDeletedMessage(chat.lastMessage)) {
lastMessage = _(msg`Message deleted`)
}
const otherUser = chat.members.find( const otherUser = chat.members.find(
member => member.did !== getAgent().session?.did, member => member.did !== currentAccount?.did,
) )
if (!otherUser) { if (!otherUser) {
@ -200,19 +210,32 @@ function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) {
<PreviewableUserAvatar profile={otherUser} size={42} /> <PreviewableUserAvatar profile={otherUser} size={42} />
</View> </View>
<View style={[a.flex_1]}> <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]}> <Text style={[t.atoms.text, chat.unreadCount > 0 && a.font_bold]}>
{otherUser.displayName || otherUser.handle} {otherUser.displayName || otherUser.handle}
</Text>{' '} </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}> <Text style={t.atoms.text_contrast_medium}>
@{otherUser.handle} @{otherUser.handle}
</Text> </Text>
)}
</Text> </Text>
<Text <Text
numberOfLines={2} numberOfLines={2}
style={[ style={[
a.text_sm, 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} {lastMessage}
</Text> </Text>
@ -221,8 +244,8 @@ function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) {
<View <View
style={[ style={[
a.flex_0, a.flex_0,
a.ml_2xl, a.ml_md,
a.mt_xs, a.mt_sm,
{backgroundColor: t.palette.primary_500}, {backgroundColor: t.palette.primary_500},
a.rounded_full, a.rounded_full,
{height: 7, width: 7}, {height: 7, width: 7},

View File

@ -5,7 +5,7 @@ import {
useQueryClient, useQueryClient,
} from '@tanstack/react-query' } from '@tanstack/react-query'
import {useAgent} from '#/state/session' import {useSession} from '#/state/session'
import * as TempDmChatDefs from '#/temp/dm/defs' import * as TempDmChatDefs from '#/temp/dm/defs'
import * as TempDmChatGetChat from '#/temp/dm/getChat' import * as TempDmChatGetChat from '#/temp/dm/getChat'
import * as TempDmChatGetChatForMembers from '#/temp/dm/getChatForMembers' import * as TempDmChatGetChatForMembers from '#/temp/dm/getChatForMembers'
@ -20,10 +20,10 @@ import {useDmServiceUrlStorage} from '../useDmServiceUrlStorage'
*/ */
const useHeaders = () => { const useHeaders = () => {
const {getAgent} = useAgent() const {currentAccount} = useSession()
return { return {
get Authorization() { get Authorization() {
return getAgent().session!.did return currentAccount!.did
}, },
} }
} }
@ -196,6 +196,10 @@ export function useChatLogQuery() {
const json = const json =
(await response.json()) as TempDmChatGetChatLog.OutputSchema (await response.json()) as TempDmChatGetChatLog.OutputSchema
if (json.logs.length > 0) {
queryClient.invalidateQueries({queryKey: ['chats']})
}
for (const log of json.logs) { for (const log of json.logs) {
if (TempDmChatDefs.isLogCreateMessage(log)) { if (TempDmChatDefs.isLogCreateMessage(log)) {
queryClient.setQueryData(['chat', log.chatId], (prev: Chat) => { queryClient.setQueryData(['chat', log.chatId], (prev: Chat) => {