WIP improved post linking

src/components/Post/Link/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {AtUri} from '@atproto/api'
+import {msg, plural} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {makeProfileLink} from '#/lib/routes/links'
+import {Link as InternalLink} from '#/components/Link'
+import {Props} from '#/components/Post/Link/types'
+
+export function Link({children, post, ...props}: Props) {
+  const {_} = useLingui()
+  const getTimeAgo = useGetTimeAgo()
+  const href = React.useMemo(() => {
+    const urip = new AtUri(post.uri)
+    return makeProfileLink(post.author, 'post', urip.rkey)
+  }, [post.uri, post.author])
+  const label = _(msg`${post.author.handle}:
+    ${(post.record as any).text}.
+    ${getTimeAgo(post.indexedAt, new Date(), {format: 'long'})} ago.
+    ${plural(post.replyCount || 0, {
+      one: '1 reply',
+      other: '# replies',
+    })}
+    ${plural(post.repostCount || 0, {
+      one: '1 repost',
+      other: '# reposts',
+    })}
+    ${plural(post.quoteCount || 0, {
+      one: '1 quote post',
+      other: '# quote posts',
+    })}
+  `)
+
+  return (
+    <InternalLink {...props} to={href} label={label}>
+      {children}
+    </InternalLink>
+  )
+}

src/components/Post/Link/index.web.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import {Pressable} from 'react-native'
+import {AtUri} from '@atproto/api'
+import {msg, plural} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {makeProfileLink} from '#/lib/routes/links'
+import {useLink} from '#/components/Link'
+import {Props} from '#/components/Post/Link/types'
+
+export function Link({children, post, ...props}: Props) {
+  const {_} = useLingui()
+  const getTimeAgo = useGetTimeAgo()
+  const href = React.useMemo(() => {
+    const urip = new AtUri(post.uri)
+    return makeProfileLink(post.author, 'post', urip.rkey)
+  }, [post.uri, post.author])
+  const {onPress} = useLink({
+    to: href,
+    displayText: '',
+    disableMismatchWarning: true,
+  })
+  const label = _(msg`${post.author.handle}:
+    ${(post.record as any).text}.
+    ${getTimeAgo(post.indexedAt, new Date(), {format: 'long'})} ago.
+    ${plural(post.replyCount || 0, {
+      one: '1 reply',
+      other: '# replies',
+    })}
+    ${plural(post.repostCount || 0, {
+      one: '1 repost',
+      other: '# reposts',
+    })}
+    ${plural(post.quoteCount || 0, {
+      one: '1 quote post',
+      other: '# quote posts',
+    })}
+  `)
+
+  return (
+    <Pressable
+      {...props}
+      role="article"
+      accessibilityRole="link"
+      accessibilityHint=""
+      accessibilityLabel={label}
+      accessible
+      onPress={e => {
+        props.onPress?.(e)
+        onPress(e)
+      }}>
+      {children}
+    </Pressable>
+  )
+}

src/components/Post/Link/types.ts

@@ -0,0 +1,12 @@
+import {PressableProps} from 'react-native'
+import {AppBskyFeedDefs} from '@atproto/api'
+
+import {LinkProps} from '#/components/Link'
+
+export type Props = Pick<LinkProps, 'onPress' | 'style' | 'testID'> &
+  Pick<PressableProps, 'onPointerEnter' | 'onPointerLeave'> & {
+    children:
+      | React.ReactElement
+      | Iterable<React.ReactElement | null | undefined | boolean>
+    post: AppBskyFeedDefs.PostView
+  }

src/view/com/posts/FeedItem.tsx

@@ -44,6 +44,7 @@ import {ContentHider} from '#/components/moderation/ContentHider'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {AppModerationCause} from '#/components/Pills'
+import {Link as PostLink} from '#/components/Post/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {RichText} from '#/components/RichText'
 import {SubtleWebHover} from '#/components/SubtleWebHover'
@@ -239,15 +240,14 @@ let FeedItemInner = ({
     : undefined
 
   const [hover, setHover] = useState(false)
+
   return (
-    <Link
+    <PostLink
       testID={`feedItem-by-${post.author.handle}`}
+      post={post}
       style={outerStyles}
-      href={href}
+      onPress={onBeforePress}
-      noFeedback
+      //dataSet={{feedContext}}
-      accessible={false}
-      onBeforePress={onBeforePress}
-      dataSet={{feedContext}}
       onPointerEnter={() => {
         setHover(true)
       }}
@@ -428,7 +428,7 @@ let FeedItemInner = ({
           />
         </View>
       </View>
-    </Link>
+    </PostLink>
   )
 }
 FeedItemInner = memo(FeedItemInner)