fix re-rendering issue
parent
1378ab46e9
commit
90adc19415
|
@ -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
|
||||
/>
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue