allow scrolling for displaying more search results (#110)

* allow scrolling for displaying more search results
* add search page size constant
* use default page size. fix typo.
This commit is contained in:
Akinwale Ariwodola 2020-01-09 16:49:14 +01:00 committed by GitHub
parent 4690451bfe
commit 1ce5fad8c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 51 additions and 14 deletions

4
package-lock.json generated
View file

@ -7067,8 +7067,8 @@
}
},
"lbry-redux": {
"version": "github:lbryio/lbry-redux#e8f29f1c47b136669df265babb109d2488a37db0",
"from": "github:lbryio/lbry-redux#e8f29f1c47b136669df265babb109d2488a37db0",
"version": "github:lbryio/lbry-redux#c910cd2b80b165843a81fdf6ce96094429b94ec8",
"from": "github:lbryio/lbry-redux#c910cd2b80b165843a81fdf6ce96094429b94ec8",
"requires": {
"proxy-polyfill": "0.1.6",
"reselect": "^3.0.0",

View file

@ -12,7 +12,7 @@
"base-64": "^0.1.0",
"@expo/vector-icons": "^8.1.0",
"gfycat-style-urls": "^1.0.3",
"lbry-redux": "lbryio/lbry-redux#e8f29f1c47b136669df265babb109d2488a37db0",
"lbry-redux": "lbryio/lbry-redux#c910cd2b80b165843a81fdf6ce96094429b94ec8",
"lbryinc": "lbryio/lbryinc#053ca52f4f7f9bf8eb62a3581b183671a475ad1c",
"lodash": ">=4.17.11",
"merge": ">=1.2.1",

View file

@ -5,6 +5,7 @@ import {
doResolvedSearch,
doUpdateSearchQuery,
makeSelectResolvedSearchResults,
makeSelectResolvedSearchResultsLastPageReached,
makeSelectSearchUris,
selectClaimSearchByQuery,
selectIsSearching,
@ -17,20 +18,21 @@ import { selectCurrentRoute } from 'redux/selectors/drawer';
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
import SearchPage from './view';
const numSearchResults = 25;
const select = state => ({
claimSearchByQuery: selectClaimSearchByQuery(state),
currentRoute: selectCurrentRoute(state),
isSearching: selectIsSearching(state),
query: selectSearchValue(state),
resolvingUris: selectResolvingUris(state),
uris: makeSelectSearchUris(makeSelectQueryWithOptions(null, numSearchResults)(state))(state),
results: makeSelectResolvedSearchResults(makeSelectQueryWithOptions(null, numSearchResults)(state))(state),
uris: makeSelectSearchUris(makeSelectQueryWithOptions(null, Constants.DEFAULT_PAGE_SIZE)(state))(state),
results: makeSelectResolvedSearchResults(makeSelectQueryWithOptions(null, Constants.DEFAULT_PAGE_SIZE)(state))(state),
lastPageReached: makeSelectResolvedSearchResultsLastPageReached(
makeSelectQueryWithOptions(null, Constants.DEFAULT_PAGE_SIZE)(state),
)(state),
});
const perform = dispatch => ({
search: query => dispatch(doResolvedSearch(query, numSearchResults, null, false, {})),
search: (query, from) => dispatch(doResolvedSearch(query, Constants.DEFAULT_PAGE_SIZE, from, false, {})),
claimSearch: options => dispatch(doClaimSearch(options)),
updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)),
pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_SEARCH)),

View file

@ -20,9 +20,12 @@ import FloatingWalletBalance from 'component/floatingWalletBalance';
import UriBar from 'component/uriBar';
import searchStyle from 'styles/search';
const softLimit = 500;
class SearchPage extends React.PureComponent {
state = {
currentQuery: null,
currentFrom: 0,
currentUri: null,
showTagResult: false,
claimSearchRun: false,
@ -56,6 +59,7 @@ class SearchPage extends React.PureComponent {
const searchQuery = query || this.getSearchQuery();
if (searchQuery && searchQuery.trim().length > 0) {
this.setState({
currentFrom: 0,
currentQuery: searchQuery,
currentUri: isURIValid(searchQuery) ? normalizeURI(searchQuery) : null,
claimSearchOptions: null,
@ -64,7 +68,7 @@ class SearchPage extends React.PureComponent {
resultsResolved: false,
tagResultDisplayed: false,
});
search(searchQuery);
search(searchQuery, 0);
}
});
};
@ -83,12 +87,13 @@ class SearchPage extends React.PureComponent {
if (query && query.trim().length > 0 && query !== this.state.currentQuery) {
this.setState({
currentFrom: 0,
currentQuery: query,
currentUri: isURIValid(query) ? normalizeURI(query) : null,
resultsResolved: false,
tagResultDisplayed: false,
});
search(query);
search(query, 0);
}
}
@ -134,13 +139,15 @@ class SearchPage extends React.PureComponent {
const { search } = this.props;
this.setState({
currentUri: isURIValid(keywords) ? normalizeURI(keywords) : null,
currentFrom: 0,
currentQuery: keywords,
claimSearchOptions: null,
claimSearchRun: false,
showTagResult: false,
resultsResolved: false,
tagResultDisplayed: false,
});
search(keywords);
search(keywords, 0);
};
listEmptyComponent = () => {
@ -186,6 +193,21 @@ class SearchPage extends React.PureComponent {
navigation.navigate({ routeName: Constants.DRAWER_ROUTE_TAG, key: `tagPage`, params: { tag: tag.toLowerCase() } });
};
handleVerticalEndReached = () => {
// fetch more results
const { lastPageReached, results, search, isSearching } = this.props;
if (lastPageReached || (results && results.length > softLimit)) {
return;
}
if (!isSearching) {
const from = results ? results.length : 0;
this.setState({ currentFrom: from }, () => {
search(this.state.currentQuery, from);
});
}
};
render() {
const { isSearching, navigation, query, results } = this.props;
@ -193,13 +215,13 @@ class SearchPage extends React.PureComponent {
<View style={searchStyle.container}>
<UriBar value={query} navigation={navigation} onSearchSubmitted={this.handleSearchSubmitted} />
{isSearching && (
{isSearching && this.state.currentFrom === 0 && (
<View style={searchStyle.busyContainer}>
<ActivityIndicator size="large" color={Colors.NextLbryGreen} style={searchStyle.loading} />
</View>
)}
{!isSearching && (
{(!isSearching || this.state.currentFrom > 0) && (
<FlatList
extraData={this.state}
style={searchStyle.scrollContainer}
@ -207,8 +229,10 @@ class SearchPage extends React.PureComponent {
keyboardShouldPersistTaps={'handled'}
data={results}
keyExtractor={(item, index) => item.claimId}
initialNumToRender={8}
initialNumToRender={10}
maxToRenderPerBatch={20}
onEndReached={this.handleVerticalEndReached}
onEndReachedThreshold={0.2}
removeClippedSubviews
ListEmptyComponent={!isSearching ? this.listEmptyComponent() : null}
ListHeaderComponent={this.listHeaderComponent(this.state.showTagResult, this.state.currentQuery)}
@ -217,6 +241,11 @@ class SearchPage extends React.PureComponent {
)}
/>
)}
{this.state.currentFrom > 0 && isSearching && (
<View style={searchStyle.moreLoading}>
<ActivityIndicator size="small" color={Colors.NextLbryGreen} />
</View>
)}
<FloatingWalletBalance navigation={navigation} />
</View>
);

View file

@ -80,6 +80,12 @@ const searchStyle = StyleSheet.create({
loading: {
position: 'absolute',
},
moreLoading: {
width: '100%',
height: 48,
alignItems: 'center',
justifyContent: 'center',
},
});
export default searchStyle;