Fixes to the feed discovery page (#1238)
* Bump yarn.lock for... reasons * Restyle DiscoverFeeds empty state (close #1236) * Fix: maintain search state in feed discovery (close #1204) * tsconfig fixes * Tweaks to yarn.lockzio/stable
parent
7410bcd888
commit
a5981e127f
|
@ -28,7 +28,7 @@ export const DiscoverFeedsScreen = withAuthRequired(
|
||||||
const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
|
const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
|
||||||
const [query, setQuery] = React.useState<string>('')
|
const [query, setQuery] = React.useState<string>('')
|
||||||
const debouncedSearchFeeds = React.useMemo(
|
const debouncedSearchFeeds = React.useMemo(
|
||||||
() => debounce(query => feeds.search(query), 500), // debounce for 500ms
|
() => debounce(q => feeds.search(q), 500), // debounce for 500ms
|
||||||
[feeds],
|
[feeds],
|
||||||
)
|
)
|
||||||
const onChangeQuery = React.useCallback(
|
const onChangeQuery = React.useCallback(
|
||||||
|
@ -59,7 +59,9 @@ export const DiscoverFeedsScreen = withAuthRequired(
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
React.useCallback(() => {
|
React.useCallback(() => {
|
||||||
store.shell.setMinimalShellMode(false)
|
store.shell.setMinimalShellMode(false)
|
||||||
feeds.refresh()
|
if (!feeds.hasLoaded) {
|
||||||
|
feeds.refresh()
|
||||||
|
}
|
||||||
}, [store, feeds]),
|
}, [store, feeds]),
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -67,23 +69,21 @@ export const DiscoverFeedsScreen = withAuthRequired(
|
||||||
feeds.refresh()
|
feeds.refresh()
|
||||||
}, [feeds])
|
}, [feeds])
|
||||||
|
|
||||||
const renderListEmptyComponent = React.useCallback(() => {
|
const renderListEmptyComponent = () => {
|
||||||
return (
|
return (
|
||||||
<View
|
<View style={styles.empty}>
|
||||||
style={[
|
<Text type="lg" style={pal.textLight}>
|
||||||
pal.border,
|
|
||||||
!isDesktopWeb && s.flex1,
|
|
||||||
pal.viewLight,
|
|
||||||
styles.empty,
|
|
||||||
]}>
|
|
||||||
<Text type="lg" style={[pal.text]}>
|
|
||||||
{feeds.isLoading
|
{feeds.isLoading
|
||||||
? 'Loading...'
|
? isDesktopWeb
|
||||||
|
? 'Loading...'
|
||||||
|
: ''
|
||||||
|
: query
|
||||||
|
? `No results found for "${query}"`
|
||||||
: `We can't find any feeds for some reason. This is probably an error - try refreshing!`}
|
: `We can't find any feeds for some reason. This is probably an error - try refreshing!`}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}, [pal, feeds.isLoading])
|
}
|
||||||
|
|
||||||
const renderItem = React.useCallback(
|
const renderItem = React.useCallback(
|
||||||
({item}: {item: CustomFeedModel}) => (
|
({item}: {item: CustomFeedModel}) => (
|
||||||
|
@ -102,16 +102,18 @@ export const DiscoverFeedsScreen = withAuthRequired(
|
||||||
<CenteredView style={[styles.container, pal.view]}>
|
<CenteredView style={[styles.container, pal.view]}>
|
||||||
<View style={[isDesktopWeb && styles.containerDesktop, pal.border]}>
|
<View style={[isDesktopWeb && styles.containerDesktop, pal.border]}>
|
||||||
<ViewHeader title="Discover Feeds" showOnDesktop />
|
<ViewHeader title="Discover Feeds" showOnDesktop />
|
||||||
<HeaderWithInput
|
<View style={{marginTop: isDesktopWeb ? 5 : 0, marginBottom: 4}}>
|
||||||
isInputFocused={isInputFocused}
|
<HeaderWithInput
|
||||||
query={query}
|
isInputFocused={isInputFocused}
|
||||||
setIsInputFocused={setIsInputFocused}
|
query={query}
|
||||||
onChangeQuery={onChangeQuery}
|
setIsInputFocused={setIsInputFocused}
|
||||||
onPressClearQuery={onPressClearQuery}
|
onChangeQuery={onChangeQuery}
|
||||||
onPressCancelSearch={onPressCancelSearch}
|
onPressClearQuery={onPressClearQuery}
|
||||||
onSubmitQuery={onSubmitQuery}
|
onPressCancelSearch={onPressCancelSearch}
|
||||||
showMenu={false}
|
onSubmitQuery={onSubmitQuery}
|
||||||
/>
|
showMenu={false}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<FlatList
|
<FlatList
|
||||||
style={[!isDesktopWeb && s.flex1]}
|
style={[!isDesktopWeb && s.flex1]}
|
||||||
|
@ -149,10 +151,7 @@ const styles = StyleSheet.create({
|
||||||
borderRightWidth: 1,
|
borderRightWidth: 1,
|
||||||
},
|
},
|
||||||
empty: {
|
empty: {
|
||||||
paddingHorizontal: 18,
|
paddingHorizontal: 16,
|
||||||
paddingVertical: 16,
|
paddingTop: 10,
|
||||||
borderRadius: 8,
|
|
||||||
marginHorizontal: 18,
|
|
||||||
marginTop: 10,
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -2,11 +2,12 @@
|
||||||
"extends": "@tsconfig/react-native/tsconfig.json",
|
"extends": "@tsconfig/react-native/tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
|
"types": ["node"],
|
||||||
"paths": {
|
"paths": {
|
||||||
"lib/*": ["./src/lib/*"],
|
"lib/*": ["./src/lib/*"],
|
||||||
"platform/*": ["./src/platform/*"],
|
"platform/*": ["./src/platform/*"],
|
||||||
"state/*": ["./src/state/*"],
|
"state/*": ["./src/state/*"],
|
||||||
"view/*": ["./src/view/*"],
|
"view/*": ["./src/view/*"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue