zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

add empty view to CustomAlgorithms screen

Browse source
This commit is contained in:
Ansh Nanda 2023-05-14 15:38:38 -07:00
parent 8948118d5c
commit 6105314f15
2 changed files with 43 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/view/com/algos/AlgoItem.tsx
View file

@ -11,6 +11,7 @@ import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
const AlgoItem = observer( const AlgoItem = observer(
({item, style}: {item: AlgoItemModel; style?: StyleProp<ViewStyle>}) => { ({item, style}: {item: AlgoItemModel; style?: StyleProp<ViewStyle>}) => {
const pal = usePalette('default') const pal = usePalette('default')
return ( return (
<View style={[styles.container, style]} key={item.data.uri}> <View style={[styles.container, style]} key={item.data.uri}>
<View style={[styles.headerContainer]}> <View style={[styles.headerContainer]}>
@ -19,7 +20,7 @@ const AlgoItem = observer(
</View> </View>
<View style={[styles.headerTextContainer]}> <View style={[styles.headerTextContainer]}>
<Text style={[pal.text, s.bold]}> <Text style={[pal.text, s.bold]}>
{item.data.displayName ?? 'Feed name'} {item.data.displayName ? item.data.displayName : 'Feed name'}
</Text> </Text>
<Text style={[pal.textLight, styles.description]}> <Text style={[pal.textLight, styles.description]}>
{item.data.description ?? {item.data.description ??

38
src/view/screens/CustomAlgorithms.tsx
View file

@ -44,18 +44,8 @@ const CustomAlgorithms = withAuthRequired(
) )
return ( return (
<CenteredView style={{flex: 1}}> <CenteredView style={[s.flex1]}>
<ViewHeader title="Custom Algorithms" showOnDesktop /> <ViewHeader title="Custom Algorithms" showOnDesktop />
{!savedFeeds.hasContent || savedFeeds.isEmpty ? (
<View style={[pal.border, !isDesktopWeb && s.flex1]}>
<View style={[pal.viewLight]}>
<Text type="lg" style={[pal.text]}>
You don't have any saved feeds. To save a feed, click the save
button when a custom feed or algorithm shows up.
</Text>
</View>
</View>
) : (
<FlatList <FlatList
style={[!isDesktopWeb && s.flex1]} style={[!isDesktopWeb && s.flex1]}
data={savedFeeds.feeds} data={savedFeeds.feeds}
@ -69,20 +59,31 @@ const CustomAlgorithms = withAuthRequired(
/> />
} }
onEndReached={() => savedFeeds.loadMore()} onEndReached={() => savedFeeds.loadMore()}
renderItem={({item}) => ( renderItem={({item}) => <AlgoItem key={item.data.uri} item={item} />}
<AlgoItem key={item.data.uri} item={item} />
)}
initialNumToRender={15} initialNumToRender={15}
ListFooterComponent={() => ( ListFooterComponent={() => (
<View style={styles.footer}> <View style={styles.footer}>
{savedFeeds.isLoading && <ActivityIndicator />} {savedFeeds.isLoading && <ActivityIndicator />}
</View> </View>
)} )}
ListEmptyComponent={() => (
<View
style={[
pal.border,
!isDesktopWeb && s.flex1,
pal.viewLight,
styles.empty,
]}>
<Text type="lg" style={[pal.text]}>
You don't have any saved feeds. To save a feed, click the save
button when a custom feed or algorithm shows up.
</Text>
</View>
)}
extraData={savedFeeds.isLoading} extraData={savedFeeds.isLoading}
// @ts-ignore our .web version only -prf // @ts-ignore our .web version only -prf
desktopFixedHeight desktopFixedHeight
/> />
)}
</CenteredView> </CenteredView>
) )
}), }),
@ -94,4 +95,11 @@ const styles = StyleSheet.create({
footer: { footer: {
paddingVertical: 20, paddingVertical: 20,
}, },
empty: {
paddingHorizontal: 20,
paddingVertical: 20,
borderRadius: 16,
marginHorizontal: 24,
marginTop: 10,
},
}) })