diff --git a/src/renderer/component/fileListSearch/view.jsx b/src/renderer/component/fileListSearch/view.jsx index e77e667df..248b0045e 100644 --- a/src/renderer/component/fileListSearch/view.jsx +++ b/src/renderer/component/fileListSearch/view.jsx @@ -11,6 +11,7 @@ type Props = { isSearching: boolean, uris: ?Array, downloadUris: ?Array, + resultCount: number, }; class FileListSearch extends React.PureComponent { diff --git a/src/renderer/component/wunderbar/index.js b/src/renderer/component/wunderbar/index.js index 2332fc81a..27a617452 100644 --- a/src/renderer/component/wunderbar/index.js +++ b/src/renderer/component/wunderbar/index.js @@ -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 })), diff --git a/src/renderer/component/wunderbar/view.jsx b/src/renderer/component/wunderbar/view.jsx index 5c3917a09..cdfc38d4c 100644 --- a/src/renderer/component/wunderbar/view.jsx +++ b/src/renderer/component/wunderbar/view.jsx @@ -15,6 +15,7 @@ type Props = { suggestions: Array, doFocus: () => void, doBlur: () => void, + resultCount: number, }; class WunderBar extends React.PureComponent { @@ -45,7 +46,7 @@ class WunderBar extends React.PureComponent { } 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 { // 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 { const params = getParams(); onSubmit(uri, params); } catch (e) { - onSearch(query); + onSearch(query, resultCount); } } diff --git a/src/renderer/constants/settings.js b/src/renderer/constants/settings.js index 92e9ea543..d27c888de 100644 --- a/src/renderer/constants/settings.js +++ b/src/renderer/constants/settings.js @@ -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'; diff --git a/src/renderer/page/search/index.js b/src/renderer/page/search/index.js index f640f75f0..d47469617 100644 --- a/src/renderer/page/search/index.js +++ b/src/renderer/page/search/index.js @@ -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( diff --git a/src/renderer/page/search/view.jsx b/src/renderer/page/search/view.jsx index b28882adc..c2514a37b 100644 --- a/src/renderer/page/search/view.jsx +++ b/src/renderer/page/search/view.jsx @@ -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 { + 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 ( + + + + + + {isURIValid(query) && (
diff --git a/src/renderer/page/settings/index.js b/src/renderer/page/settings/index.js index 7230cb12d..387b0fb88 100644 --- a/src/renderer/page/settings/index.js +++ b/src/renderer/page/settings/index.js @@ -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); diff --git a/src/renderer/page/settings/view.jsx b/src/renderer/page/settings/view.jsx index 9823645de..1bed3cf47 100644 --- a/src/renderer/page/settings/view.jsx +++ b/src/renderer/page/settings/view.jsx @@ -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, getThemes: () => void, daemonSettings: DaemonSettings, showNsfw: boolean, instantPurchaseEnabled: boolean, instantPurchaseMax: Price, - showUnavailable: boolean, currentTheme: string, themes: Array, automaticDarkModeEnabled: boolean, @@ -50,7 +49,6 @@ class SettingsPage extends React.PureComponent { (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 { 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 { showNsfw, instantPurchaseEnabled, instantPurchaseMax, - showUnavailable, currentTheme, themes, automaticDarkModeEnabled, @@ -253,13 +246,6 @@ class SettingsPage extends React.PureComponent { checked={autoplay} postfix={__('Autoplay media files')} /> -