moved search settings to the search page.

This commit is contained in:
Mark Beamer Jr 2018-06-20 19:08:51 -04:00 committed by Sean Yesmunt
parent 78055ad0d1
commit 78ab2a795b
4 changed files with 50 additions and 39 deletions

View file

@ -1,16 +1,22 @@
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 { makeSelectClientSetting } from 'redux/selectors/settings';
import SearchPage from './view';
const select = 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 => ({
navigate: path => dispatch(doNavigate(path)),
updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)),
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
});
export default connect(

View file

@ -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 = 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={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) && (
<React.Fragment>
<div className="file-list__header">

View file

@ -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),
@ -27,7 +26,6 @@ const select = state => ({
languages: selectLanguages(state),
automaticDarkModeEnabled: makeSelectClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED)(state),
autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
resultCount: makeSelectClientSetting(settings.RESULT_COUNT)(state),
});
const perform = dispatch => ({

View file

@ -27,12 +27,10 @@ type Props = {
showNsfw: boolean,
instantPurchaseEnabled: boolean,
instantPurchaseMax: Price,
showUnavailable: boolean,
currentTheme: string,
themes: Array<string>,
automaticDarkModeEnabled: boolean,
autoplay: boolean,
resultCount: number,
};
type State = {
@ -51,14 +49,12 @@ 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);
(this: any).onAutoplayChange = this.onAutoplayChange.bind(this);
(this: any).clearCache = this.clearCache.bind(this);
// (this: any).onLanguageChange = this.onLanguageChange.bind(this)
(this: any).onSearchResultCountChange = this.onSearchResultCountChange.bind(this);
}
componentDidMount() {
@ -115,15 +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);
}
onSearchResultCountChange(event: SyntheticInputEvent<*>) {
const count = event.target.value;
this.props.setClientSetting(settings.RESULT_COUNT, count);
}
setDaemonSetting(name: string, value: boolean | string | Price) {
this.props.setDaemonSetting(name, value);
}
@ -147,12 +134,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
showNsfw,
instantPurchaseEnabled,
instantPurchaseMax,
showUnavailable,
currentTheme,
themes,
automaticDarkModeEnabled,
autoplay,
resultCount,
} = this.props;
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
@ -272,25 +257,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
)}
/>
</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">
<div className="card__title">{__('Share Diagnostic Data')}</div>
<FormField