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

Update to use new getTimeline, getAuthorFeed, and getPostThread output models

Browse source
This commit is contained in:
Paul Frazee 2022-12-20 22:54:56 -06:00
parent 4f3bf401da
commit e7d971410f
17 changed files with 706 additions and 898 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/view/com/notifications/FeedItem.tsx
View file

@ -213,7 +213,9 @@ function AdditionalPostText({
if (additionalPost.error) {
return <ErrorMessage message={additionalPost.error} />
}
return <Text style={[s.gray5]}>{additionalPost.thread?.record.text}</Text>
return (
<Text style={[s.gray5]}>{additionalPost.thread?.post.record.text}</Text>
)
}
const styles = StyleSheet.create({

17
src/view/com/post-thread/PostThread.tsx
View file

@ -1,11 +1,10 @@
import React, {useRef} from 'react'
import {observer} from 'mobx-react-lite'
import {ActivityIndicator, FlatList, Text, View} from 'react-native'
import {ActivityIndicator, FlatList, View} from 'react-native'
import {
PostThreadViewModel,
PostThreadViewPostModel,
} from '../../../state/models/post-thread-view'
import {useStores} from '../../../state'
import {PostThreadItem} from './PostThreadItem'
import {ErrorMessage} from '../util/ErrorMessage'
@ -93,14 +92,22 @@ function* flattenThread(
isAscending = false,
): Generator<PostThreadViewPostModel, void> {
if (post.parent) {
yield* flattenThread(post.parent, true)
if ('notFound' in post.parent && post.parent.notFound) {
// TODO render not found
} else {
yield* flattenThread(post.parent as PostThreadViewPostModel, true)
}
}
yield post
if (post.replies?.length) {
for (const reply of post.replies) {
yield* flattenThread(reply)
if ('notFound' in reply && reply.notFound) {
// TODO render not found
} else {
yield* flattenThread(reply as PostThreadViewPostModel)
}
}
} else if (!isAscending && !post.parent && post.replyCount > 0) {
} else if (!isAscending && !post.parent && post.post.replyCount > 0) {
post._hasMore = true
}
}

100
src/view/com/post-thread/PostThreadItem.tsx
View file

@ -32,37 +32,37 @@ export const PostThreadItem = observer(function PostThreadItem({
}) {
const store = useStores()
const [deleted, setDeleted] = useState(false)
const record = item.record as unknown as PostType.Record
const hasEngagement = item.upvoteCount || item.repostCount
const record = item.post.record as unknown as PostType.Record
const hasEngagement = item.post.upvoteCount || item.post.repostCount
const itemHref = useMemo(() => {
const urip = new AtUri(item.uri)
return `/profile/${item.author.handle}/post/${urip.rkey}`
}, [item.uri, item.author.handle])
const itemTitle = `Post by ${item.author.handle}`
const authorHref = `/profile/${item.author.handle}`
const authorTitle = item.author.handle
const urip = new AtUri(item.post.uri)
return `/profile/${item.post.author.handle}/post/${urip.rkey}`
}, [item.post.uri, item.post.author.handle])
const itemTitle = `Post by ${item.post.author.handle}`
const authorHref = `/profile/${item.post.author.handle}`
const authorTitle = item.post.author.handle
const upvotesHref = useMemo(() => {
const urip = new AtUri(item.uri)
return `/profile/${item.author.handle}/post/${urip.rkey}/upvoted-by`
}, [item.uri, item.author.handle])
const urip = new AtUri(item.post.uri)
return `/profile/${item.post.author.handle}/post/${urip.rkey}/upvoted-by`
}, [item.post.uri, item.post.author.handle])
const upvotesTitle = 'Upvotes on this post'
const repostsHref = useMemo(() => {
const urip = new AtUri(item.uri)
return `/profile/${item.author.handle}/post/${urip.rkey}/reposted-by`
}, [item.uri, item.author.handle])
const urip = new AtUri(item.post.uri)
return `/profile/${item.post.author.handle}/post/${urip.rkey}/reposted-by`
}, [item.post.uri, item.post.author.handle])
const repostsTitle = 'Reposts of this post'
const onPressReply = () => {
store.shell.openComposer({
replyTo: {
uri: item.uri,
cid: item.cid,
text: item.record.text as string,
uri: item.post.uri,
cid: item.post.cid,
text: record.text as string,
author: {
handle: item.author.handle,
displayName: item.author.displayName,
avatar: item.author.avatar,
handle: item.post.author.handle,
displayName: item.post.author.displayName,
avatar: item.post.author.avatar,
},
},
onPost: onPostReply,
@ -113,9 +113,9 @@ export const PostThreadItem = observer(function PostThreadItem({
<Link href={authorHref} title={authorTitle}>
<UserAvatar
size={50}
displayName={item.author.displayName}
handle={item.author.handle}
avatar={item.author.avatar}
displayName={item.post.author.displayName}
handle={item.post.author.handle}
avatar={item.post.author.avatar}
/>
</Link>
</View>
@ -126,18 +126,18 @@ export const PostThreadItem = observer(function PostThreadItem({
href={authorHref}
title={authorTitle}>
<Text style={[s.f16, s.bold, s.black]} numberOfLines={1}>
{item.author.displayName || item.author.handle}
{item.post.author.displayName || item.post.author.handle}
</Text>
</Link>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
&middot; {ago(item.post.indexedAt)}
</Text>
<View style={s.flex1} />
<PostDropdownBtn
style={styles.metaItem}
itemHref={itemHref}
itemTitle={itemTitle}
isAuthor={item.author.did === store.me.did}
isAuthor={item.post.author.did === store.me.did}
onCopyPostText={onCopyPostText}
onDeletePost={onDeletePost}>
<FontAwesomeIcon
@ -153,7 +153,7 @@ export const PostThreadItem = observer(function PostThreadItem({
href={authorHref}
title={authorTitle}>
<Text style={[s.f15, s.gray5]} numberOfLines={1}>
@{item.author.handle}
@{item.post.author.handle}
</Text>
</Link>
</View>
@ -173,34 +173,34 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
</View>
) : undefined}
<PostEmbeds embed={item.embed} style={s.mb10} />
<PostEmbeds embed={item.post.embed} style={s.mb10} />
{item._isHighlightedPost && hasEngagement ? (
<View style={styles.expandedInfo}>
{item.repostCount ? (
{item.post.repostCount ? (
<Link
style={styles.expandedInfoItem}
href={repostsHref}
title={repostsTitle}>
<Text style={[s.gray5, s.semiBold, s.f17]}>
<Text style={[s.bold, s.black, s.f17]}>
{item.repostCount}
{item.post.repostCount}
</Text>{' '}
{pluralize(item.repostCount, 'repost')}
{pluralize(item.post.repostCount, 'repost')}
</Text>
</Link>
) : (
<></>
)}
{item.upvoteCount ? (
{item.post.upvoteCount ? (
<Link
style={styles.expandedInfoItem}
href={upvotesHref}
title={upvotesTitle}>
<Text style={[s.gray5, s.semiBold, s.f17]}>
<Text style={[s.bold, s.black, s.f17]}>
{item.upvoteCount}
{item.post.upvoteCount}
</Text>{' '}
{pluralize(item.upvoteCount, 'upvote')}
{pluralize(item.post.upvoteCount, 'upvote')}
</Text>
</Link>
) : (
@ -213,8 +213,8 @@ export const PostThreadItem = observer(function PostThreadItem({
<View style={[s.pl10, s.pb5]}>
<PostCtrls
big
isReposted={!!item.myState.repost}
isUpvoted={!!item.myState.upvote}
isReposted={!!item.post.viewer.repost}
isUpvoted={!!item.post.viewer.upvote}
onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost}
onPressToggleUpvote={onPressToggleUpvote}
@ -234,7 +234,7 @@ export const PostThreadItem = observer(function PostThreadItem({
return (
<>
<Link style={styles.outer} href={itemHref} title={itemTitle} noFeedback>
{!item.replyingTo && item.record.reply && (
{!item.replyingTo && record.reply && (
<View style={styles.parentReplyLine} />
)}
{item.replies?.length !== 0 && <View style={styles.childReplyLine} />}
@ -259,9 +259,9 @@ export const PostThreadItem = observer(function PostThreadItem({
<Link href={authorHref} title={authorTitle}>
<UserAvatar
size={50}
displayName={item.author.displayName}
handle={item.author.handle}
avatar={item.author.avatar}
displayName={item.post.author.displayName}
handle={item.post.author.handle}
avatar={item.post.author.avatar}
/>
</Link>
</View>
@ -270,10 +270,10 @@ export const PostThreadItem = observer(function PostThreadItem({
itemHref={itemHref}
itemTitle={itemTitle}
authorHref={authorHref}
authorHandle={item.author.handle}
authorDisplayName={item.author.displayName}
timestamp={item.indexedAt}
isAuthor={item.author.did === store.me.did}
authorHandle={item.post.author.handle}
authorDisplayName={item.post.author.displayName}
timestamp={item.post.indexedAt}
isAuthor={item.post.author.did === store.me.did}
onCopyPostText={onCopyPostText}
onDeletePost={onDeletePost}
/>
@ -288,13 +288,13 @@ export const PostThreadItem = observer(function PostThreadItem({
) : (
<View style={{height: 5}} />
)}
<PostEmbeds embed={item.embed} style={{marginBottom: 10}} />
<PostEmbeds embed={item.post.embed} style={{marginBottom: 10}} />
<PostCtrls
replyCount={item.replyCount}
repostCount={item.repostCount}
upvoteCount={item.upvoteCount}
isReposted={!!item.myState.repost}
isUpvoted={!!item.myState.upvote}
replyCount={item.post.replyCount}
repostCount={item.post.repostCount}
upvoteCount={item.post.upvoteCount}
isReposted={!!item.post.viewer.repost}
isUpvoted={!!item.post.viewer.upvote}
onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost}
onPressToggleUpvote={onPressToggleUpvote}

50
src/view/com/post/Post.tsx
View file

@ -77,13 +77,13 @@ export const Post = observer(function Post({
// loaded
// =
const item = view.thread
const record = view.thread?.record as unknown as PostType.Record
const record = view.thread?.post.record as unknown as PostType.Record
const itemUrip = new AtUri(item.uri)
const itemHref = `/profile/${item.author.handle}/post/${itemUrip.rkey}`
const itemTitle = `Post by ${item.author.handle}`
const authorHref = `/profile/${item.author.handle}`
const authorTitle = item.author.handle
const itemUrip = new AtUri(item.post.uri)
const itemHref = `/profile/${item.post.author.handle}/post/${itemUrip.rkey}`
const itemTitle = `Post by ${item.post.author.handle}`
const authorHref = `/profile/${item.post.author.handle}`
const authorTitle = item.post.author.handle
let replyAuthorDid = ''
let replyHref = ''
if (record.reply) {
@ -94,13 +94,13 @@ export const Post = observer(function Post({
const onPressReply = () => {
store.shell.openComposer({
replyTo: {
uri: item.uri,
cid: item.cid,
text: item.record.text as string,
uri: item.post.uri,
cid: item.post.cid,
text: record.text as string,
author: {
handle: item.author.handle,
displayName: item.author.displayName,
avatar: item.author.avatar,
handle: item.post.author.handle,
displayName: item.post.author.displayName,
avatar: item.post.author.avatar,
},
},
})
@ -144,9 +144,9 @@ export const Post = observer(function Post({
<Link href={authorHref} title={authorTitle}>
<UserAvatar
size={52}
displayName={item.author.displayName}
handle={item.author.handle}
avatar={item.author.avatar}
displayName={item.post.author.displayName}
handle={item.post.author.handle}
avatar={item.post.author.avatar}
/>
</Link>
</View>
@ -155,10 +155,10 @@ export const Post = observer(function Post({
itemHref={itemHref}
itemTitle={itemTitle}
authorHref={authorHref}
authorHandle={item.author.handle}
authorDisplayName={item.author.displayName}
timestamp={item.indexedAt}
isAuthor={item.author.did === store.me.did}
authorHandle={item.post.author.handle}
authorDisplayName={item.post.author.displayName}
timestamp={item.post.indexedAt}
isAuthor={item.post.author.did === store.me.did}
onCopyPostText={onCopyPostText}
onDeletePost={onDeletePost}
/>
@ -186,13 +186,13 @@ export const Post = observer(function Post({
) : (
<View style={{height: 5}} />
)}
<PostEmbeds embed={item.embed} style={{marginBottom: 10}} />
<PostEmbeds embed={item.post.embed} style={{marginBottom: 10}} />
<PostCtrls
replyCount={item.replyCount}
repostCount={item.repostCount}
upvoteCount={item.upvoteCount}
isReposted={!!item.myState.repost}
isUpvoted={!!item.myState.upvote}
replyCount={item.post.replyCount}
repostCount={item.post.repostCount}
upvoteCount={item.post.upvoteCount}
isReposted={!!item.post.viewer.repost}
isUpvoted={!!item.post.viewer.upvote}
onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost}
onPressToggleUpvote={onPressToggleUpvote}

115
src/view/com/posts/FeedItem.tsx
View file

@ -10,7 +10,6 @@ import {FeedItemModel} from '../../../state/models/feed-view'
import {Link} from '../util/Link'
import {Text} from '../util/Text'
import {UserInfoText} from '../util/UserInfoText'
import {Post} from '../post/Post'
import {PostMeta} from '../util/PostMeta'
import {PostCtrls} from '../util/PostCtrls'
import {PostEmbeds} from '../util/PostEmbeds'
@ -20,22 +19,22 @@ import {UserAvatar} from '../util/UserAvatar'
import {s, colors} from '../../lib/styles'
import {useStores} from '../../../state'
const TOP_REPLY_LINE_LENGTH = 8
export const FeedItem = observer(function FeedItem({
item,
showReplyLine,
}: {
item: FeedItemModel
showReplyLine?: boolean
}) {
const store = useStores()
const [deleted, setDeleted] = useState(false)
const record = item.record as unknown as PostType.Record
const record = item.post.record as unknown as PostType.Record
const itemHref = useMemo(() => {
const urip = new AtUri(item.uri)
return `/profile/${item.author.handle}/post/${urip.rkey}`
}, [item.uri, item.author.handle])
const itemTitle = `Post by ${item.author.handle}`
const authorHref = `/profile/${item.author.handle}`
const urip = new AtUri(item.post.uri)
return `/profile/${item.post.author.handle}/post/${urip.rkey}`
}, [item.post.uri, item.post.author.handle])
const itemTitle = `Post by ${item.post.author.handle}`
const authorHref = `/profile/${item.post.author.handle}`
const replyAuthorDid = useMemo(() => {
if (!record.reply) return ''
const urip = new AtUri(record.reply.parent?.uri || record.reply.root.uri)
@ -50,13 +49,13 @@ export const FeedItem = observer(function FeedItem({
const onPressReply = () => {
store.shell.openComposer({
replyTo: {
uri: item.uri,
cid: item.cid,
text: item.record.text as string,
uri: item.post.uri,
cid: item.post.cid,
text: record.text as string,
author: {
handle: item.author.handle,
displayName: item.author.displayName,
avatar: item.author.avatar,
handle: item.post.author.handle,
displayName: item.post.author.displayName,
avatar: item.post.author.avatar,
},
},
})
@ -92,66 +91,68 @@ export const FeedItem = observer(function FeedItem({
return <View />
}
const isChild =
item._isThreadChild ||
(!item.repostedBy && !item.trendedBy && item.additionalParentPost?.thread)
const isChild = item._isThreadChild || (!item.reason && item.reply)
const isSmallTop = isChild && item._isThreadChild
const isNoTop = isChild && !item._isThreadChild
const outerStyles = [
styles.outer,
isChild
? item._isThreadChild
? styles.outerSmallTop
: styles.outerNoTop
: undefined,
isSmallTop ? styles.outerSmallTop : undefined,
isNoTop ? styles.outerNoTop : undefined,
item._isThreadParent ? styles.outerNoBottom : undefined,
]
return (
<>
{isChild && item.additionalParentPost?.thread ? (
<Post
uri={item.additionalParentPost.thread.uri}
initView={item.additionalParentPost}
showReplyLine
style={{marginTop: 2}}
/>
{isChild && !item._isThreadChild && item.replyParent ? (
<View style={{marginTop: 2}}>
<FeedItem item={item.replyParent} showReplyLine />
</View>
) : undefined}
<Link style={outerStyles} href={itemHref} title={itemTitle} noFeedback>
{isChild && <View style={[styles.topReplyLine]} />}
{item._isThreadParent && <View style={[styles.bottomReplyLine]} />}
{item.repostedBy && (
{item._isThreadChild && <View style={[styles.topReplyLine]} />}
{(showReplyLine || item._isThreadParent) && (
<View
style={[styles.bottomReplyLine, isNoTop ? {top: 64} : undefined]}
/>
)}
{item.reasonRepost && (
<Link
style={styles.includeReason}
href={`/profile/${item.repostedBy.handle}`}
title={item.repostedBy.displayName || item.repostedBy.handle}>
href={`/profile/${item.reasonRepost.by.handle}`}
title={
item.reasonRepost.by.displayName || item.reasonRepost.by.handle
}>
<FontAwesomeIcon icon="retweet" style={styles.includeReasonIcon} />
<Text style={[s.gray4, s.bold, s.f13]}>
Reposted by{' '}
{item.repostedBy.displayName || item.repostedBy.handle}
{item.reasonRepost.by.displayName || item.reasonRepost.by.handle}
</Text>
</Link>
)}
{item.trendedBy && (
{item.reasonTrend && (
<Link
style={styles.includeReason}
href={`/profile/${item.trendedBy.handle}`}
title={item.trendedBy.displayName || item.trendedBy.handle}>
href={`/profile/${item.reasonTrend.by.handle}`}
title={
item.reasonTrend.by.displayName || item.reasonTrend.by.handle
}>
<FontAwesomeIcon
icon="arrow-trend-up"
style={styles.includeReasonIcon}
/>
<Text style={[s.gray4, s.bold, s.f13]}>
Trending with{' '}
{item.trendedBy.displayName || item.trendedBy.handle}
{item.reasonTrend.by.displayName || item.reasonTrend.by.handle}
</Text>
</Link>
)}
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<Link href={authorHref} title={item.author.handle}>
<Link href={authorHref} title={item.post.author.handle}>
<UserAvatar
size={52}
displayName={item.author.displayName}
handle={item.author.handle}
avatar={item.author.avatar}
displayName={item.post.author.displayName}
handle={item.post.author.handle}
avatar={item.post.author.avatar}
/>
</Link>
</View>
@ -160,10 +161,10 @@ export const FeedItem = observer(function FeedItem({
itemHref={itemHref}
itemTitle={itemTitle}
authorHref={authorHref}
authorHandle={item.author.handle}
authorDisplayName={item.author.displayName}
timestamp={item.indexedAt}
isAuthor={item.author.did === store.me.did}
authorHandle={item.post.author.handle}
authorDisplayName={item.post.author.displayName}
timestamp={item.post.indexedAt}
isAuthor={item.post.author.did === store.me.did}
onCopyPostText={onCopyPostText}
onDeletePost={onDeletePost}
/>
@ -195,13 +196,13 @@ export const FeedItem = observer(function FeedItem({
) : (
<View style={{height: 5}} />
)}
<PostEmbeds embed={item.embed} style={styles.postEmbeds} />
<PostEmbeds embed={item.post.embed} style={styles.postEmbeds} />
<PostCtrls
replyCount={item.replyCount}
repostCount={item.repostCount}
upvoteCount={item.upvoteCount}
isReposted={!!item.myState.repost}
isUpvoted={!!item.myState.upvote}
replyCount={item.post.replyCount}
repostCount={item.post.repostCount}
upvoteCount={item.post.upvoteCount}
isReposted={!!item.post.viewer.repost}
isUpvoted={!!item.post.viewer.upvote}
onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost}
onPressToggleUpvote={onPressToggleUpvote}
@ -266,15 +267,15 @@ const styles = StyleSheet.create({
topReplyLine: {
position: 'absolute',
left: 34,
top: -1 * TOP_REPLY_LINE_LENGTH,
height: TOP_REPLY_LINE_LENGTH,
top: 0,
height: 6,
borderLeftWidth: 2,
borderLeftColor: colors.gray2,
},
bottomReplyLine: {
position: 'absolute',
left: 34,
top: 60,
top: 72,
bottom: 0,
borderLeftWidth: 2,
borderLeftColor: colors.gray2,