show message info on press

src/components/dms/MessageItem.tsx

@@ -1,5 +1,11 @@
-import React, {useCallback, useMemo, useRef} from 'react'
+import React, {useCallback, useMemo, useRef, useState} from 'react'
-import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native'
+import {
+  LayoutAnimation,
+  Pressable,
+  StyleProp,
+  TextStyle,
+  View,
+} from 'react-native'
 import {ChatBskyConvoDefs} from '@atproto-labs/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -24,14 +30,24 @@ export let MessageItem = ({
 }): React.ReactNode => {
   const t = useTheme()
   const {currentAccount} = useSession()
+  const [hasBeenPressed, setHasBeenPressed] = useState(false)
 
   const isFromSelf = item.sender?.did === currentAccount?.did
 
+  const handlePress = useCallback(() => {
+    setHasBeenPressed(p => !p)
+  }, [])
+
   const isNextFromSelf =
     ChatBskyConvoDefs.isMessageView(next) &&
     next.sender?.did === currentAccount?.did
 
   const isLastInGroup = useMemo(() => {
+    // override showing date if the message has been pressed
+    if (hasBeenPressed) {
+      return true
+    }
+
     // TODO this means it's a placeholder. Let's figure out the right way to do this though!
     if (item.id.length > 13) {
       return false
@@ -54,7 +70,14 @@ export let MessageItem = ({
     }
 
     return true
-  }, [item, next, isFromSelf, isNextFromSelf])
+  }, [
+    hasBeenPressed,
+    item.id.length,
+    item.sentAt,
+    isFromSelf,
+    isNextFromSelf,
+    next,
+  ])
 
   const lastInGroupRef = useRef(isLastInGroup)
   if (lastInGroupRef.current !== isLastInGroup) {
@@ -68,35 +91,40 @@ export let MessageItem = ({
   return (
     <View>
       <ActionsWrapper isFromSelf={isFromSelf} message={item}>
-        <View
+        <Pressable
-          style={[
+          accessibilityRole="none"
-            a.py_sm,
+          accessibilityHint="Show message info"
-            a.my_2xs,
+          onPress={handlePress}>
-            a.rounded_md,
+          <View
-            {
-              paddingLeft: 14,
-              paddingRight: 14,
-              backgroundColor: isFromSelf
-                ? pending
-                  ? pendingColor
-                  : t.palette.primary_500
-                : t.palette.contrast_50,
-              borderRadius: 17,
-            },
-            isFromSelf
-              ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
-              : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
-          ]}>
-          <Text
             style={[
-              a.text_md,
+              a.py_sm,
-              a.leading_snug,
+              a.my_2xs,
-              isFromSelf && {color: t.palette.white},
+              a.rounded_md,
-              pending && t.name !== 'light' && {color: t.palette.primary_300},
+              {
+                paddingLeft: 14,
+                paddingRight: 14,
+                backgroundColor: isFromSelf
+                  ? pending
+                    ? pendingColor
+                    : t.palette.primary_500
+                  : t.palette.contrast_50,
+                borderRadius: 17,
+              },
+              isFromSelf
+                ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
+                : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
             ]}>
-            {item.text}
+            <Text
-          </Text>
+              style={[
-        </View>
+                a.text_md,
+                a.leading_snug,
+                isFromSelf && {color: t.palette.white},
+                pending && t.name !== 'light' && {color: t.palette.primary_300},
+              ]}>
+              {item.text}
+            </Text>
+          </View>
+        </Pressable>
       </ActionsWrapper>
       <MessageItemMetadata
         message={item}