[Clipclops] Improve message list behaviour (#3789)
* improve message list behaviour * replace useAgent with useSession * add explicit types to appease linterzio/stable
parent
b8d8bec388
commit
09f3b2ae14
|
@ -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
|
||||
|
|
|
@ -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} · {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},
|
||||
|
|
|
@ -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) => {
|
||||
|
|
Loading…
Reference in New Issue