From a36b7817db5fc11918fb3c71fd3c2e052d2c6e17 Mon Sep 17 00:00:00 2001 From: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> Date: Fri, 4 Oct 2024 10:28:38 +0900 Subject: [PATCH] =?UTF-8?q?Revert=20"[=F0=9F=90=B4]=20Reduce=20amount=20th?= =?UTF-8?q?at=20message=20sent=20date=20is=20shown=20(#4228)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit af8e3422a6cb2131f5386fbdc94e9b158e5562b6. --- src/components/dms/DateDivider.tsx | 80 ------------- src/components/dms/MessageItem.tsx | 178 ++++++++++++++-------------- src/components/dms/ReportDialog.tsx | 1 - src/components/dms/util.ts | 9 -- src/state/messages/convo/agent.ts | 23 +--- src/state/messages/convo/types.ts | 12 -- 6 files changed, 94 insertions(+), 209 deletions(-) delete mode 100644 src/components/dms/DateDivider.tsx diff --git a/src/components/dms/DateDivider.tsx b/src/components/dms/DateDivider.tsx deleted file mode 100644 index a9c82e8ea2..0000000000 --- a/src/components/dms/DateDivider.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react' -import {View} from 'react-native' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -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 = React.memo(DateDivider) -export {DateDivider} diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index 52220e2cac..c5c472cf08 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -17,15 +17,13 @@ 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 {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 {isOnlyEmoji, RichText} from '../RichText' -import {DateDivider} from './DateDivider' import {MessageItemEmbed} from './MessageItemEmbed' -import {localDateString} from './util' let MessageItem = ({ item, @@ -35,37 +33,14 @@ let MessageItem = ({ const t = useTheme() const {currentAccount} = useSession() - const {message, nextMessage, prevMessage} = item + const {message, nextMessage} = 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 + ChatBskyConvoDefs.isMessageView(nextMessage) && + nextMessage.sender?.did === currentAccount?.did const isLastInGroup = useMemo(() => { // if this message is pending, it means the next message is pending too @@ -73,19 +48,24 @@ let MessageItem = ({ return false } - // or, if there's a 5 minute gap between this message and the next + // if the next message is from a different sender, then it's the last in the group + if (isFromSelf ? !isNextFromSelf : isNextFromSelf) { + return true + } + + // or, if there's a 3 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 + // 3 minutes + return diff > 3 * 60 * 1000 } return true - }, [message, nextMessage, isPending]) + }, [message, nextMessage, isFromSelf, isNextFromSelf, isPending]) const lastInGroupRef = useRef(isLastInGroup) if (lastInGroupRef.current !== isLastInGroup) { @@ -100,59 +80,52 @@ let MessageItem = ({ }, [message.text, message.facets]) return ( - <> - {isNewDay && } - - - {AppBskyEmbedRecord.isView(message.embed) && ( - - )} - {rt.text.length > 0 && ( - - - - )} - - - {isLastInGroup && ( - + + + {AppBskyEmbedRecord.isView(message.embed) && ( + )} - - + {rt.text.length > 0 && ( + + + + )} + + + {isLastInGroup && ( + + )} + ) } MessageItem = React.memo(MessageItem) @@ -192,12 +165,31 @@ let MessageItemMetadata = ({ const diff = now.getTime() - date.getTime() - // if under 30 seconds - if (diff < 1000 * 30) { + // if under 1 minute + if (diff < 1000 * 60) { return _(msg`Now`) } - return time + // if in the last day + if (localDateString(now) === localDateString(date)) { + return time + } + + // if yesterday + const yesterday = new Date(now) + yesterday.setDate(yesterday.getDate() - 1) + + if (localDateString(yesterday) === localDateString(date)) { + return _(msg`Yesterday, ${time}`) + } + + return i18n.date(date, { + hour: 'numeric', + minute: 'numeric', + day: 'numeric', + month: 'numeric', + year: 'numeric', + }) }, [_], ) @@ -250,5 +242,15 @@ let MessageItemMetadata = ({ ) } + MessageItemMetadata = React.memo(MessageItemMetadata) export {MessageItemMetadata} + +function localDateString(date: Date) { + // can't use toISOString because it should be in local time + const mm = date.getMonth() + const dd = date.getDate() + const yyyy = date.getFullYear() + // not padding with 0s because it's not necessary, it's just used for comparison + return `${yyyy}-${mm}-${dd}` +} diff --git a/src/components/dms/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx index 2dcd778545..5493a1c87f 100644 --- a/src/components/dms/ReportDialog.tsx +++ b/src/components/dms/ReportDialog.tsx @@ -277,7 +277,6 @@ function PreviewMessage({message}: {message: ChatBskyConvoDefs.MessageView}) { message, key: '', nextMessage: null, - prevMessage: null, }} style={[a.text_left, a.mb_0]} /> diff --git a/src/components/dms/util.ts b/src/components/dms/util.ts index 003532d0c6..5952b9acf4 100644 --- a/src/components/dms/util.ts +++ b/src/components/dms/util.ts @@ -16,12 +16,3 @@ export function canBeMessaged(profile: AppBskyActorDefs.ProfileView) { return false } } - -export function localDateString(date: Date) { - // can't use toISOString because it should be in local time - const mm = date.getMonth() - const dd = date.getDate() - const yyyy = date.getFullYear() - // not padding with 0s because it's not necessary, it's just used for comparison - return `${yyyy}-${mm}-${dd}` -} diff --git a/src/state/messages/convo/agent.ts b/src/state/messages/convo/agent.ts index 53d77046a2..de2605b5ad 100644 --- a/src/state/messages/convo/agent.ts +++ b/src/state/messages/convo/agent.ts @@ -972,7 +972,6 @@ export class Convo { key: m.id, message: m, nextMessage: null, - prevMessage: null, }) } else if (ChatBskyConvoDefs.isDeletedMessageView(m)) { items.unshift({ @@ -980,7 +979,6 @@ export class Convo { key: m.id, message: m, nextMessage: null, - prevMessage: null, }) } }) @@ -1003,7 +1001,6 @@ export class Convo { key: m.id, message: m, nextMessage: null, - prevMessage: null, }) } else if (ChatBskyConvoDefs.isDeletedMessageView(m)) { items.push({ @@ -1011,7 +1008,6 @@ export class Convo { key: m.id, message: m, nextMessage: null, - prevMessage: null, }) } }) @@ -1034,7 +1030,6 @@ export class Convo { sender: this.sender!, }, nextMessage: null, - prevMessage: null, failed: this.pendingMessageFailure !== null, retry: this.pendingMessageFailure === 'recoverable' @@ -1065,39 +1060,29 @@ export class Convo { }) .map((item, i, arr) => { let nextMessage = null - let prevMessage = null const isMessage = isConvoItemMessage(item) if (isMessage) { if ( - ChatBskyConvoDefs.isMessageView(item.message) || - ChatBskyConvoDefs.isDeletedMessageView(item.message) + isMessage && + (ChatBskyConvoDefs.isMessageView(item.message) || + ChatBskyConvoDefs.isDeletedMessageView(item.message)) ) { const next = arr[i + 1] if ( isConvoItemMessage(next) && + next && (ChatBskyConvoDefs.isMessageView(next.message) || ChatBskyConvoDefs.isDeletedMessageView(next.message)) ) { nextMessage = next.message } - - const prev = arr[i - 1] - - if ( - isConvoItemMessage(prev) && - (ChatBskyConvoDefs.isMessageView(prev.message) || - ChatBskyConvoDefs.isDeletedMessageView(prev.message)) - ) { - prevMessage = prev.message - } } return { ...item, nextMessage, - prevMessage, } } diff --git a/src/state/messages/convo/types.ts b/src/state/messages/convo/types.ts index 21772262ea..53e205e211 100644 --- a/src/state/messages/convo/types.ts +++ b/src/state/messages/convo/types.ts @@ -87,10 +87,6 @@ export type ConvoItem = | ChatBskyConvoDefs.MessageView | ChatBskyConvoDefs.DeletedMessageView | null - prevMessage: - | ChatBskyConvoDefs.MessageView - | ChatBskyConvoDefs.DeletedMessageView - | null } | { type: 'pending-message' @@ -100,10 +96,6 @@ export type ConvoItem = | ChatBskyConvoDefs.MessageView | ChatBskyConvoDefs.DeletedMessageView | null - prevMessage: - | ChatBskyConvoDefs.MessageView - | ChatBskyConvoDefs.DeletedMessageView - | null failed: boolean /** * Retry sending the message. If present, the message is in a failed state. @@ -118,10 +110,6 @@ export type ConvoItem = | ChatBskyConvoDefs.MessageView | ChatBskyConvoDefs.DeletedMessageView | null - prevMessage: - | ChatBskyConvoDefs.MessageView - | ChatBskyConvoDefs.DeletedMessageView - | null } | { type: 'error'