[APP-708] Onboarding revamp (#939)
* Move Discover New Feeds button to the top of the MultiFeed * add discover custom feeds to empty following pagezio/stable
parent
2be2498940
commit
7ee7d968e5
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
Loading…
Reference in New Issue