diff options
Diffstat (limited to 'src/view/com/posts')
| -rw-r--r-- | src/view/com/posts/Feed.tsx | 8 | ||||
| -rw-r--r-- | src/view/com/posts/FollowingEmptyState.tsx | 98 | ||||
| -rw-r--r-- | src/view/com/posts/FollowingEndOfFeed.tsx | 100 |
3 files changed, 157 insertions, 49 deletions
diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index 55e69a318..b095fe07b 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -33,6 +33,7 @@ export const Feed = observer(function Feed({ onScroll, scrollEventThrottle, renderEmptyState, + renderEndOfFeed, testID, headerOffset = 0, ListHeaderComponent, @@ -45,6 +46,7 @@ export const Feed = observer(function Feed({ onScroll?: OnScrollCb scrollEventThrottle?: number renderEmptyState?: () => JSX.Element + renderEndOfFeed?: () => JSX.Element testID?: string headerOffset?: number ListHeaderComponent?: () => JSX.Element @@ -142,14 +144,16 @@ export const Feed = observer(function Feed({ const FeedFooter = React.useCallback( () => - feed.isLoading ? ( + feed.isLoadingMore ? ( <View style={styles.feedFooter}> <ActivityIndicator /> </View> + ) : !feed.hasMore && !feed.isEmpty && renderEndOfFeed ? ( + renderEndOfFeed() ) : ( <View /> ), - [feed], + [feed.isLoadingMore, feed.hasMore, feed.isEmpty, renderEndOfFeed], ) return ( diff --git a/src/view/com/posts/FollowingEmptyState.tsx b/src/view/com/posts/FollowingEmptyState.tsx index a73ffb68b..61a27e48e 100644 --- a/src/view/com/posts/FollowingEmptyState.tsx +++ b/src/view/com/posts/FollowingEmptyState.tsx @@ -28,60 +28,73 @@ export function FollowingEmptyState() { }, [navigation]) const onPressDiscoverFeeds = React.useCallback(() => { - navigation.navigate('Feeds') + if (isWeb) { + navigation.navigate('Feeds') + } else { + navigation.navigate('FeedsTab') + navigation.popToTop() + } }, [navigation]) return ( - <View style={styles.emptyContainer}> - <View style={styles.emptyIconContainer}> - <MagnifyingGlassIcon style={[styles.emptyIcon, pal.text]} size={62} /> - </View> - <Text type="xl-medium" style={[s.textCenter, pal.text]}> - Your following feed is empty! Find some accounts to follow to fix this. - </Text> - <Button - type="inverted" - style={styles.emptyBtn} - onPress={onPressFindAccounts}> - <Text type="lg-medium" style={palInverted.text}> - Find accounts to follow + <View style={styles.container}> + <View style={styles.inner}> + <View style={styles.iconContainer}> + <MagnifyingGlassIcon style={[styles.icon, pal.text]} size={62} /> + </View> + <Text type="xl-medium" style={[s.textCenter, pal.text]}> + Your following feed is empty! Follow more users to see what's + happening. </Text> - <FontAwesomeIcon - icon="angle-right" - style={palInverted.text as FontAwesomeIconStyle} - size={14} - /> - </Button> + <Button + type="inverted" + style={styles.emptyBtn} + onPress={onPressFindAccounts}> + <Text type="lg-medium" style={palInverted.text}> + Find accounts to follow + </Text> + <FontAwesomeIcon + icon="angle-right" + style={palInverted.text as FontAwesomeIconStyle} + size={14} + /> + </Button> - <Text type="xl-medium" style={[s.textCenter, pal.text, s.mt20]}> - You can also discover new Custom Feeds to follow. - </Text> - <Button - type="inverted" - style={[styles.emptyBtn, s.mt10]} - onPress={onPressDiscoverFeeds}> - <Text type="lg-medium" style={palInverted.text}> - Discover new custom feeds + <Text type="xl-medium" style={[s.textCenter, pal.text, s.mt20]}> + You can also discover new Custom Feeds to follow. </Text> - <FontAwesomeIcon - icon="angle-right" - style={palInverted.text as FontAwesomeIconStyle} - size={14} - /> - </Button> + <Button + type="inverted" + style={[styles.emptyBtn, s.mt10]} + onPress={onPressDiscoverFeeds}> + <Text type="lg-medium" style={palInverted.text}> + Discover new custom feeds + </Text> + <FontAwesomeIcon + icon="angle-right" + style={palInverted.text as FontAwesomeIconStyle} + size={14} + /> + </Button> + </View> </View> ) } const styles = StyleSheet.create({ - emptyContainer: { + container: { height: '100%', + flexDirection: 'row', + justifyContent: 'center', paddingVertical: 40, paddingHorizontal: 30, }, - emptyIconContainer: { + inner: { + maxWidth: 460, + }, + iconContainer: { marginBottom: 16, }, - emptyIcon: { + icon: { marginLeft: 'auto', marginRight: 'auto', }, @@ -94,13 +107,4 @@ const styles = StyleSheet.create({ paddingHorizontal: 24, borderRadius: 30, }, - - feedsTip: { - position: 'absolute', - left: 22, - }, - feedsTipArrow: { - marginLeft: 32, - marginTop: 8, - }, }) diff --git a/src/view/com/posts/FollowingEndOfFeed.tsx b/src/view/com/posts/FollowingEndOfFeed.tsx new file mode 100644 index 000000000..48724d8b3 --- /dev/null +++ b/src/view/com/posts/FollowingEndOfFeed.tsx @@ -0,0 +1,100 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {useNavigation} from '@react-navigation/native' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' +import {NavigationProp} from 'lib/routes/types' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {isWeb} from 'platform/detection' + +export function FollowingEndOfFeed() { + const pal = usePalette('default') + const palInverted = usePalette('inverted') + const navigation = useNavigation<NavigationProp>() + + const onPressFindAccounts = React.useCallback(() => { + if (isWeb) { + navigation.navigate('Search', {}) + } else { + navigation.navigate('SearchTab') + navigation.popToTop() + } + }, [navigation]) + + const onPressDiscoverFeeds = React.useCallback(() => { + if (isWeb) { + navigation.navigate('Feeds') + } else { + navigation.navigate('FeedsTab') + navigation.popToTop() + } + }, [navigation]) + + return ( + <View style={[styles.container, pal.border]}> + <View style={styles.inner}> + <Text type="xl-medium" style={[s.textCenter, pal.text]}> + You've reached the end of your feed! Find some more accounts to + follow. + </Text> + <Button + type="inverted" + style={styles.emptyBtn} + onPress={onPressFindAccounts}> + <Text type="lg-medium" style={palInverted.text}> + Find accounts to follow + </Text> + <FontAwesomeIcon + icon="angle-right" + style={palInverted.text as FontAwesomeIconStyle} + size={14} + /> + </Button> + + <Text type="xl-medium" style={[s.textCenter, pal.text, s.mt20]}> + You can also discover new Custom Feeds to follow. + </Text> + <Button + type="inverted" + style={[styles.emptyBtn, s.mt10]} + onPress={onPressDiscoverFeeds}> + <Text type="lg-medium" style={palInverted.text}> + Discover new custom feeds + </Text> + <FontAwesomeIcon + icon="angle-right" + style={palInverted.text as FontAwesomeIconStyle} + size={14} + /> + </Button> + </View> + </View> + ) +} +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + justifyContent: 'center', + paddingTop: 40, + paddingBottom: 80, + paddingHorizontal: 30, + borderTopWidth: 1, + }, + inner: { + maxWidth: 460, + }, + emptyBtn: { + marginVertical: 20, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingVertical: 18, + paddingHorizontal: 24, + borderRadius: 30, + }, +}) |