diff options
Diffstat (limited to 'src/view/com/posts/FeedItem.tsx')
| -rw-r--r-- | src/view/com/posts/FeedItem.tsx | 241 |
1 files changed, 104 insertions, 137 deletions
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 2feb71a98..e66858ff6 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -8,6 +8,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FeedItemModel} from '../../../state/models/feed-view' import {Link} from '../util/Link' 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' @@ -90,128 +91,123 @@ export const FeedItem = observer(function FeedItem({ return <View /> } + const isChild = + item._isThreadChild || + (!item.repostedBy && !item.trendedBy && item.additionalParentPost?.thread) const outerStyles = [ styles.outer, - item._isThreadChild ? styles.outerNoTop : undefined, + isChild ? styles.outerNoTop : undefined, item._isThreadParent ? styles.outerNoBottom : undefined, ] return ( - <Link style={outerStyles} href={itemHref} title={itemTitle}> - {item._isThreadChild && <View style={styles.topReplyLine} />} - {item._isThreadParent && ( - <View - style={[ - styles.bottomReplyLine, - item._isThreadChild ? styles.bottomReplyLineSmallAvi : undefined, - ]} + <> + {isChild && item.additionalParentPost?.thread ? ( + <Post + uri={item.additionalParentPost.thread.uri} + initView={item.additionalParentPost} + showReplyLine + style={{marginTop: 2}} /> - )} - {item.repostedBy && ( - <Link - style={styles.includeReason} - href={`/profile/${item.repostedBy.handle}`} - title={item.repostedBy.displayName || item.repostedBy.handle}> - <FontAwesomeIcon icon="retweet" style={styles.includeReasonIcon} /> - <Text style={[s.gray4, s.bold, s.f13]}> - Reposted by {item.repostedBy.displayName || item.repostedBy.handle} - </Text> - </Link> - )} - {item.trendedBy && ( - <Link - style={styles.includeReason} - href={`/profile/${item.trendedBy.handle}`} - title={item.trendedBy.displayName || item.trendedBy.handle}> - <FontAwesomeIcon - icon="arrow-trend-up" - style={styles.includeReasonIcon} + ) : undefined} + <Link style={outerStyles} href={itemHref} title={itemTitle}> + {isChild && <View style={styles.topReplyLine} />} + {item._isThreadParent && ( + <View + style={[ + styles.bottomReplyLine, + item._isThreadChild ? styles.bottomReplyLineSmallAvi : undefined, + ]} /> - <Text style={[s.gray4, s.bold, s.f13]}> - Trending with {item.trendedBy.displayName || item.trendedBy.handle} - </Text> - </Link> - )} - {item.additionalParentPost ? ( - <View style={styles.replyingTo}> - <View style={styles.replyingToLine} /> - <View style={styles.replyingToAvatar}> - <UserAvatar - handle={item.additionalParentPost?.thread?.author.handle} - displayName={ - item.additionalParentPost?.thread?.author.displayName - } - avatar={item.additionalParentPost?.thread?.author.avatar} - size={32} - /> - </View> - <View style={styles.replyingToTextContainer}> - <Text style={styles.replyingToText} numberOfLines={2}> - {item.additionalParentPost?.thread?.record.text} + )} + {item.repostedBy && ( + <Link + style={styles.includeReason} + href={`/profile/${item.repostedBy.handle}`} + title={item.repostedBy.displayName || item.repostedBy.handle}> + <FontAwesomeIcon icon="retweet" style={styles.includeReasonIcon} /> + <Text style={[s.gray4, s.bold, s.f13]}> + Reposted by{' '} + {item.repostedBy.displayName || item.repostedBy.handle} </Text> - </View> - </View> - ) : undefined} - <View style={styles.layout}> - <View style={styles.layoutAvi}> + </Link> + )} + {item.trendedBy && ( <Link - href={authorHref} - title={item.author.handle} - style={item._isThreadChild ? {marginLeft: 10} : undefined}> - <UserAvatar - size={item._isThreadChild ? 30 : 52} - displayName={item.author.displayName} - handle={item.author.handle} - avatar={item.author.avatar} + style={styles.includeReason} + href={`/profile/${item.trendedBy.handle}`} + title={item.trendedBy.displayName || item.trendedBy.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} + </Text> </Link> - </View> - <View style={styles.layoutContent}> - {!item._isThreadChild ? ( - <PostMeta - itemHref={itemHref} - itemTitle={itemTitle} - authorHref={authorHref} - authorHandle={item.author.handle} - authorDisplayName={item.author.displayName} - timestamp={item.indexedAt} - isAuthor={item.author.did === store.me.did} - onCopyPostText={onCopyPostText} - onDeletePost={onDeletePost} - /> - ) : undefined} - {!item._isThreadChild && replyHref !== '' && ( - <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}> - <Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text> - <Link href={replyHref} title="Parent post"> - <UserInfoText - did={replyAuthorDid} - style={[s.f15, s.blue3]} - prefix="@" - /> - </Link> + )} + <View style={styles.layout}> + <View style={styles.layoutAvi}> + <Link + href={authorHref} + title={item.author.handle} + style={item._isThreadChild ? {marginLeft: 10} : undefined}> + <UserAvatar + size={item._isThreadChild ? 30 : 52} + displayName={item.author.displayName} + handle={item.author.handle} + avatar={item.author.avatar} + /> + </Link> + </View> + <View style={styles.layoutContent}> + {!item._isThreadChild ? ( + <PostMeta + itemHref={itemHref} + itemTitle={itemTitle} + authorHref={authorHref} + authorHandle={item.author.handle} + authorDisplayName={item.author.displayName} + timestamp={item.indexedAt} + isAuthor={item.author.did === store.me.did} + onCopyPostText={onCopyPostText} + onDeletePost={onDeletePost} + /> + ) : undefined} + {!item._isThreadChild && replyHref !== '' && ( + <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}> + <Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text> + <Link href={replyHref} title="Parent post"> + <UserInfoText + did={replyAuthorDid} + style={[s.f15, s.blue3]} + prefix="@" + /> + </Link> + </View> + )} + <View style={styles.postTextContainer}> + <RichText + text={record.text} + entities={record.entities} + style={styles.postText} + /> </View> - )} - <View style={styles.postTextContainer}> - <RichText - text={record.text} - entities={record.entities} - style={styles.postText} + <PostEmbeds embed={item.embed} style={{marginBottom: 10}} /> + <PostCtrls + replyCount={item.replyCount} + repostCount={item.repostCount} + upvoteCount={item.upvoteCount} + isReposted={!!item.myState.repost} + isUpvoted={!!item.myState.upvote} + onPressReply={onPressReply} + onPressToggleRepost={onPressToggleRepost} + onPressToggleUpvote={onPressToggleUpvote} /> </View> - <PostEmbeds embed={item.embed} style={{marginBottom: 10}} /> - <PostCtrls - replyCount={item.replyCount} - repostCount={item.repostCount} - upvoteCount={item.upvoteCount} - isReposted={!!item.myState.repost} - isUpvoted={!!item.myState.upvote} - onPressReply={onPressReply} - onPressToggleRepost={onPressToggleRepost} - onPressToggleUpvote={onPressToggleUpvote} - /> </View> - </View> - </Link> + </Link> + </> ) }) @@ -224,7 +220,7 @@ const styles = StyleSheet.create({ padding: 10, }, outerNoTop: { - marginTop: 1, + marginTop: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0, }, @@ -260,35 +256,6 @@ const styles = StyleSheet.create({ marginRight: 4, color: colors.gray4, }, - replyingToLine: { - position: 'absolute', - left: 24, - bottom: -1 * REPLYING_TO_LINE_LENGTH + 6, - height: REPLYING_TO_LINE_LENGTH, - borderLeftWidth: 2, - borderLeftColor: colors.gray2, - }, - replyingTo: { - flexDirection: 'row', - backgroundColor: colors.white, - paddingBottom: 8, - paddingRight: 24, - }, - replyingToAvatar: { - marginLeft: 9, - marginRight: 19, - marginTop: 1, - }, - replyingToTextContainer: { - flex: 1, - flexDirection: 'row', - height: 34, - alignItems: 'center', - }, - replyingToText: { - flex: 1, - color: colors.gray5, - }, layout: { flexDirection: 'row', }, |