[APP-708] Onboarding revamp (#939)

* Move Discover New Feeds button to the top of the MultiFeed

* add discover custom feeds to empty following page
zio/stable
Ansh 2023-07-02 19:30:02 +01:00 committed by GitHub
parent 2be2498940
commit 7ee7d968e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 4 deletions

View File

@ -19,7 +19,7 @@ export class FoafsModel {
isLoading = false isLoading = false
hasData = false hasData = false
sources: string[] = [] sources: string[] = []
foafs: Map<string, ProfileViewFollows> = new Map() foafs: Map<string, ProfileViewFollows> = new Map() // FOAF stands for Friend of a Friend
popular: RefWithInfoAndFollowers[] = [] popular: RefWithInfoAndFollowers[] = []
constructor(public rootStore: RootStoreModel) { constructor(public rootStore: RootStoreModel) {

View File

@ -27,6 +27,10 @@ export function FollowingEmptyState() {
} }
}, [navigation]) }, [navigation])
const onPressDiscoverFeeds = React.useCallback(() => {
navigation.navigate('DiscoverFeeds')
}, [navigation])
return ( return (
<View style={styles.emptyContainer}> <View style={styles.emptyContainer}>
<View style={styles.emptyIconContainer}> <View style={styles.emptyIconContainer}>
@ -48,6 +52,23 @@ export function FollowingEmptyState() {
size={14} size={14}
/> />
</Button> </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>
) )
} }

View File

@ -142,7 +142,7 @@ export const MultiFeed = observer(function Feed({
[showPostFollowBtn, pal], [showPostFollowBtn, pal],
) )
const FeedFooter = React.useCallback( const ListFooter = React.useCallback(
() => () =>
multifeed.isLoading && !isRefreshing ? ( multifeed.isLoading && !isRefreshing ? (
<View style={styles.loadMore}> <View style={styles.loadMore}>
@ -154,6 +154,17 @@ export const MultiFeed = observer(function Feed({
[multifeed.isLoading, isRefreshing, pal], [multifeed.isLoading, isRefreshing, pal],
) )
const ListHeader = React.useCallback(() => {
return (
<Link style={[styles.footerLink, pal.viewLight]} href="/search/feeds">
<FontAwesomeIcon icon="search" size={18} color={pal.colors.text} />
<Text type="xl-medium" style={pal.text}>
Discover new feeds
</Text>
</Link>
)
}, [pal])
return ( return (
<View testID={testID} style={style}> <View testID={testID} style={style}>
{multifeed.items.length > 0 && ( {multifeed.items.length > 0 && (
@ -163,7 +174,8 @@ export const MultiFeed = observer(function Feed({
data={multifeed.items} data={multifeed.items}
keyExtractor={item => item._reactKey} keyExtractor={item => item._reactKey}
renderItem={renderItem} renderItem={renderItem}
ListFooterComponent={FeedFooter} ListFooterComponent={ListFooter}
ListHeaderComponent={ListHeader}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={isRefreshing} refreshing={isRefreshing}
@ -237,7 +249,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 14, paddingHorizontal: 14,
paddingVertical: 12, paddingVertical: 12,
marginHorizontal: 8, marginHorizontal: 8,
marginBottom: 8, marginVertical: 8,
gap: 8, gap: 8,
}, },
loadMore: { loadMore: {