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