diff options
Diffstat (limited to 'src/view/com')
-rw-r--r-- | src/view/com/notifications/FeedItem.tsx | 4 | ||||
-rw-r--r-- | src/view/com/post-thread/PostThread.tsx | 17 | ||||
-rw-r--r-- | src/view/com/post-thread/PostThreadItem.tsx | 100 | ||||
-rw-r--r-- | src/view/com/post/Post.tsx | 50 | ||||
-rw-r--r-- | src/view/com/posts/FeedItem.tsx | 115 |
5 files changed, 148 insertions, 138 deletions
diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index de370385a..16374a9f9 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -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({ diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index 0df505a74..ecc0d48f5 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -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 } } diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 70b313ecc..c45de2cb0 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -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]}> - · {ago(item.indexedAt)} + · {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} diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 73c8bab68..e324b21db 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -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} diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index f7f702c3c..24c8f14f5 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -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, |