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

View File

@ -28,7 +28,6 @@ export const CustomFeed = withAuthRequired(
[rkey, name], [rkey, name],
) )
const currentFeed = useCustomFeed(uri) const currentFeed = useCustomFeed(uri)
const pal = usePalette('default')
const scrollElRef = useRef<FlatList>(null) const scrollElRef = useRef<FlatList>(null)
const algoFeed: PostsFeedModel = useMemo(() => { const algoFeed: PostsFeedModel = useMemo(() => {
const feed = new PostsFeedModel(rootStore, 'custom', { const feed = new PostsFeedModel(rootStore, 'custom', {
@ -38,59 +37,6 @@ export const CustomFeed = withAuthRequired(
return feed return feed
}, [rootStore, uri]) }, [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 ( return (
<View style={[styles.container]}> <View style={[styles.container]}>
<ViewHeader <ViewHeader
@ -99,20 +45,76 @@ export const CustomFeed = withAuthRequired(
} }
showOnDesktop showOnDesktop
/> />
<Feed <Feed
scrollElRef={scrollElRef} scrollElRef={scrollElRef}
testID={'test-feed'} testID={'test-feed'}
key="default" key="default"
feed={algoFeed} feed={algoFeed}
headerOffset={12} headerOffset={12}
ListHeaderComponent={_ListHeaderComponent} ListHeaderComponent={() => <ListHeaderComponent uri={uri} />}
extraData={uri}
/> />
</View> </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({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,