From 3b0e0403cf6ab9c3a316dcaa32d2512d14ad52c7 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Mon, 13 Apr 2026 15:00:42 +0300 Subject: [PATCH] rm old messageitems --- src/components/dms/DateDivider_DEPRECATED.tsx | 82 ----- .../dms/MessageItemEmbed_DEPRECATED.tsx | 49 --- src/components/dms/MessageItem_DEPRECATED.tsx | 335 ------------------ .../MessageListError_DEPRECATED.tsx | 64 ---- .../Messages/components/MessagesList.tsx | 14 +- 5 files changed, 2 insertions(+), 542 deletions(-) delete mode 100644 src/components/dms/DateDivider_DEPRECATED.tsx delete mode 100644 src/components/dms/MessageItemEmbed_DEPRECATED.tsx delete mode 100644 src/components/dms/MessageItem_DEPRECATED.tsx delete mode 100644 src/screens/Messages/components/MessageListError_DEPRECATED.tsx diff --git a/src/components/dms/DateDivider_DEPRECATED.tsx b/src/components/dms/DateDivider_DEPRECATED.tsx deleted file mode 100644 index dfc2d53da5..0000000000 --- a/src/components/dms/DateDivider_DEPRECATED.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import {memo} from 'react' -import {View} from 'react-native' -import {msg} from '@lingui/core/macro' -import {useLingui} from '@lingui/react' -import {Trans} from '@lingui/react/macro' -import {subDays} from 'date-fns' - -import {atoms as a, useTheme} from '#/alf' -import {Text} from '../Typography' -import {localDateString} from './util' - -const timeFormatter = new Intl.DateTimeFormat(undefined, { - hour: 'numeric', - minute: 'numeric', -}) -const weekdayFormatter = new Intl.DateTimeFormat(undefined, { - weekday: 'long', -}) -const longDateFormatter = new Intl.DateTimeFormat(undefined, { - weekday: 'short', - month: 'long', - day: 'numeric', -}) -const longDateFormatterWithYear = new Intl.DateTimeFormat(undefined, { - weekday: 'short', - month: 'long', - day: 'numeric', - year: 'numeric', -}) - -let DateDivider = ({date: dateStr}: {date: string}): React.ReactNode => { - const {_} = useLingui() - const t = useTheme() - - let date: string - const time = timeFormatter.format(new Date(dateStr)) - - const timestamp = new Date(dateStr) - - const today = new Date() - const yesterday = subDays(today, 1) - const oneWeekAgo = subDays(today, 7) - - if (localDateString(today) === localDateString(timestamp)) { - date = _(msg`Today`) - } else if (localDateString(yesterday) === localDateString(timestamp)) { - date = _(msg`Yesterday`) - } else { - if (timestamp < oneWeekAgo) { - if (timestamp.getFullYear() === today.getFullYear()) { - date = longDateFormatter.format(timestamp) - } else { - date = longDateFormatterWithYear.format(timestamp) - } - } else { - date = weekdayFormatter.format(timestamp) - } - } - - return ( - - - - - {date} - {' '} - at {time} - - - - ) -} -DateDivider = memo(DateDivider) -export {DateDivider} diff --git a/src/components/dms/MessageItemEmbed_DEPRECATED.tsx b/src/components/dms/MessageItemEmbed_DEPRECATED.tsx deleted file mode 100644 index a531c990c0..0000000000 --- a/src/components/dms/MessageItemEmbed_DEPRECATED.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import {memo} from 'react' -import {useWindowDimensions, View} from 'react-native' -import {type $Typed, type AppBskyEmbedRecord} from '@atproto/api' - -import {atoms as a, native, tokens, useTheme, web} from '#/alf' -import {Embed, PostEmbedViewContext} from '#/components/Post/Embed' -import {MessageContextProvider} from './MessageContext' - -/** - * @deprecated - */ -let MessageItemEmbed = ({ - embed, -}: { - embed: $Typed -}): React.ReactNode => { - const t = useTheme() - const screen = useWindowDimensions() - - return ( - - - - - - - - ) -} -MessageItemEmbed = memo(MessageItemEmbed) -export {MessageItemEmbed} diff --git a/src/components/dms/MessageItem_DEPRECATED.tsx b/src/components/dms/MessageItem_DEPRECATED.tsx deleted file mode 100644 index efec8eb92c..0000000000 --- a/src/components/dms/MessageItem_DEPRECATED.tsx +++ /dev/null @@ -1,335 +0,0 @@ -import {memo, useCallback, useMemo} from 'react' -import { - type GestureResponderEvent, - type StyleProp, - type TextStyle, - View, -} from 'react-native' -import Animated, { - LayoutAnimationConfig, - LinearTransition, - ZoomIn, - ZoomOut, -} from 'react-native-reanimated' -import { - AppBskyEmbedRecord, - ChatBskyConvoDefs, - RichText as RichTextAPI, -} from '@atproto/api' -import {type I18n} from '@lingui/core' -import {msg} from '@lingui/core/macro' -import {useLingui} from '@lingui/react' - -import {sanitizeDisplayName} from '#/lib/strings/display-names' -import {useConvoActive} from '#/state/messages/convo' -import {type ConvoItem} from '#/state/messages/convo/types' -import {useSession} from '#/state/session' -import {TimeElapsed} from '#/view/com/util/TimeElapsed' -import {atoms as a, native, useTheme} from '#/alf' -import {isOnlyEmoji} from '#/alf/typography' -import {ActionsWrapper} from '#/components/dms/ActionsWrapper' -import {InlineLinkText} from '#/components/Link' -import {RichText} from '#/components/RichText' -import {Text} from '#/components/Typography' -import {IS_NATIVE} from '#/env' -import {DateDivider as DateDividerDeprecated} from './DateDivider_DEPRECATED' -import {MessageItemEmbed as MessageItemEmbedDeprecated} from './MessageItemEmbed_DEPRECATED' -import {localDateString} from './util' - -/** - * @deprecated - */ -let MessageItem = ({ - item, -}: { - item: ConvoItem & {type: 'message' | 'pending-message'} -}): React.ReactNode => { - const t = useTheme() - const {currentAccount} = useSession() - const {_} = useLingui() - const {convo} = useConvoActive() - - const {message, nextMessage, prevMessage} = item - const isPending = item.type === 'pending-message' - - const isFromSelf = message.sender?.did === currentAccount?.did - - const nextIsMessage = ChatBskyConvoDefs.isMessageView(nextMessage) - - const isNextFromSelf = - nextIsMessage && nextMessage.sender?.did === currentAccount?.did - - const isNextFromSameSender = isNextFromSelf === isFromSelf - - const isNewDay = useMemo(() => { - if (!prevMessage) return true - - const thisDate = new Date(message.sentAt) - const prevDate = new Date(prevMessage.sentAt) - - return localDateString(thisDate) !== localDateString(prevDate) - }, [message, prevMessage]) - - const isLastMessageOfDay = useMemo(() => { - if (!nextMessage || !nextIsMessage) return true - - const thisDate = new Date(message.sentAt) - const prevDate = new Date(nextMessage.sentAt) - - return localDateString(thisDate) !== localDateString(prevDate) - }, [message.sentAt, nextIsMessage, nextMessage]) - - const needsTail = isLastMessageOfDay || !isNextFromSameSender - - const isLastInGroup = useMemo(() => { - // if this message is pending, it means the next message is pending too - if (isPending && nextMessage) { - return false - } - - // or, if there's a 5 minute gap between this message and the next - if (ChatBskyConvoDefs.isMessageView(nextMessage)) { - const thisDate = new Date(message.sentAt) - const nextDate = new Date(nextMessage.sentAt) - - const diff = nextDate.getTime() - thisDate.getTime() - - // 5 minutes - return diff > 5 * 60 * 1000 - } - - return true - }, [message, nextMessage, isPending]) - - const pendingColor = t.palette.primary_200 - - const rt = useMemo(() => { - return new RichTextAPI({text: message.text, facets: message.facets}) - }, [message.text, message.facets]) - - const appliedReactions = ( - - {message.reactions && message.reactions.length > 0 && ( - - - {message.reactions.map((reaction, _i, reactions) => { - let label - if (reaction.sender.did === currentAccount?.did) { - label = _(msg`You reacted ${reaction.value}`) - } else { - const senderDid = reaction.sender.did - const sender = convo.members.find( - member => member.did === senderDid, - ) - if (sender) { - label = _( - msg`${sanitizeDisplayName( - sender.displayName || sender.handle, - )} reacted ${reaction.value}`, - ) - } else { - label = _(msg`Someone reacted ${reaction.value}`) - } - } - return ( - 1 && native(ZoomOut.delay(200))} - layout={native(LinearTransition.delay(300))} - key={reaction.sender.did + reaction.value} - style={[a.p_2xs]} - accessible={true} - accessibilityLabel={label} - accessibilityHint={_( - msg`Double tap or long press the message to add a reaction`, - )}> - - {reaction.value} - - - ) - })} - - - )} - - ) - - return ( - <> - {isNewDay && } - - - {AppBskyEmbedRecord.isView(message.embed) && ( - - )} - {rt.text.length > 0 && ( - - - - )} - - {IS_NATIVE && appliedReactions} - - - {!IS_NATIVE && appliedReactions} - - {isLastInGroup && ( - - )} - - - ) -} -MessageItem = memo(MessageItem) -export {MessageItem} - -let MessageItemMetadata = ({ - item, - style, -}: { - item: ConvoItem & {type: 'message' | 'pending-message'} - style: StyleProp -}): 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( - (i18n: I18n, timestamp: string) => { - const date = new Date(timestamp) - const now = new Date() - - const time = i18n.date(date, { - hour: 'numeric', - minute: 'numeric', - }) - - const diff = now.getTime() - date.getTime() - - // if under 30 seconds - if (diff < 1000 * 30) { - return _(msg`Now`) - } - - return time - }, - [_], - ) - - return ( - - - {({timeElapsed}) => ( - - {timeElapsed} - - )} - - - {item.type === 'pending-message' && item.failed && ( - <> - {' '} - ·{' '} - - {_(msg`Failed to send`)} - - {item.retry && ( - <> - {' '} - ·{' '} - - {_(msg`Retry`)} - - - )} - - )} - - ) -} -MessageItemMetadata = memo(MessageItemMetadata) -export {MessageItemMetadata} diff --git a/src/screens/Messages/components/MessageListError_DEPRECATED.tsx b/src/screens/Messages/components/MessageListError_DEPRECATED.tsx deleted file mode 100644 index 0e84fb51d4..0000000000 --- a/src/screens/Messages/components/MessageListError_DEPRECATED.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import {useMemo} from 'react' -import {View} from 'react-native' -import {msg} from '@lingui/core/macro' -import {useLingui} from '@lingui/react' - -import {type ConvoItem, ConvoItemError} from '#/state/messages/convo/types' -import {atoms as a, useTheme} from '#/alf' -import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' -import {InlineLinkText} from '#/components/Link' -import {Text} from '#/components/Typography' - -/** - * @deprecated - */ -export function MessageListError({item}: {item: ConvoItem & {type: 'error'}}) { - const t = useTheme() - const {_} = useLingui() - const {description, help, cta} = useMemo(() => { - return { - [ConvoItemError.FirehoseFailed]: { - description: _(msg`This chat was disconnected`), - help: _(msg`Press to attempt reconnection`), - cta: _(msg`Reconnect`), - }, - [ConvoItemError.HistoryFailed]: { - description: _(msg`Failed to load past messages`), - help: _(msg`Press to retry`), - cta: _(msg`Retry`), - }, - }[item.code] - }, [_, item.code]) - - return ( - - - - - - {description} ·{' '} - {item.retry && ( - { - e.preventDefault() - item.retry?.() - return false - }}> - {cta} - - )} - - - - ) -} diff --git a/src/screens/Messages/components/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx index 985bf242bd..494b487238 100644 --- a/src/screens/Messages/components/MessagesList.tsx +++ b/src/screens/Messages/components/MessagesList.tsx @@ -51,11 +51,9 @@ import {ChatDisabled} from '#/screens/Messages/components/ChatDisabled' import {MessageComposer} from '#/screens/Messages/components/MessageComposer' import {MessageInput} from '#/screens/Messages/components/MessageInput' import {MessageListError} from '#/screens/Messages/components/MessageListError' -import {MessageListError as MessageListErrorDeprecated} from '#/screens/Messages/components/MessageListError_DEPRECATED' import {atoms as a, platform, tokens, useTheme, web} from '#/alf' import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill' import {MessageItem} from '#/components/dms/MessageItem' -import {MessageItem as MessageItemDeprecated} from '#/components/dms/MessageItem_DEPRECATED' import {NewMessagesPill} from '#/components/dms/NewMessagesPill' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -107,8 +105,6 @@ export function MessagesList({ const {embedUri, setEmbed} = useMessageEmbed() const t = useTheme() - const isGroupChatEnabled = ax.features.enabled(ax.features.GroupChatsEnable) - const textInputId = 'chat-input-' + useId() const flatListRef = useAnimatedRef() @@ -363,7 +359,7 @@ export function MessagesList({ const renderItem = ({item}: {item: ConvoItem}) => { if (item.type === 'message' || item.type === 'pending-message') { - return isGroupChatEnabled ? ( + return ( - ) : ( - ) } else if (item.type === 'deleted-message') { return Deleted message } else if (item.type === 'error') { - return isGroupChatEnabled ? ( - - ) : ( - - ) + return } return null