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'}} + + ) +})