[🐴] Better retry styling (#4032)

* Pass whole object to MessageItem for clarity

* Add retry to pending-message

* Style send failure, retry

* Group pending messages

* Remove todos

* Fix types with fake message
zio/stable
Eric Bailey 2024-05-15 11:45:18 -05:00 committed by GitHub
parent ed8922281a
commit 04aea93192
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 121 additions and 87 deletions

View File

@ -1,40 +1,44 @@
import React, {useCallback, useMemo, useRef} from 'react'
import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native'
import {
GestureResponderEvent,
LayoutAnimation,
StyleProp,
TextStyle,
View,
} from 'react-native'
import {ChatBskyConvoDefs, RichText as RichTextAPI} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {ConvoItem} from '#/state/messages/convo/types'
import {useSession} from '#/state/session'
import {TimeElapsed} from 'view/com/util/TimeElapsed'
import {atoms as a, useTheme} from '#/alf'
import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
import {InlineLinkText} from '#/components/Link'
import {Text} from '#/components/Typography'
import {RichText} from '../RichText'
let MessageItem = ({
item,
next,
pending,
}: {
item: ChatBskyConvoDefs.MessageView
next:
| ChatBskyConvoDefs.MessageView
| ChatBskyConvoDefs.DeletedMessageView
| null
pending?: boolean
item: ConvoItem & {type: 'message' | 'pending-message'}
}): React.ReactNode => {
const t = useTheme()
const {currentAccount} = useSession()
const isFromSelf = item.sender?.did === currentAccount?.did
const {message, nextMessage} = item
const isPending = item.type === 'pending-message'
const isFromSelf = message.sender?.did === currentAccount?.did
const isNextFromSelf =
ChatBskyConvoDefs.isMessageView(next) &&
next.sender?.did === currentAccount?.did
ChatBskyConvoDefs.isMessageView(nextMessage) &&
nextMessage.sender?.did === currentAccount?.did
const isLastInGroup = useMemo(() => {
// TODO this means it's a placeholder. Let's figure out the right way to do this though!
if (item.id.length > 13) {
// if this message is pending, it means the next message is pending too
if (isPending && nextMessage) {
return false
}
@ -44,9 +48,9 @@ let MessageItem = ({
}
// or, if there's a 3 minute gap between this message and the next
if (ChatBskyConvoDefs.isMessageView(next)) {
const thisDate = new Date(item.sentAt)
const nextDate = new Date(next.sentAt)
if (ChatBskyConvoDefs.isMessageView(nextMessage)) {
const thisDate = new Date(message.sentAt)
const nextDate = new Date(nextMessage.sentAt)
const diff = nextDate.getTime() - thisDate.getTime()
@ -55,7 +59,7 @@ let MessageItem = ({
}
return true
}, [item, next, isFromSelf, isNextFromSelf])
}, [message, nextMessage, isFromSelf, isNextFromSelf, isPending])
const lastInGroupRef = useRef(isLastInGroup)
if (lastInGroupRef.current !== isLastInGroup) {
@ -67,12 +71,12 @@ let MessageItem = ({
t.name === 'light' ? t.palette.primary_200 : t.palette.primary_800
const rt = useMemo(() => {
return new RichTextAPI({text: item.text, facets: item.facets})
}, [item.text, item.facets])
return new RichTextAPI({text: message.text, facets: message.facets})
}, [message.text, message.facets])
return (
<View>
<ActionsWrapper isFromSelf={isFromSelf} message={item}>
<ActionsWrapper isFromSelf={isFromSelf} message={message}>
<View
style={[
a.py_sm,
@ -82,7 +86,7 @@ let MessageItem = ({
paddingLeft: 14,
paddingRight: 14,
backgroundColor: isFromSelf
? pending
? isPending
? pendingColor
: t.palette.primary_500
: t.palette.contrast_50,
@ -98,18 +102,20 @@ let MessageItem = ({
a.text_md,
a.leading_snug,
isFromSelf && {color: t.palette.white},
pending && t.name !== 'light' && {color: t.palette.primary_300},
isPending && t.name !== 'light' && {color: t.palette.primary_300},
]}
interactiveStyle={a.underline}
enableTags
/>
</View>
</ActionsWrapper>
<MessageItemMetadata
message={item}
isLastInGroup={isLastInGroup}
style={isFromSelf ? a.text_right : a.text_left}
/>
{isLastInGroup && (
<MessageItemMetadata
item={item}
style={isFromSelf ? a.text_right : a.text_left}
/>
)}
</View>
)
}
@ -117,16 +123,26 @@ MessageItem = React.memo(MessageItem)
export {MessageItem}
let MessageItemMetadata = ({
message,
isLastInGroup,
item,
style,
}: {
message: ChatBskyConvoDefs.MessageView
isLastInGroup: boolean
item: ConvoItem & {type: 'message' | 'pending-message'}
style: StyleProp<TextStyle>
}): React.ReactNode => {
const t = useTheme()
const {_} = useLingui()
const {message} = item
const handleRetry = useCallback(
(e: GestureResponderEvent) => {
if (item.type === 'pending-message' && item.retry) {
e.preventDefault()
item.retry()
return false
}
},
[item],
)
const relativeTimestamp = useCallback(
(timestamp: string) => {
@ -169,25 +185,47 @@ let MessageItemMetadata = ({
[_],
)
if (!isLastInGroup) {
return null
}
return (
<TimeElapsed timestamp={message.sentAt} timeToString={relativeTimestamp}>
{({timeElapsed}) => (
<Text
style={[
t.atoms.text_contrast_medium,
a.text_xs,
a.mt_2xs,
a.mb_lg,
style,
]}>
{timeElapsed}
</Text>
<Text
style={[
a.text_xs,
a.mt_2xs,
a.mb_lg,
t.atoms.text_contrast_medium,
style,
]}>
<TimeElapsed timestamp={message.sentAt} timeToString={relativeTimestamp}>
{({timeElapsed}) => (
<Text style={[a.text_xs, t.atoms.text_contrast_medium]}>
{timeElapsed}
</Text>
)}
</TimeElapsed>
{item.type === 'pending-message' && item.retry && (
<>
{' '}
&middot;{' '}
<Text
style={[
a.text_xs,
{
color: t.palette.negative_400,
},
]}>
{_(msg`Failed to send`)}
</Text>{' '}
&middot;{' '}
<InlineLinkText
label={_(msg`Click to retry failed message`)}
to="#"
onPress={handleRetry}
style={[a.text_xs]}>
{_(msg`Retry`)}
</InlineLinkText>
</>
)}
</TimeElapsed>
</Text>
)
}

View File

@ -245,8 +245,12 @@ function PreviewMessage({message}: {message: ChatBskyConvoDefs.MessageView}) {
/>
</View>
<MessageItemMetadata
message={message}
isLastInGroup
item={{
type: 'message',
message,
key: '',
nextMessage: null,
}}
style={[a.text_left, a.mb_0]}
/>
</View>

View File

@ -26,7 +26,6 @@ export function MessageListError({
msg`This chat was disconnected due to a network error.`,
),
[ConvoItemError.HistoryFailed]: _(msg`Failed to load past messages.`),
[ConvoItemError.PendingFailed]: _(msg`Failed to send message(s).`),
}[item.code]
}, [_, item.code])

View File

@ -35,13 +35,7 @@ function MaybeLoader({isLoading}: {isLoading: boolean}) {
function renderItem({item}: {item: ConvoItem}) {
if (item.type === 'message' || item.type === 'pending-message') {
return (
<MessageItem
item={item.message}
next={item.nextMessage}
pending={item.type === 'pending-message'}
/>
)
return <MessageItem item={item} />
} else if (item.type === 'deleted-message') {
return <Text>Deleted message</Text>
} else if (item.type === 'error-recoverable') {

View File

@ -735,6 +735,8 @@ export class Convo {
}
}
private pendingFailed = false
async sendMessage(message: ChatBskyConvoSendMessage.InputSchema['message']) {
// Ignore empty messages for now since they have no other purpose atm
if (!message.text.trim()) return
@ -747,11 +749,9 @@ export class Convo {
id: tempId,
message,
})
// remove on each send, it might go through now without user having to click
this.footerItems.delete(ConvoItemError.PendingFailed)
this.commit()
if (!this.isProcessingPendingMessages) {
if (!this.isProcessingPendingMessages && !this.pendingFailed) {
this.processPendingMessages()
}
}
@ -805,16 +805,7 @@ export class Convo {
this.commit()
} catch (e: any) {
logger.error(e, {context: `Convo: failed to send message`})
this.footerItems.set(ConvoItemError.PendingFailed, {
type: 'error-recoverable',
key: ConvoItemError.PendingFailed,
code: ConvoItemError.PendingFailed,
retry: () => {
this.footerItems.delete(ConvoItemError.PendingFailed)
this.commit()
this.batchRetryPendingMessages()
},
})
this.pendingFailed = true
this.commit()
} finally {
this.isProcessingPendingMessages = false
@ -868,16 +859,7 @@ export class Convo {
)
} catch (e: any) {
logger.error(e, {context: `Convo: failed to batch retry messages`})
this.footerItems.set(ConvoItemError.PendingFailed, {
type: 'error-recoverable',
key: ConvoItemError.PendingFailed,
code: ConvoItemError.PendingFailed,
retry: () => {
this.footerItems.delete(ConvoItemError.PendingFailed)
this.commit()
this.batchRetryPendingMessages()
},
})
this.pendingFailed = true
this.commit()
}
}
@ -958,6 +940,7 @@ export class Convo {
key: m.id,
message: {
...m.message,
$type: 'chat.bsky.convo.defs#messageView',
id: nanoid(),
rev: '__fake__',
sentAt: new Date().toISOString(),
@ -968,6 +951,13 @@ export class Convo {
sender: this.sender!,
},
nextMessage: null,
retry: this.pendingFailed
? () => {
this.pendingFailed = false
this.commit()
this.batchRetryPendingMessages()
}
: undefined,
})
})

View File

@ -35,10 +35,6 @@ export enum ConvoItemError {
* Error fetching past messages
*/
HistoryFailed = 'historyFailed',
/**
* Error sending new message
*/
PendingFailed = 'pendingFailed',
}
export enum ConvoErrorCode {
@ -83,7 +79,7 @@ export type ConvoDispatch =
export type ConvoItem =
| {
type: 'message' | 'pending-message'
type: 'message'
key: string
message: ChatBskyConvoDefs.MessageView
nextMessage:
@ -91,6 +87,19 @@ export type ConvoItem =
| ChatBskyConvoDefs.DeletedMessageView
| null
}
| {
type: 'pending-message'
key: string
message: ChatBskyConvoDefs.MessageView
nextMessage:
| ChatBskyConvoDefs.MessageView
| ChatBskyConvoDefs.DeletedMessageView
| null
/**
* Retry sending the message. If present, the message is in a failed state.
*/
retry?: () => void
}
| {
type: 'deleted-message'
key: string