diff --git a/src/view/com/feed/FeedItem.tsx b/src/view/com/feed/FeedItem.tsx
index 8c1e8dd211..0361925cbf 100644
--- a/src/view/com/feed/FeedItem.tsx
+++ b/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 onPressOuter = () => {
+ const postHref = 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 authorHref = `/profile/${item.author.name}`
+
const onPressReply = () => {
store.nav.navigate('/composer')
}
@@ -41,7 +40,10 @@ export const FeedItem = observer(function FeedItem({
}
return (
-
+
{item.repostedBy && (
@@ -51,24 +53,29 @@ export const FeedItem = observer(function FeedItem({
)}
-
+
-
+
-
- {item.author.displayName}
-
-
- @{item.author.name}
-
+
+ {item.author.displayName}
+
+
+ @{item.author.name}
+
· {ago(item.indexedAt)}
@@ -127,7 +134,7 @@ export const FeedItem = observer(function FeedItem({
-
+
)
})
diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 6a418872d3..9313379269 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/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 onPressOuter = () => {
+ const itemHref = useMemo(() => {
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}`
}
- }
- const onPressAuthor = () => {
- store.nav.navigate(`/profile/${item.author.name}`)
- }
+ return ''
+ }, [item])
+ 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 (
-
+
-
+
-
+
-
- {item.author.displayName}
-
+
+ {item.author.displayName}
+
{action}
{ago(item.indexedAt)}
@@ -87,7 +92,7 @@ export const FeedItem = observer(function FeedItem({
) : (
<>>
)}
-
+
)
})
diff --git a/src/view/com/post-thread/PostLikedBy.tsx b/src/view/com/post-thread/PostLikedBy.tsx
index 77224640c4..e928f35912 100644
--- a/src/view/com/post-thread/PostLikedBy.tsx
+++ b/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 (
-
+
{
@{item.name}
-
+
)
}
diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx
index b298a2484e..1c4e42a8ea 100644
--- a/src/view/com/post-thread/PostRepostedBy.tsx
+++ b/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 (
-
+
{
@{item.name}
-
+
)
}
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 376ec6805d..5909cac8a6 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/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}`)
- }
- const onPressAuthor = () => {
- store.nav.navigate(`/profile/${item.author.name}`)
- }
- const onPressLikes = () => {
+ 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 likesHref = useMemo(() => {
const urip = new AdxUri(item.uri)
- store.nav.navigate(
- `/profile/${item.author.name}/post/${urip.recordKey}/liked-by`,
- )
- }
- const onPressReposts = () => {
+ return `/profile/${item.author.name}/post/${urip.recordKey}/liked-by`
+ }, [item.uri, item.author.name])
+ const likesTitle = 'Likes on this post'
+ const repostsHref = useMemo(() => {
const urip = new AdxUri(item.uri)
- store.nav.navigate(
- `/profile/${item.author.name}/post/${urip.recordKey}/reposted-by`,
- )
- }
+ return `/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 (
-
+
-
+
-
- {item.author.displayName}
-
+
+ {item.author.displayName}
+
· {ago(item.indexedAt)}
-
- @{item.author.name}
-
+
+ @{item.author.name}
+
@@ -135,22 +137,28 @@ export const PostThreadItem = observer(function PostThreadItem({
{item._isHighlightedPost && hasEngagement ? (
{item.repostCount ? (
-
- {item.repostCount}{' '}
- {pluralize(item.repostCount, 'repost')}
-
+
+
+ {item.repostCount}{' '}
+ {pluralize(item.repostCount, 'repost')}
+
+
) : (
<>>
)}
{item.likeCount ? (
-
- {item.likeCount}{' '}
- {pluralize(item.likeCount, 'like')}
-
+
+
+ {item.likeCount}{' '}
+ {pluralize(item.likeCount, 'like')}
+
+
) : (
<>>
)}
@@ -166,26 +174,28 @@ export const PostThreadItem = observer(function PostThreadItem({
)
} else {
return (
-
+
-
+
-
+
-
- {item.author.displayName}
-
-
- @{item.author.name}
-
+
+ {item.author.displayName}
+
+
+ @{item.author.name}
+
· {ago(item.indexedAt)}
@@ -196,7 +206,7 @@ export const PostThreadItem = observer(function PostThreadItem({
-
+
)
}
})
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 0b8ba457ee..2de7432bdd 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 (
-
+
-
+
-
+
-
- {item.author.displayName}
-
-
- @{item.author.name}
-
+
+ {item.author.displayName}
+
+
+ @{item.author.name}
+
· {ago(item.indexedAt)}
@@ -149,7 +146,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
-
+
)
})
diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx
index 9b0d57e7d3..20a2ab9137 100644
--- a/src/view/com/profile/ProfileFollowers.tsx
+++ b/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 (
-
+
{
@{item.name}
-
+
)
}
diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx
index ed015430d3..6517c45961 100644
--- a/src/view/com/profile/ProfileFollows.tsx
+++ b/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 (
-
+
{
@{item.name}
-
+
)
}
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
new file mode 100644
index 0000000000..dcb8710f65
--- /dev/null
+++ b/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
+ 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 (
+
+ {children ? children : {title || 'link'}}
+
+ )
+})