Implement consistent Link component

1 files changed, 17 insertions, 20 deletions

diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 0b8ba457e..2de7432bd 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {PostThreadViewModel} from '../../../state/models/post-thread-view'
+import {Link} from '../util/Link'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
 import {ago} from '../../lib/strings'
@@ -54,13 +55,13 @@ export const Post = observer(function Post({uri}: {uri: string}) {
   const item = view.thread
   const record = view.thread?.record as unknown as bsky.Post.Record
 
-  const onPressOuter = () => {
+  const itemHref = useMemo(() => {
     const urip = new AdxUri(item.uri)
-    store.nav.navigate(`/profile/${item.author.name}/post/${urip.recordKey}`)
-  }
-  const onPressAuthor = () => {
-    store.nav.navigate(`/profile/${item.author.name}`)
-  }
+    return `/profile/${item.author.name}/post/${urip.recordKey}`
+  }, [item.uri, item.author.name])
+  const itemTitle = `Post by ${item.author.name}`
+  const authorHref = `/profile/${item.author.name}`
+  const authorTitle = item.author.name
   const onPressReply = () => {
     store.nav.navigate(`/composer?replyTo=${item.uri}`)
   }
@@ -76,26 +77,22 @@ export const Post = observer(function Post({uri}: {uri: string}) {
   }
 
   return (
-    <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
+    <Link style={styles.outer} href={itemHref} title={itemTitle}>
       <View style={styles.layout}>
-        <TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
+        <Link style={styles.layoutAvi} href={authorHref} title={authorTitle}>
           <Image
             style={styles.avi}
             source={AVIS[item.author.name] || AVIS['alice.com']}
           />
-        </TouchableOpacity>
+        </Link>
         <View style={styles.layoutContent}>
           <View style={styles.meta}>
-            <Text
-              style={[styles.metaItem, s.f15, s.bold]}
-              onPress={onPressAuthor}>
-              {item.author.displayName}
-            </Text>
-            <Text
-              style={[styles.metaItem, s.f14, s.gray5]}
-              onPress={onPressAuthor}>
-              @{item.author.name}
-            </Text>
+            <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
+              <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
+            </Link>
+            <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
+              <Text style={[s.f14, s.gray5]}>@{item.author.name}</Text>
+            </Link>
             <Text style={[styles.metaItem, s.f14, s.gray5]}>
               &middot; {ago(item.indexedAt)}
             </Text>
@@ -149,7 +146,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
           </View>
         </View>
       </View>
-    </TouchableOpacity>
+    </Link>
   )
 })