zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Implement consistent Link component

zio/stable
Paul Frazee 2022-09-02 11:52:33 -05:00
parent 6835caa760
commit 2f0939a1c2
9 changed files with 177 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/view/com/feed/FeedItem.tsx
View File

@ -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 (
<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
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={item.author.name}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
</Link>
<Link
style={styles.metaItem}
href={authorHref}
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>
)
})

45
src/view/com/notifications/FeedItem.tsx
View File

@ -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}`
}
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'
}
const onPressAuthor = () => {
store.nav.navigate(`/profile/${item.author.name}`)
}
}, [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
style={[styles.metaItem, s.f14, s.bold]}
onPress={onPressAuthor}>
{item.author.displayName}
</Text>
<Link style={styles.metaItem} href={authorHref} title={authorTitle}>
<Text style={[s.f14, s.bold]}>{item.author.displayName}</Text>
</Link>
<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>
)
})

9
src/view/com/post-thread/PostLikedBy.tsx
View File

@ -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>
)
}

9
src/view/com/post-thread/PostRepostedBy.tsx
View File

@ -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>
)
}

108
src/view/com/post-thread/PostThreadItem.tsx
View File

@ -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 (
<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
style={[styles.metaItem, s.f15, s.bold]}
onPress={onPressAuthor}>
{item.author.displayName}
</Text>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<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
style={[styles.metaItem, s.f14, s.gray5]}
onPress={onPressAuthor}>
@{item.author.name}
</Text>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<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
style={[styles.expandedInfoItem, s.gray5, s.semiBold]}
onPress={onPressReposts}>
<Link
style={styles.expandedInfoItem}
href={repostsHref}
title={repostsTitle}>
<Text style={[s.gray5, s.semiBold]}>
<Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
{pluralize(item.repostCount, 'repost')}
</Text>
</Link>
) : (
<></>
)}
{item.likeCount ? (
<Text
style={[styles.expandedInfoItem, s.gray5, s.semiBold]}
onPress={onPressLikes}>
<Link
style={styles.expandedInfoItem}
href={likesHref}
title={likesTitle}>
<Text style={[s.gray5, s.semiBold]}>
<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
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>
@ -196,7 +206,7 @@ export const PostThreadItem = observer(function PostThreadItem({
<Ctrls />
</View>
</View>
</TouchableOpacity>
</Link>
)
}
})

37
src/view/com/post/Post.tsx
View File

@ -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>
)
})

10
src/view/com/profile/ProfileFollowers.tsx
View File

@ -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>
)
}

9
src/view/com/profile/ProfileFollows.tsx
View File

@ -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>
)
}

28
src/view/com/util/Link.tsx 100644
View File

@ -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>
)
})