Merge pull request #1639 from lbryio/search_settings
Added config setting to say how many search results you want to see
This commit is contained in:
commit
7ffeb10e03
9 changed files with 66 additions and 24 deletions
|
@ -11,6 +11,7 @@ type Props = {
|
|||
isSearching: boolean,
|
||||
uris: ?Array<string>,
|
||||
downloadUris: ?Array<string>,
|
||||
resultCount: number,
|
||||
};
|
||||
|
||||
class FileListSearch extends React.PureComponent<Props> {
|
||||
|
|
|
@ -7,6 +7,8 @@ import {
|
|||
doBlurSearchInput,
|
||||
doSearch,
|
||||
} from 'lbry-redux';
|
||||
import { makeSelectClientSetting } from 'redux/selectors/settings';
|
||||
import * as settings from 'constants/settings';
|
||||
import { doNavigate } from 'redux/actions/navigation';
|
||||
import Wunderbar from './view';
|
||||
|
||||
|
@ -21,12 +23,13 @@ const select = state => {
|
|||
return {
|
||||
...searchState,
|
||||
wunderbarValue,
|
||||
resultCount: makeSelectClientSetting(settings.RESULT_COUNT)(state),
|
||||
};
|
||||
};
|
||||
|
||||
const perform = dispatch => ({
|
||||
onSearch: query => {
|
||||
dispatch(doSearch(query, 30)); // Hard coding this for now until https://github.com/lbryio/lbry-app/pull/1639 is merged
|
||||
onSearch: (query, size) => {
|
||||
dispatch(doSearch(query, size));
|
||||
dispatch(doNavigate(`/search`, { query }));
|
||||
},
|
||||
onSubmit: (uri, extraParams) => dispatch(doNavigate('/show', { uri, ...extraParams })),
|
||||
|
|
|
@ -15,6 +15,7 @@ type Props = {
|
|||
suggestions: Array<string>,
|
||||
doFocus: () => void,
|
||||
doBlur: () => void,
|
||||
resultCount: number,
|
||||
};
|
||||
|
||||
class WunderBar extends React.PureComponent<Props> {
|
||||
|
@ -45,7 +46,7 @@ class WunderBar extends React.PureComponent<Props> {
|
|||
}
|
||||
|
||||
handleSubmit(value: string, suggestion?: { value: string, type: string }) {
|
||||
const { onSubmit, onSearch } = this.props;
|
||||
const { onSubmit, onSearch, resultCount } = this.props;
|
||||
const query = value.trim();
|
||||
const getParams = () => {
|
||||
const parts = query.split('?');
|
||||
|
@ -61,7 +62,7 @@ class WunderBar extends React.PureComponent<Props> {
|
|||
// User selected a suggestion
|
||||
if (suggestion) {
|
||||
if (suggestion.type === 'search') {
|
||||
onSearch(query);
|
||||
onSearch(query, resultCount);
|
||||
} else {
|
||||
const params = getParams();
|
||||
const uri = normalizeURI(query);
|
||||
|
@ -78,7 +79,7 @@ class WunderBar extends React.PureComponent<Props> {
|
|||
const params = getParams();
|
||||
onSubmit(uri, params);
|
||||
} catch (e) {
|
||||
onSearch(query);
|
||||
onSearch(query, resultCount);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -13,3 +13,4 @@ export const THEME = 'theme';
|
|||
export const THEMES = 'themes';
|
||||
export const AUTOMATIC_DARK_MODE_ENABLED = 'automaticDarkModeEnabled';
|
||||
export const AUTOPLAY = 'autoplay';
|
||||
export const RESULT_COUNT = 'resultCount';
|
||||
|
|
|
@ -1,16 +1,22 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { selectIsSearching, doUpdateSearchQuery, makeSelectCurrentParam } from 'lbry-redux';
|
||||
import * as settings from 'constants/settings';
|
||||
import { selectIsSearching, makeSelectCurrentParam, doUpdateSearchQuery } from 'lbry-redux';
|
||||
import { doSetClientSetting } from 'redux/actions/settings';
|
||||
import { doNavigate } from 'redux/actions/navigation';
|
||||
import { makeSelectClientSetting } from 'redux/selectors/settings';
|
||||
import SearchPage from './view';
|
||||
|
||||
const select = state => ({
|
||||
isSearching: selectIsSearching(state),
|
||||
query: makeSelectCurrentParam('query')(state),
|
||||
showUnavailable: makeSelectClientSetting(settings.SHOW_UNAVAILABLE)(state),
|
||||
resultCount: makeSelectClientSetting(settings.RESULT_COUNT)(state),
|
||||
});
|
||||
|
||||
const perform = dispatch => ({
|
||||
navigate: path => dispatch(doNavigate(path)),
|
||||
updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)),
|
||||
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
|
||||
});
|
||||
|
||||
export default connect(
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import * as settings from 'constants/settings';
|
||||
import { isURIValid, normalizeURI } from 'lbry-redux';
|
||||
import { FormField, FormRow } from 'component/common/form';
|
||||
import FileTile from 'component/fileTile';
|
||||
import FileListSearch from 'component/fileListSearch';
|
||||
import ToolTip from 'component/common/tooltip';
|
||||
|
@ -10,13 +12,52 @@ import * as icons from 'constants/icons';
|
|||
|
||||
type Props = {
|
||||
query: ?string,
|
||||
showUnavailable: boolean,
|
||||
resultCount: number,
|
||||
setClientSetting: (string, number | boolean) => void,
|
||||
};
|
||||
|
||||
class SearchPage extends React.PureComponent<Props> {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
(this: any).onShowUnavailableChange = this.onShowUnavailableChange.bind(this);
|
||||
(this: any).onSearchResultCountChange = this.onSearchResultCountChange.bind(this);
|
||||
}
|
||||
|
||||
onSearchResultCountChange(event: SyntheticInputEvent<*>) {
|
||||
const count = Number(event.target.value);
|
||||
this.props.setClientSetting(settings.RESULT_COUNT, count);
|
||||
}
|
||||
|
||||
onShowUnavailableChange(event: SyntheticInputEvent<*>) {
|
||||
this.props.setClientSetting(settings.SHOW_UNAVAILABLE, event.target.checked);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { query } = this.props;
|
||||
const { query, resultCount, showUnavailable } = this.props;
|
||||
return (
|
||||
<Page>
|
||||
<React.Fragment>
|
||||
<FormRow alignRight>
|
||||
<FormField
|
||||
type="number"
|
||||
name="result_count"
|
||||
min={10}
|
||||
max={1000}
|
||||
value={resultCount}
|
||||
onChange={this.onSearchResultCountChange}
|
||||
postfix={__('returned results')}
|
||||
/>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="show_unavailable"
|
||||
onChange={this.onShowUnavailableChange}
|
||||
checked={showUnavailable}
|
||||
postfix={__('Include unavailable content')}
|
||||
/>
|
||||
</FormRow>
|
||||
</React.Fragment>
|
||||
{isURIValid(query) && (
|
||||
<React.Fragment>
|
||||
<div className="file-list__header">
|
||||
|
|
|
@ -18,7 +18,6 @@ import SettingsPage from './view';
|
|||
const select = state => ({
|
||||
daemonSettings: selectDaemonSettings(state),
|
||||
showNsfw: makeSelectClientSetting(settings.SHOW_NSFW)(state),
|
||||
showUnavailable: makeSelectClientSetting(settings.SHOW_UNAVAILABLE)(state),
|
||||
instantPurchaseEnabled: makeSelectClientSetting(settings.INSTANT_PURCHASE_ENABLED)(state),
|
||||
instantPurchaseMax: makeSelectClientSetting(settings.INSTANT_PURCHASE_MAX)(state),
|
||||
currentTheme: makeSelectClientSetting(settings.THEME)(state),
|
||||
|
@ -37,4 +36,7 @@ const perform = dispatch => ({
|
|||
changeLanguage: newLanguage => dispatch(doChangeLanguage(newLanguage)),
|
||||
});
|
||||
|
||||
export default connect(select, perform)(SettingsPage);
|
||||
export default connect(
|
||||
select,
|
||||
perform
|
||||
)(SettingsPage);
|
||||
|
|
|
@ -20,14 +20,13 @@ type DaemonSettings = {
|
|||
|
||||
type Props = {
|
||||
setDaemonSetting: (string, boolean | string | Price) => void,
|
||||
setClientSetting: (string, boolean | string | Price) => void,
|
||||
setClientSetting: (string, boolean | string | number | Price) => void,
|
||||
clearCache: () => Promise<any>,
|
||||
getThemes: () => void,
|
||||
daemonSettings: DaemonSettings,
|
||||
showNsfw: boolean,
|
||||
instantPurchaseEnabled: boolean,
|
||||
instantPurchaseMax: Price,
|
||||
showUnavailable: boolean,
|
||||
currentTheme: string,
|
||||
themes: Array<string>,
|
||||
automaticDarkModeEnabled: boolean,
|
||||
|
@ -50,7 +49,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
|||
(this: any).onKeyFeeChange = this.onKeyFeeChange.bind(this);
|
||||
(this: any).onInstantPurchaseMaxChange = this.onInstantPurchaseMaxChange.bind(this);
|
||||
(this: any).onShowNsfwChange = this.onShowNsfwChange.bind(this);
|
||||
(this: any).onShowUnavailableChange = this.onShowUnavailableChange.bind(this);
|
||||
(this: any).onShareDataChange = this.onShareDataChange.bind(this);
|
||||
(this: any).onThemeChange = this.onThemeChange.bind(this);
|
||||
(this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
|
||||
|
@ -113,10 +111,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
|||
this.props.setClientSetting(settings.SHOW_NSFW, event.target.checked);
|
||||
}
|
||||
|
||||
onShowUnavailableChange(event: SyntheticInputEvent<*>) {
|
||||
this.props.setClientSetting(settings.SHOW_UNAVAILABLE, event.target.checked);
|
||||
}
|
||||
|
||||
setDaemonSetting(name: string, value: boolean | string | Price) {
|
||||
this.props.setDaemonSetting(name, value);
|
||||
}
|
||||
|
@ -140,7 +134,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
|||
showNsfw,
|
||||
instantPurchaseEnabled,
|
||||
instantPurchaseMax,
|
||||
showUnavailable,
|
||||
currentTheme,
|
||||
themes,
|
||||
automaticDarkModeEnabled,
|
||||
|
@ -253,13 +246,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
|||
checked={autoplay}
|
||||
postfix={__('Autoplay media files')}
|
||||
/>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="show_unavailable"
|
||||
onChange={this.onShowUnavailableChange}
|
||||
checked={showUnavailable}
|
||||
postfix={__('Show unavailable content in search results')}
|
||||
/>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="show_nsfw"
|
||||
|
|
|
@ -25,6 +25,7 @@ const defaultState = {
|
|||
themes: getLocalStorageSetting(SETTINGS.THEMES, []),
|
||||
automaticDarkModeEnabled: getLocalStorageSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false),
|
||||
autoplay: getLocalStorageSetting(SETTINGS.AUTOPLAY, false),
|
||||
resultCount: Number(getLocalStorageSetting(SETTINGS.RESULT_COUNT, 50)),
|
||||
},
|
||||
isNight: false,
|
||||
languages: {},
|
||||
|
|
Loading…
Reference in a new issue