Unverified Commit 1ce5fad8 authored by Akinwale Ariwodola's avatar Akinwale Ariwodola Committed by GitHub
Browse files

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.
parent 4690451b
......@@ -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",
......
......@@ -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)),
......
......@@ -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>
);
......
......@@ -80,6 +80,12 @@ const searchStyle = StyleSheet.create({
loading: {
position: 'absolute',
},
moreLoading: {
width: '100%',
height: 48,
alignItems: 'center',
justifyContent: 'center',
},
});
export default searchStyle;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment