Implement consistent Link component

src/view/com/feed/FeedItem.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
 import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {bsky, AdxUri} from '@adxp/mock-api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FeedViewItemModel} from '../../../state/models/feed-view'
+import {Link} from '../util/Link'
 import {s, colors} from '../../lib/styles'
 import {ago} from '../../lib/strings'
 import {AVIS} from '../../lib/assets'
@@ -18,14 +19,12 @@ export const FeedItem = observer(function FeedItem({
 }) {
   const store = useStores()
   const record = item.record as unknown as bsky.Post.Record
-
+  const postHref = useMemo(() => {
-  const onPressOuter = () => {
     const urip = new AdxUri(item.uri)
-    store.nav.navigate(`/profile/${item.author.name}/post/${urip.recordKey}`)
+    return `/profile/${item.author.name}/post/${urip.recordKey}`
-  }
+  }, [item.uri, item.author.name])
-  const onPressAuthor = () => {
+  const authorHref = `/profile/${item.author.name}`
-    store.nav.navigate(`/profile/${item.author.name}`)
+
-  }
   const onPressReply = () => {
     store.nav.navigate('/composer')
   }
@@ -41,7 +40,10 @@ export const FeedItem = observer(function FeedItem({
   }
 
   return (
-    <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
+    <Link
+      style={styles.outer}
+      href={postHref}
+      title={`Post by ${item.author.name}`}>
       {item.repostedBy && (
         <View style={styles.repostedBy}>
           <FontAwesomeIcon icon="retweet" style={styles.repostedByIcon} />
@@ -51,24 +53,29 @@ export const FeedItem = observer(function FeedItem({
         </View>
       )}
       <View style={styles.layout}>
-        <TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
+        <Link
+          style={styles.layoutAvi}
+          href={authorHref}
+          title={item.author.name}>
           <Image
             style={styles.avi}
             source={AVIS[item.author.name] || AVIS['alice.com']}
           />
-        </TouchableOpacity>
+        </Link>
         <View style={styles.layoutContent}>
           <View style={styles.meta}>
-            <Text
+            <Link
-              style={[styles.metaItem, s.f15, s.bold]}
+              style={styles.metaItem}
-              onPress={onPressAuthor}>
+              href={authorHref}
-              {item.author.displayName}
+              title={item.author.name}>
-            </Text>
+              <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
-            <Text
+            </Link>
-              style={[styles.metaItem, s.f14, s.gray5]}
+            <Link
-              onPress={onPressAuthor}>
+              style={styles.metaItem}
-              @{item.author.name}
+              href={authorHref}
-            </Text>
+              title={item.author.name}>
+              <Text style={[s.f14, s.gray5]}>@{item.author.name}</Text>
+            </Link>
             <Text style={[styles.metaItem, s.f14, s.gray5]}>
               &middot; {ago(item.indexedAt)}
             </Text>
@@ -127,7 +134,7 @@ export const FeedItem = observer(function FeedItem({
           </View>
         </View>
       </View>
-    </TouchableOpacity>
+    </Link>
   )
 })
 

src/view/com/notifications/FeedItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
 import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {AdxUri} from '@adxp/mock-api'
@@ -9,29 +9,36 @@ import {ago} from '../../lib/strings'
 import {AVIS} from '../../lib/assets'
 import {PostText} from '../post/PostText'
 import {Post} from '../post/Post'
-import {useStores} from '../../../state'
+import {Link} from '../util/Link'
 
 export const FeedItem = observer(function FeedItem({
   item,
 }: {
   item: NotificationsViewItemModel
 }) {
-  const store = useStores()
+  const itemHref = useMemo(() => {
-
-  const onPressOuter = () => {
     if (item.isLike || item.isRepost) {
       const urip = new AdxUri(item.subjectUri)
-      store.nav.navigate(`/profile/${urip.host}/post/${urip.recordKey}`)
+      return `/profile/${urip.host}/post/${urip.recordKey}`
     } else if (item.isFollow) {
-      store.nav.navigate(`/profile/${item.author.name}`)
+      return `/profile/${item.author.name}`
     } else if (item.isReply) {
       const urip = new AdxUri(item.uri)
-      store.nav.navigate(`/profile/${urip.host}/post/${urip.recordKey}`)
+      return `/profile/${urip.host}/post/${urip.recordKey}`
     }
-  }
+    return ''
-  const onPressAuthor = () => {
+  }, [item])
-    store.nav.navigate(`/profile/${item.author.name}`)
+  const itemTitle = useMemo(() => {
-  }
+    if (item.isLike || item.isRepost) {
+      return 'Post'
+    } else if (item.isFollow) {
+      return item.author.name
+    } else if (item.isReply) {
+      return 'Post'
+    }
+  }, [item])
+  const authorHref = `/profile/${item.author.name}`
+  const authorTitle = item.author.name
 
   let action = ''
   let icon: Props['icon']
@@ -52,22 +59,20 @@ export const FeedItem = observer(function FeedItem({
   }
 
   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}>
             <FontAwesomeIcon icon={icon} size={14} style={[s.mt2, s.mr5]} />
-            <Text
+            <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
-              style={[styles.metaItem, s.f14, s.bold]}
+              <Text style={[s.f14, s.bold]}>{item.author.displayName}</Text>
-              onPress={onPressAuthor}>
+            </Link>
-              {item.author.displayName}
-            </Text>
             <Text style={[styles.metaItem, s.f14]}>{action}</Text>
             <Text style={[styles.metaItem, s.f14, s.gray5]}>
               {ago(item.indexedAt)}
@@ -87,7 +92,7 @@ export const FeedItem = observer(function FeedItem({
       ) : (
         <></>
       )}
-    </TouchableOpacity>
+    </Link>
   )
 })
 

src/view/com/post-thread/PostLikedBy.tsx

@@ -13,6 +13,7 @@ import {
   LikedByViewModel,
   LikedByViewItemModel,
 } from '../../../state/models/liked-by-view'
+import {Link} from '../util/Link'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
 import {AVIS} from '../../lib/assets'
@@ -73,12 +74,8 @@ export const PostLikedBy = observer(function PostLikedBy({uri}: {uri: string}) {
 })
 
 const LikedByItem = ({item}: {item: LikedByViewItemModel}) => {
-  const store = useStores()
-  const onPressOuter = () => {
-    store.nav.navigate(`/profile/${item.name}`)
-  }
   return (
-    <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
+    <Link style={styles.outer} href={`/profile/${item.name}`} title={item.name}>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <Image
@@ -91,7 +88,7 @@ const LikedByItem = ({item}: {item: LikedByViewItemModel}) => {
           <Text style={[s.f14, s.gray5]}>@{item.name}</Text>
         </View>
       </View>
-    </TouchableOpacity>
+    </Link>
   )
 }
 

src/view/com/post-thread/PostRepostedBy.tsx

@@ -13,6 +13,7 @@ import {
   RepostedByViewModel,
   RepostedByViewItemModel,
 } from '../../../state/models/reposted-by-view'
+import {Link} from '../util/Link'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
 import {AVIS} from '../../lib/assets'
@@ -79,12 +80,8 @@ export const PostRepostedBy = observer(function PostRepostedBy({
 })
 
 const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
-  const store = useStores()
-  const onPressOuter = () => {
-    store.nav.navigate(`/profile/${item.name}`)
-  }
   return (
-    <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
+    <Link style={styles.outer} href={`/profile/${item.name}`} title={item.name}>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <Image
@@ -97,7 +94,7 @@ const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
           <Text style={[s.f14, s.gray5]}>@{item.name}</Text>
         </View>
       </View>
-    </TouchableOpacity>
+    </Link>
   )
 }
 

src/view/com/post-thread/PostThreadItem.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
 import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {bsky, AdxUri} from '@adxp/mock-api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {PostThreadViewPostModel} from '../../../state/models/post-thread-view'
+import {Link} from '../util/Link'
 import {s, colors} from '../../lib/styles'
 import {ago, pluralize} from '../../lib/strings'
 import {AVIS} from '../../lib/assets'
@@ -20,25 +21,24 @@ export const PostThreadItem = observer(function PostThreadItem({
   const record = item.record as unknown as bsky.Post.Record
   const hasEngagement = item.likeCount || item.repostCount
 
-  const onPressOuter = () => {
+  const itemHref = useMemo(() => {
     const urip = new AdxUri(item.uri)
-    store.nav.navigate(`/profile/${item.author.name}/post/${urip.recordKey}`)
+    return `/profile/${item.author.name}/post/${urip.recordKey}`
-  }
+  }, [item.uri, item.author.name])
-  const onPressAuthor = () => {
+  const itemTitle = `Post by ${item.author.name}`
-    store.nav.navigate(`/profile/${item.author.name}`)
+  const authorHref = `/profile/${item.author.name}`
-  }
+  const authorTitle = item.author.name
-  const onPressLikes = () => {
+  const likesHref = useMemo(() => {
     const urip = new AdxUri(item.uri)
-    store.nav.navigate(
+    return `/profile/${item.author.name}/post/${urip.recordKey}/liked-by`
-      `/profile/${item.author.name}/post/${urip.recordKey}/liked-by`,
+  }, [item.uri, item.author.name])
-    )
+  const likesTitle = 'Likes on this post'
-  }
+  const repostsHref = useMemo(() => {
-  const onPressReposts = () => {
     const urip = new AdxUri(item.uri)
-    store.nav.navigate(
+    return `/profile/${item.author.name}/post/${urip.recordKey}/reposted-by`
-      `/profile/${item.author.name}/post/${urip.recordKey}/reposted-by`,
+  }, [item.uri, item.author.name])
-    )
+  const repostsTitle = 'Reposts of this post'
-  }
+
   const onPressReply = () => {
     store.nav.navigate(`/composer?replyTo=${item.uri}`)
   }
@@ -102,29 +102,31 @@ export const PostThreadItem = observer(function PostThreadItem({
     return (
       <View style={styles.outer}>
         <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, s.mt5]}>
-              <Text
+              <Link
-                style={[styles.metaItem, s.f15, s.bold]}
+                style={styles.metaItem}
-                onPress={onPressAuthor}>
+                href={authorHref}
-                {item.author.displayName}
+                title={authorTitle}>
-              </Text>
+                <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
+              </Link>
               <Text style={[styles.metaItem, s.f14, s.gray5]}>
                 &middot; {ago(item.indexedAt)}
               </Text>
             </View>
             <View style={styles.meta}>
-              <Text
+              <Link
-                style={[styles.metaItem, s.f14, s.gray5]}
+                style={styles.metaItem}
-                onPress={onPressAuthor}>
+                href={authorHref}
-                @{item.author.name}
+                title={authorTitle}>
-              </Text>
+                <Text style={[s.f14, s.gray5]}>@{item.author.name}</Text>
+              </Link>
             </View>
           </View>
         </View>
@@ -135,22 +137,28 @@ export const PostThreadItem = observer(function PostThreadItem({
           {item._isHighlightedPost && hasEngagement ? (
             <View style={styles.expandedInfo}>
               {item.repostCount ? (
-                <Text
+                <Link
-                  style={[styles.expandedInfoItem, s.gray5, s.semiBold]}
+                  style={styles.expandedInfoItem}
-                  onPress={onPressReposts}>
+                  href={repostsHref}
-                  <Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
+                  title={repostsTitle}>
-                  {pluralize(item.repostCount, 'repost')}
+                  <Text style={[s.gray5, s.semiBold]}>
-                </Text>
+                    <Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
+                    {pluralize(item.repostCount, 'repost')}
+                  </Text>
+                </Link>
               ) : (
                 <></>
               )}
               {item.likeCount ? (
-                <Text
+                <Link
-                  style={[styles.expandedInfoItem, s.gray5, s.semiBold]}
+                  style={styles.expandedInfoItem}
-                  onPress={onPressLikes}>
+                  href={likesHref}
-                  <Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '}
+                  title={likesTitle}>
-                  {pluralize(item.likeCount, 'like')}
+                  <Text style={[s.gray5, s.semiBold]}>
-                </Text>
+                    <Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '}
+                    {pluralize(item.likeCount, 'like')}
+                  </Text>
+                </Link>
               ) : (
                 <></>
               )}
@@ -166,26 +174,28 @@ export const PostThreadItem = observer(function PostThreadItem({
     )
   } else {
     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
+              <Link
-                style={[styles.metaItem, s.f15, s.bold]}
+                style={styles.metaItem}
-                onPress={onPressAuthor}>
+                href={authorHref}
-                {item.author.displayName}
+                title={authorTitle}>
-              </Text>
+                <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
-              <Text
+              </Link>
-                style={[styles.metaItem, s.f14, s.gray5]}
+              <Link
-                onPress={onPressAuthor}>
+                style={styles.metaItem}
-                @{item.author.name}
+                href={authorHref}
-              </Text>
+                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>
@@ -196,7 +206,7 @@ export const PostThreadItem = observer(function PostThreadItem({
             <Ctrls />
           </View>
         </View>
-      </TouchableOpacity>
+      </Link>
     )
   }
 })

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}`)
+    return `/profile/${item.author.name}/post/${urip.recordKey}`
-  }
+  }, [item.uri, item.author.name])
-  const onPressAuthor = () => {
+  const itemTitle = `Post by ${item.author.name}`
-    store.nav.navigate(`/profile/${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
+            <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
-              style={[styles.metaItem, s.f15, s.bold]}
+              <Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
-              onPress={onPressAuthor}>
+            </Link>
-              {item.author.displayName}
+            <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
-            </Text>
+              <Text style={[s.f14, s.gray5]}>@{item.author.name}</Text>
-            <Text
+            </Link>
-              style={[styles.metaItem, s.f14, s.gray5]}
-              onPress={onPressAuthor}>
-              @{item.author.name}
-            </Text>
             <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>
   )
 })
 

src/view/com/profile/ProfileFollowers.tsx

@@ -6,13 +6,13 @@ import {
   Image,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
 } from 'react-native'
 import {
   UserFollowersViewModel,
   FollowerItem,
 } from '../../../state/models/user-followers-view'
+import {Link} from '../util/Link'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
 import {AVIS} from '../../lib/assets'
@@ -77,12 +77,8 @@ export const ProfileFollowers = observer(function ProfileFollowers({
 })
 
 const User = ({item}: {item: FollowerItem}) => {
-  const store = useStores()
-  const onPressOuter = () => {
-    store.nav.navigate(`/profile/${item.name}`)
-  }
   return (
-    <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
+    <Link style={styles.outer} href={`/profile/${item.name}`} title={item.name}>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <Image
@@ -95,7 +91,7 @@ const User = ({item}: {item: FollowerItem}) => {
           <Text style={[s.f14, s.gray5]}>@{item.name}</Text>
         </View>
       </View>
-    </TouchableOpacity>
+    </Link>
   )
 }
 

src/view/com/profile/ProfileFollows.tsx

@@ -14,6 +14,7 @@ import {
   FollowItem,
 } from '../../../state/models/user-follows-view'
 import {useStores} from '../../../state'
+import {Link} from '../util/Link'
 import {s, colors} from '../../lib/styles'
 import {AVIS} from '../../lib/assets'
 
@@ -77,12 +78,8 @@ export const ProfileFollows = observer(function ProfileFollows({
 })
 
 const User = ({item}: {item: FollowItem}) => {
-  const store = useStores()
-  const onPressOuter = () => {
-    store.nav.navigate(`/profile/${item.name}`)
-  }
   return (
-    <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
+    <Link style={styles.outer} href={`/profile/${item.name}`} title={item.name}>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <Image
@@ -95,7 +92,7 @@ const User = ({item}: {item: FollowItem}) => {
           <Text style={[s.f14, s.gray5]}>@{item.name}</Text>
         </View>
       </View>
-    </TouchableOpacity>
+    </Link>
   )
 }
 

src/view/com/util/Link.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import {observer} from 'mobx-react-lite'
+import {StyleProp, Text, TouchableOpacity, ViewStyle} from 'react-native'
+import {useStores} from '../../../state'
+import {LinkActionsModel} from '../../../state/models/shell'
+
+export const Link = observer(function Link({
+  style,
+  href,
+  title,
+  children,
+}: {
+  style?: StyleProp<ViewStyle>
+  href: string
+  title?: string
+  children?: React.ReactNode
+}) {
+  const store = useStores()
+  const onPress = () => store.nav.navigate(href)
+  const onLongPress = () => {
+    store.shell.openModal(new LinkActionsModel(href, title || href))
+  }
+  return (
+    <TouchableOpacity style={style} onPress={onPress} onLongPress={onLongPress}>
+      {children ? children : <Text>{title || 'link'}</Text>}
+    </TouchableOpacity>
+  )
+})