Revert "[🐴] Reduce amount that message sent date is shown (bluesky-so…

…cial#4228)" This reverts commit af8e342.
tkusano · Oct 4, 2024 · a36b781 · a36b781
1 parent e928cd1
commit a36b781
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 209 deletions.
diff --git a/src/components/dms/DateDivider.tsx b/src/components/dms/DateDivider.tsx
diff --git 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,57 +33,39 @@ 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
     if (isPending && nextMessage) {
       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 && <DateDivider date={message.sentAt} />}
-      <View
-        style={[
-          isFromSelf ? a.mr_md : a.ml_md,
-          nextIsMessage && !isNextFromSameSender && a.mb_md,
-        ]}>
-        <ActionsWrapper isFromSelf={isFromSelf} message={message}>
-          {AppBskyEmbedRecord.isView(message.embed) && (
-            <MessageItemEmbed embed={message.embed} />
-          )}
-          {rt.text.length > 0 && (
-            <View
-              style={
-                !isOnlyEmoji(message.text) && [
-                  a.py_sm,
-                  a.my_2xs,
-                  a.rounded_md,
-                  {
-                    paddingLeft: 14,
-                    paddingRight: 14,
-                    backgroundColor: isFromSelf
-                      ? isPending
-                        ? pendingColor
-                        : t.palette.primary_500
-                      : t.palette.contrast_50,
-                    borderRadius: 17,
-                  },
-                  isFromSelf ? a.self_end : a.self_start,
-                  isFromSelf
-                    ? {borderBottomRightRadius: needsTail ? 2 : 17}
-                    : {borderBottomLeftRadius: needsTail ? 2 : 17},
-                ]
-              }>
-              <RichText
-                value={rt}
-                style={[a.text_md, isFromSelf && {color: t.palette.white}]}
-                interactiveStyle={a.underline}
-                enableTags
-                emojiMultiplier={3}
-              />
-            </View>
-          )}
-        </ActionsWrapper>
-
-        {isLastInGroup && (
-          <MessageItemMetadata
-            item={item}
-            style={isFromSelf ? a.text_right : a.text_left}
-          />
+    <View style={[isFromSelf ? a.mr_md : a.ml_md]}>
+      <ActionsWrapper isFromSelf={isFromSelf} message={message}>
+        {AppBskyEmbedRecord.isView(message.embed) && (
+          <MessageItemEmbed embed={message.embed} />
         )}
-      </View>
-    </>
+        {rt.text.length > 0 && (
+          <View
+            style={
+              !isOnlyEmoji(message.text) && [
+                a.py_sm,
+                a.my_2xs,
+                a.rounded_md,
+                {
+                  paddingLeft: 14,
+                  paddingRight: 14,
+                  backgroundColor: isFromSelf
+                    ? isPending
+                      ? pendingColor
+                      : t.palette.primary_500
+                    : t.palette.contrast_50,
+                  borderRadius: 17,
+                },
+                isFromSelf ? a.self_end : a.self_start,
+                isFromSelf
+                  ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
+                  : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
+              ]
+            }>
+            <RichText
+              value={rt}
+              style={[a.text_md, isFromSelf && {color: t.palette.white}]}
+              interactiveStyle={a.underline}
+              enableTags
+              emojiMultiplier={3}
+            />
+          </View>
+        )}
+      </ActionsWrapper>
+
+      {isLastInGroup && (
+        <MessageItemMetadata
+          item={item}
+          style={isFromSelf ? a.text_right : a.text_left}
+        />
+      )}
+    </View>
   )
 }
 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 = ({
     </Text>
   )
 }
+
 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
@@ -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
@@ -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}`
-}