diff --git a/src/components/dms/DateDivider.tsx b/src/components/dms/DateDivider.tsx index 88b405ecdf..375b83106b 100644 --- a/src/components/dms/DateDivider.tsx +++ b/src/components/dms/DateDivider.tsx @@ -1,55 +1,78 @@ import React from 'react' import {View} from 'react-native' -import {msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' 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 display: string + let date: string + const time = timeFormatter.format(new Date(dateStr)) - const date = new Date(dateStr) + const timestamp = new Date(dateStr) const today = new Date() const yesterday = new Date() yesterday.setDate(today.getDate() - 1) + const oneWeekAgo = new Date() + oneWeekAgo.setDate(today.getDate() - 7) - if (localDateString(today) === localDateString(date)) { - display = _(msg`Today`) - } else if (localDateString(yesterday) === localDateString(date)) { - display = _(msg`Yesterday`) + if (localDateString(today) === localDateString(timestamp)) { + date = _(msg`Today`) + } else if (localDateString(yesterday) === localDateString(timestamp)) { + date = _(msg`Yesterday`) } else { - display = new Intl.DateTimeFormat(undefined, { - day: 'numeric', - month: 'numeric', - year: 'numeric', - }).format(date) + if (timestamp > oneWeekAgo) { + if (timestamp.getFullYear() === today.getFullYear()) { + date = longDateFormatter.format(timestamp) + } else { + date = longDateFormatterWithYear.format(timestamp) + } + } else { + date = weekdayFormatter.format(timestamp) + } } return ( - - + - {display} + + + {date} + {' '} + at {time} + ) diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index f15b73bdad..61fbba9e38 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -41,8 +41,6 @@ let MessageItem = ({ const isNextFromSameSender = isNextFromSelf === isFromSelf - const needsTail = !nextIsMessage || !isNextFromSameSender - const isNewDay = useMemo(() => { // TODO: figure out how we can show this for when we're at the start // of the conversation @@ -54,6 +52,17 @@ let MessageItem = ({ 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) {