Just do full renders of parent posts in the feed
parent
c5ac23047a
commit
356870ef60
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -121,7 +121,7 @@ export function PostEmbeds({
|
|||
|
||||
const styles = StyleSheet.create({
|
||||
imagesContainer: {
|
||||
marginBottom: 20,
|
||||
marginBottom: 10,
|
||||
},
|
||||
imagesWidthSpacer: {
|
||||
width: 5,
|
||||
|
|
Loading…
Reference in New Issue