Just do full renders of parent posts in the feed

zio/stable
Paul Frazee 2022-12-15 11:43:05 -06:00
parent c5ac23047a
commit 356870ef60
3 changed files with 120 additions and 140 deletions

View File

@ -16,6 +16,7 @@ import {PostThreadViewModel} from '../../../state/models/post-thread-view'
import {Link} from '../util/Link'
import {UserInfoText} from '../util/UserInfoText'
import {PostMeta} from '../util/PostMeta'
import {PostEmbeds} from '../util/PostEmbeds'
import {PostCtrls} from '../util/PostCtrls'
import {RichText} from '../util/RichText'
import * as Toast from '../util/Toast'
@ -26,10 +27,12 @@ import {s, colors} from '../../lib/styles'
export const Post = observer(function Post({
uri,
initView,
showReplyLine,
style,
}: {
uri: string
initView?: PostThreadViewModel
showReplyLine?: boolean
style?: StyleProp<ViewStyle>
}) {
const store = useStores()
@ -131,11 +134,12 @@ export const Post = observer(function Post({
return (
<Link style={[styles.outer, style]} href={itemHref} title={itemTitle}>
{showReplyLine && <View style={styles.replyLine} />}
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<Link href={authorHref} title={authorTitle}>
<UserAvatar
size={50}
size={52}
displayName={item.author.displayName}
handle={item.author.handle}
avatar={item.author.avatar}
@ -174,6 +178,7 @@ export const Post = observer(function Post({
style={styles.postText}
/>
</View>
<PostEmbeds embed={item.embed} style={{marginBottom: 10}} />
<PostCtrls
replyCount={item.replyCount}
repostCount={item.repostCount}
@ -218,4 +223,12 @@ const styles = StyleSheet.create({
fontSize: 16,
lineHeight: 20.8, // 1.3 of 16px
},
replyLine: {
position: 'absolute',
left: 36,
top: 70,
bottom: 0,
borderLeftWidth: 2,
borderLeftColor: colors.gray2,
},
})

View File

@ -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}
/>
<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}
</Text>
</View>
</View>
) : undefined}
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<Link style={outerStyles} href={itemHref} title={itemTitle}>
{isChild && <View style={styles.topReplyLine} />}
{item._isThreadParent && (
<View
style={[
styles.bottomReplyLine,
item._isThreadChild ? styles.bottomReplyLineSmallAvi : undefined,
]}
/>
)}
{item.repostedBy && (
<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.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>
</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}
)}
{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}
{!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>
<Text style={[s.gray4, s.bold, s.f13]}>
Trending with{' '}
{item.trendedBy.displayName || item.trendedBy.handle}
</Text>
</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',
},

View File

@ -121,7 +121,7 @@ export function PostEmbeds({
const styles = StyleSheet.create({
imagesContainer: {
marginBottom: 20,
marginBottom: 10,
},
imagesWidthSpacer: {
width: 5,