mirror of
https://github.com/LBRYFoundation/lbry-desktop.git
synced 2025-08-31 09:21:27 +00:00
moved search settings to the search page.
This commit is contained in:
parent
78055ad0d1
commit
78ab2a795b
4 changed files with 50 additions and 39 deletions
|
@ -1,16 +1,22 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { selectIsSearching, doUpdateSearchQuery, makeSelectCurrentParam } from 'lbry-redux';
|
import * as settings from 'constants/settings';
|
||||||
|
import { selectIsSearching, selectSearchValue, doUpdateSearchQuery } from 'lbry-redux';
|
||||||
|
import { doSetClientSetting } from 'redux/actions/settings';
|
||||||
import { doNavigate } from 'redux/actions/navigation';
|
import { doNavigate } from 'redux/actions/navigation';
|
||||||
|
import { makeSelectClientSetting } from 'redux/selectors/settings';
|
||||||
import SearchPage from './view';
|
import SearchPage from './view';
|
||||||
|
|
||||||
const select = state => ({
|
const select = state => ({
|
||||||
isSearching: selectIsSearching(state),
|
isSearching: selectIsSearching(state),
|
||||||
query: makeSelectCurrentParam('query')(state),
|
query: selectSearchValue(state),
|
||||||
|
showUnavailable: makeSelectClientSetting(settings.SHOW_UNAVAILABLE)(state),
|
||||||
|
resultCount: makeSelectClientSetting(settings.RESULT_COUNT)(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
navigate: path => dispatch(doNavigate(path)),
|
navigate: path => dispatch(doNavigate(path)),
|
||||||
updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)),
|
updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)),
|
||||||
|
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(
|
export default connect(
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
// @flow
|
// @flow
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import * as settings from 'constants/settings';
|
||||||
import { isURIValid, normalizeURI } from 'lbry-redux';
|
import { isURIValid, normalizeURI } from 'lbry-redux';
|
||||||
|
import { FormField, FormRow } from 'component/common/form';
|
||||||
import FileTile from 'component/fileTile';
|
import FileTile from 'component/fileTile';
|
||||||
import FileListSearch from 'component/fileListSearch';
|
import FileListSearch from 'component/fileListSearch';
|
||||||
import ToolTip from 'component/common/tooltip';
|
import ToolTip from 'component/common/tooltip';
|
||||||
|
@ -10,13 +12,52 @@ import * as icons from 'constants/icons';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
query: ?string,
|
query: ?string,
|
||||||
|
showUnavailable: boolean,
|
||||||
|
resultCount: number,
|
||||||
|
setClientSetting: (string, number | boolean) => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
class SearchPage extends React.PureComponent<Props> {
|
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 = event.target.value;
|
||||||
|
this.props.setClientSetting(settings.RESULT_COUNT, count);
|
||||||
|
}
|
||||||
|
|
||||||
|
onShowUnavailableChange(event: SyntheticInputEvent<*>) {
|
||||||
|
this.props.setClientSetting(settings.SHOW_UNAVAILABLE, event.target.checked);
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { query } = this.props;
|
const { query, resultCount, showUnavailable } = this.props;
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
|
<React.Fragment>
|
||||||
|
<FormRow alignRight>
|
||||||
|
<FormField
|
||||||
|
type="number"
|
||||||
|
name="result_count"
|
||||||
|
min={1}
|
||||||
|
max={1000}
|
||||||
|
value={resultCount}
|
||||||
|
onChange={this.onSearchResultCountChange}
|
||||||
|
postfix={__('returned results')}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
type="checkbox"
|
||||||
|
name="show_unavailable"
|
||||||
|
onChange={this.onShowUnavailableChange}
|
||||||
|
checked={showUnavailable}
|
||||||
|
postfix={__('Show unavailable content')}
|
||||||
|
/>
|
||||||
|
</FormRow>
|
||||||
|
</React.Fragment>
|
||||||
{isURIValid(query) && (
|
{isURIValid(query) && (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div className="file-list__header">
|
<div className="file-list__header">
|
||||||
|
|
|
@ -18,7 +18,6 @@ import SettingsPage from './view';
|
||||||
const select = state => ({
|
const select = state => ({
|
||||||
daemonSettings: selectDaemonSettings(state),
|
daemonSettings: selectDaemonSettings(state),
|
||||||
showNsfw: makeSelectClientSetting(settings.SHOW_NSFW)(state),
|
showNsfw: makeSelectClientSetting(settings.SHOW_NSFW)(state),
|
||||||
showUnavailable: makeSelectClientSetting(settings.SHOW_UNAVAILABLE)(state),
|
|
||||||
instantPurchaseEnabled: makeSelectClientSetting(settings.INSTANT_PURCHASE_ENABLED)(state),
|
instantPurchaseEnabled: makeSelectClientSetting(settings.INSTANT_PURCHASE_ENABLED)(state),
|
||||||
instantPurchaseMax: makeSelectClientSetting(settings.INSTANT_PURCHASE_MAX)(state),
|
instantPurchaseMax: makeSelectClientSetting(settings.INSTANT_PURCHASE_MAX)(state),
|
||||||
currentTheme: makeSelectClientSetting(settings.THEME)(state),
|
currentTheme: makeSelectClientSetting(settings.THEME)(state),
|
||||||
|
@ -27,7 +26,6 @@ const select = state => ({
|
||||||
languages: selectLanguages(state),
|
languages: selectLanguages(state),
|
||||||
automaticDarkModeEnabled: makeSelectClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED)(state),
|
automaticDarkModeEnabled: makeSelectClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED)(state),
|
||||||
autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
|
autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
|
||||||
resultCount: makeSelectClientSetting(settings.RESULT_COUNT)(state),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
|
|
|
@ -27,12 +27,10 @@ type Props = {
|
||||||
showNsfw: boolean,
|
showNsfw: boolean,
|
||||||
instantPurchaseEnabled: boolean,
|
instantPurchaseEnabled: boolean,
|
||||||
instantPurchaseMax: Price,
|
instantPurchaseMax: Price,
|
||||||
showUnavailable: boolean,
|
|
||||||
currentTheme: string,
|
currentTheme: string,
|
||||||
themes: Array<string>,
|
themes: Array<string>,
|
||||||
automaticDarkModeEnabled: boolean,
|
automaticDarkModeEnabled: boolean,
|
||||||
autoplay: boolean,
|
autoplay: boolean,
|
||||||
resultCount: number,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -51,14 +49,12 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
(this: any).onKeyFeeChange = this.onKeyFeeChange.bind(this);
|
(this: any).onKeyFeeChange = this.onKeyFeeChange.bind(this);
|
||||||
(this: any).onInstantPurchaseMaxChange = this.onInstantPurchaseMaxChange.bind(this);
|
(this: any).onInstantPurchaseMaxChange = this.onInstantPurchaseMaxChange.bind(this);
|
||||||
(this: any).onShowNsfwChange = this.onShowNsfwChange.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).onShareDataChange = this.onShareDataChange.bind(this);
|
||||||
(this: any).onThemeChange = this.onThemeChange.bind(this);
|
(this: any).onThemeChange = this.onThemeChange.bind(this);
|
||||||
(this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
|
(this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
|
||||||
(this: any).onAutoplayChange = this.onAutoplayChange.bind(this);
|
(this: any).onAutoplayChange = this.onAutoplayChange.bind(this);
|
||||||
(this: any).clearCache = this.clearCache.bind(this);
|
(this: any).clearCache = this.clearCache.bind(this);
|
||||||
// (this: any).onLanguageChange = this.onLanguageChange.bind(this)
|
// (this: any).onLanguageChange = this.onLanguageChange.bind(this)
|
||||||
(this: any).onSearchResultCountChange = this.onSearchResultCountChange.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -115,15 +111,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
this.props.setClientSetting(settings.SHOW_NSFW, event.target.checked);
|
this.props.setClientSetting(settings.SHOW_NSFW, event.target.checked);
|
||||||
}
|
}
|
||||||
|
|
||||||
onShowUnavailableChange(event: SyntheticInputEvent<*>) {
|
|
||||||
this.props.setClientSetting(settings.SHOW_UNAVAILABLE, event.target.checked);
|
|
||||||
}
|
|
||||||
|
|
||||||
onSearchResultCountChange(event: SyntheticInputEvent<*>) {
|
|
||||||
const count = event.target.value;
|
|
||||||
this.props.setClientSetting(settings.RESULT_COUNT, count);
|
|
||||||
}
|
|
||||||
|
|
||||||
setDaemonSetting(name: string, value: boolean | string | Price) {
|
setDaemonSetting(name: string, value: boolean | string | Price) {
|
||||||
this.props.setDaemonSetting(name, value);
|
this.props.setDaemonSetting(name, value);
|
||||||
}
|
}
|
||||||
|
@ -147,12 +134,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
showNsfw,
|
showNsfw,
|
||||||
instantPurchaseEnabled,
|
instantPurchaseEnabled,
|
||||||
instantPurchaseMax,
|
instantPurchaseMax,
|
||||||
showUnavailable,
|
|
||||||
currentTheme,
|
currentTheme,
|
||||||
themes,
|
themes,
|
||||||
automaticDarkModeEnabled,
|
automaticDarkModeEnabled,
|
||||||
autoplay,
|
autoplay,
|
||||||
resultCount,
|
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
|
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
|
||||||
|
@ -272,25 +257,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section className="card card--section">
|
|
||||||
<div className="card__title">{__('Search Settings')}</div>
|
|
||||||
<FormField
|
|
||||||
type="number"
|
|
||||||
name="result_count"
|
|
||||||
min={1}
|
|
||||||
max={1000}
|
|
||||||
value={resultCount}
|
|
||||||
onChange={this.onSearchResultCountChange}
|
|
||||||
postfix={__('The number of search results presented')}
|
|
||||||
/>
|
|
||||||
<FormField
|
|
||||||
type="checkbox"
|
|
||||||
name="show_unavailable"
|
|
||||||
onChange={this.onShowUnavailableChange}
|
|
||||||
checked={showUnavailable}
|
|
||||||
postfix={__('Show unavailable content in search results')}
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
<section className="card card--section">
|
<section className="card card--section">
|
||||||
<div className="card__title">{__('Share Diagnostic Data')}</div>
|
<div className="card__title">{__('Share Diagnostic Data')}</div>
|
||||||
<FormField
|
<FormField
|
||||||
|
|
Loading…
Add table
Reference in a new issue