diff options
Diffstat (limited to 'src/view/screens/ProfileFeed.tsx')
| -rw-r--r-- | src/view/screens/ProfileFeed.tsx | 163 |
1 files changed, 89 insertions, 74 deletions
diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index dcfec1166..a4d146d66 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -1,7 +1,14 @@ import React, {useMemo, useCallback} from 'react' -import {FlatList, StyleSheet, View, ActivityIndicator} from 'react-native' +import { + FlatList, + NativeScrollEvent, + StyleSheet, + View, + ActivityIndicator, +} from 'react-native' import {NativeStackScreenProps} from '@react-navigation/native-stack' import {useNavigation} from '@react-navigation/native' +import {useAnimatedScrollHandler} from 'react-native-reanimated' import {usePalette} from 'lib/hooks/usePalette' import {HeartIcon, HeartIconSolid} from 'lib/icons' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' @@ -26,7 +33,6 @@ import {EmptyState} from 'view/com/util/EmptyState' import * as Toast from 'view/com/util/Toast' import {useSetTitle} from 'lib/hooks/useSetTitle' import {useCustomFeed} from 'lib/hooks/useCustomFeed' -import {OnScrollCb} from 'lib/hooks/useOnMainScroll' import {shareUrl} from 'lib/sharing' import {toShareUrl} from 'lib/strings/url-helpers' import {Haptics} from 'lib/haptics' @@ -345,17 +351,14 @@ export const ProfileFeedScreenInner = observer( /> )} {({onScroll, headerHeight}) => ( - <ScrollView + <AboutSection + feedOwnerDid={feedOwnerDid} + feedRkey={rkey} + feedInfo={feedInfo} + headerHeight={headerHeight} + onToggleLiked={onToggleLiked} onScroll={onScroll} - scrollEventThrottle={1} - contentContainerStyle={{paddingTop: headerHeight}}> - <AboutSection - feedOwnerDid={feedOwnerDid} - feedRkey={rkey} - feedInfo={feedInfo} - onToggleLiked={onToggleLiked} - /> - </ScrollView> + /> )} </PagerWithHeader> <FAB @@ -379,7 +382,7 @@ export const ProfileFeedScreenInner = observer( interface FeedSectionProps { feed: PostsFeedModel - onScroll: OnScrollCb + onScroll: (e: NativeScrollEvent) => void headerHeight: number isScrolledDown: boolean } @@ -404,12 +407,13 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>( return <EmptyState icon="feed" message="This feed is empty!" /> }, []) + const scrollHandler = useAnimatedScrollHandler({onScroll}) return ( <View> <Feed feed={feed} scrollElRef={scrollElRef} - onScroll={onScroll} + onScroll={scrollHandler} scrollEventThrottle={5} renderEmptyState={renderPostsEmpty} headerOffset={headerHeight} @@ -430,82 +434,93 @@ const AboutSection = observer(function AboutPageImpl({ feedOwnerDid, feedRkey, feedInfo, + headerHeight, onToggleLiked, + onScroll, }: { feedOwnerDid: string feedRkey: string feedInfo: FeedSourceModel | undefined + headerHeight: number onToggleLiked: () => void + onScroll: (e: NativeScrollEvent) => void }) { const pal = usePalette('default') + const scrollHandler = useAnimatedScrollHandler({onScroll}) if (!feedInfo) { return <View /> } + return ( - <View - style={[ - { - borderTopWidth: 1, - paddingVertical: 20, - paddingHorizontal: 20, - gap: 12, - }, - pal.border, - ]}> - {feedInfo.descriptionRT ? ( - <RichText - testID="listDescription" - type="lg" - style={pal.text} - richText={feedInfo.descriptionRT} - /> - ) : ( - <Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}> - No description - </Text> - )} - <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}> - <Button - type="default" - testID="toggleLikeBtn" - accessibilityLabel="Like this feed" - accessibilityHint="" - onPress={onToggleLiked} - style={{paddingHorizontal: 10}}> - {feedInfo?.isLiked ? ( - <HeartIconSolid size={19} style={styles.liked} /> - ) : ( - <HeartIcon strokeWidth={3} size={19} style={pal.textLight} /> - )} - </Button> - {typeof feedInfo.likeCount === 'number' && ( - <TextLink - href={makeCustomFeedLink(feedOwnerDid, feedRkey, 'liked-by')} - text={`Liked by ${feedInfo.likeCount} ${pluralize( - feedInfo.likeCount, - 'user', - )}`} - style={[pal.textLight, s.semiBold]} + <ScrollView + scrollEventThrottle={1} + contentContainerStyle={{paddingTop: headerHeight}} + onScroll={scrollHandler}> + <View + style={[ + { + borderTopWidth: 1, + paddingVertical: 20, + paddingHorizontal: 20, + gap: 12, + }, + pal.border, + ]}> + {feedInfo.descriptionRT ? ( + <RichText + testID="listDescription" + type="lg" + style={pal.text} + richText={feedInfo.descriptionRT} /> - )} - </View> - <Text type="md" style={[pal.textLight]} numberOfLines={1}> - Created by{' '} - {feedInfo.isOwner ? ( - 'you' ) : ( - <TextLink - text={sanitizeHandle(feedInfo.creatorHandle, '@')} - href={makeProfileLink({ - did: feedInfo.creatorDid, - handle: feedInfo.creatorHandle, - })} - style={pal.textLight} - /> + <Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}> + No description + </Text> )} - </Text> - </View> + <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}> + <Button + type="default" + testID="toggleLikeBtn" + accessibilityLabel="Like this feed" + accessibilityHint="" + onPress={onToggleLiked} + style={{paddingHorizontal: 10}}> + {feedInfo?.isLiked ? ( + <HeartIconSolid size={19} style={styles.liked} /> + ) : ( + <HeartIcon strokeWidth={3} size={19} style={pal.textLight} /> + )} + </Button> + {typeof feedInfo.likeCount === 'number' && ( + <TextLink + href={makeCustomFeedLink(feedOwnerDid, feedRkey, 'liked-by')} + text={`Liked by ${feedInfo.likeCount} ${pluralize( + feedInfo.likeCount, + 'user', + )}`} + style={[pal.textLight, s.semiBold]} + /> + )} + </View> + <Text type="md" style={[pal.textLight]} numberOfLines={1}> + Created by{' '} + {feedInfo.isOwner ? ( + 'you' + ) : ( + <TextLink + text={sanitizeHandle(feedInfo.creatorHandle, '@')} + href={makeProfileLink({ + did: feedInfo.creatorDid, + handle: feedInfo.creatorHandle, + })} + style={pal.textLight} + /> + )} + </Text> + </View> + </ScrollView> ) }) |