diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index f8f5197ca4..066e20eb6a 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -1,5 +1,11 @@ -import React, {useCallback, useMemo, useRef} from 'react' -import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native' +import React, {useCallback, useMemo, useRef, useState} from 'react' +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 ( - - + - {item.text} - - + + {item.text} + + +