fix re-rendering issue

zio/stable
Ansh Nanda 2023-05-16 23:45:14 -07:00
parent 1378ab46e9
commit 90adc19415
2 changed files with 61 additions and 56 deletions

View File

@ -35,6 +35,7 @@ export const Feed = observer(function Feed({
testID,
headerOffset = 0,
ListHeaderComponent,
extraData,
}: {
feed: PostsFeedModel
style?: StyleProp<ViewStyle>
@ -46,6 +47,7 @@ export const Feed = observer(function Feed({
testID?: string
headerOffset?: number
ListHeaderComponent?: () => JSX.Element
extraData?: any
}) {
const pal = usePalette('default')
const {track} = useAnalytics()
@ -182,6 +184,7 @@ export const Feed = observer(function Feed({
onEndReachedThreshold={0.6}
removeClippedSubviews={true}
contentOffset={{x: 0, y: headerOffset * -1}}
extraData={extraData}
// @ts-ignore our .web version only -prf
desktopFixedHeight
/>

View File

@ -28,7 +28,6 @@ export const CustomFeed = withAuthRequired(
[rkey, name],
)
const currentFeed = useCustomFeed(uri)
const pal = usePalette('default')
const scrollElRef = useRef<FlatList>(null)
const algoFeed: PostsFeedModel = useMemo(() => {
const feed = new PostsFeedModel(rootStore, 'custom', {
@ -38,59 +37,6 @@ export const CustomFeed = withAuthRequired(
return feed
}, [rootStore, uri])
const _ListHeaderComponent = () => {
return (
<View style={[styles.headerContainer]}>
<View style={[styles.header]}>
<View style={styles.avatarContainer}>
<UserAvatar size={28} avatar={currentFeed?.data.creator.avatar} />
<Link href={`/profile/${currentFeed?.data.creator.handle}`}>
<Text style={[pal.textLight]}>
@{currentFeed?.data.creator.handle}
</Text>
</Link>
</View>
<Text style={[pal.text]}>{currentFeed?.data.description}</Text>
</View>
<View style={[styles.buttonsContainer]}>
<Button
type={currentFeed?.isSaved ? 'default' : 'inverted'}
style={[styles.saveButton]}
onPress={() => {
if (currentFeed?.data.viewer?.saved) {
rootStore.me.savedFeeds.unsave(currentFeed!)
} else {
rootStore.me.savedFeeds.save(currentFeed!)
}
}}
label={currentFeed?.data.viewer?.saved ? 'Unsave' : 'Save'}
/>
<TouchableOpacity
accessibilityRole="button"
onPress={() => {
if (currentFeed?.isLiked) {
currentFeed?.unlike()
} else {
currentFeed?.like()
}
}}
style={[styles.likeButton, pal.viewLight]}>
<Text style={[pal.text, s.semiBold]}>
{currentFeed?.data.likeCount}
</Text>
{currentFeed?.isLiked ? (
<HeartIconSolid size={18} style={styles.liked} />
) : (
<HeartIcon strokeWidth={3} size={18} style={styles.liked} />
)}
</TouchableOpacity>
</View>
</View>
)
}
return (
<View style={[styles.container]}>
<ViewHeader
@ -99,20 +45,76 @@ export const CustomFeed = withAuthRequired(
}
showOnDesktop
/>
<Feed
scrollElRef={scrollElRef}
testID={'test-feed'}
key="default"
feed={algoFeed}
headerOffset={12}
ListHeaderComponent={_ListHeaderComponent}
ListHeaderComponent={() => <ListHeaderComponent uri={uri} />}
extraData={uri}
/>
</View>
)
}),
)
const ListHeaderComponent = observer(({uri}: {uri: string}) => {
const currentFeed = useCustomFeed(uri)
const pal = usePalette('default')
const rootStore = useStores()
return (
<View style={[styles.headerContainer]}>
<View style={[styles.header]}>
<View style={styles.avatarContainer}>
<UserAvatar size={28} avatar={currentFeed?.data.creator.avatar} />
<Link href={`/profile/${currentFeed?.data.creator.handle}`}>
<Text style={[pal.textLight]}>
@{currentFeed?.data.creator.handle}
</Text>
</Link>
</View>
<Text style={[pal.text]}>{currentFeed?.data.description}</Text>
</View>
<View style={[styles.buttonsContainer]}>
<Button
type={currentFeed?.isSaved ? 'default' : 'inverted'}
style={[styles.saveButton]}
onPress={() => {
if (currentFeed?.data.viewer?.saved) {
rootStore.me.savedFeeds.unsave(currentFeed!)
} else {
rootStore.me.savedFeeds.save(currentFeed!)
}
}}
label={currentFeed?.data.viewer?.saved ? 'Unsave' : 'Save'}
/>
<TouchableOpacity
accessibilityRole="button"
onPress={() => {
if (currentFeed?.isLiked) {
currentFeed?.unlike()
} else {
currentFeed?.like()
}
}}
style={[styles.likeButton, pal.viewLight]}>
<Text style={[pal.text, s.semiBold]}>
{currentFeed?.data.likeCount}
</Text>
{currentFeed?.isLiked ? (
<HeartIconSolid size={18} style={styles.liked} />
) : (
<HeartIcon strokeWidth={3} size={18} style={styles.liked} />
)}
</TouchableOpacity>
</View>
</View>
)
})
const styles = StyleSheet.create({
container: {
flex: 1,