LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Reset the search page when options changed.

Browse source
This commit is contained in:
infinite-persistence 2021-04-07 18:52:15 +08:00 committed by Sean Yesmunt
parent 8111b8d9dc
commit 72443d4d2e
2 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ui/component/searchOptions/view.jsx
View file

@ -42,10 +42,11 @@ type Props = {
simple: boolean, simple: boolean,
expanded: boolean, expanded: boolean,
toggleSearchExpanded: () => void, toggleSearchExpanded: () => void,
onSearchOptionsChanged: (string) => void,
}; };
const SearchOptions = (props: Props) => { const SearchOptions = (props: Props) => {
const { options, simple, setSearchOption, expanded, toggleSearchExpanded } = props; const { options, simple, setSearchOption, expanded, toggleSearchExpanded, onSearchOptionsChanged } = props;
const stringifiedOptions = JSON.stringify(options); const stringifiedOptions = JSON.stringify(options);
@ -67,6 +68,13 @@ const SearchOptions = (props: Props) => {
} }
}, []); }, []);
function updateSearchOptions(option, value) {
setSearchOption(option, value);
if (onSearchOptionsChanged) {
onSearchOptionsChanged(option);
}
}
function addRow(label: string, value: any) { function addRow(label: string, value: any) {
return ( return (
<tr> <tr>
@ -116,7 +124,7 @@ const SearchOptions = (props: Props) => {
'close-button--visible': options[SEARCH_OPTIONS.CLAIM_TYPE] !== SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS, 'close-button--visible': options[SEARCH_OPTIONS.CLAIM_TYPE] !== SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS,
})} })}
icon={ICONS.REMOVE} icon={ICONS.REMOVE}
onClick={() => setSearchOption(SEARCH_OPTIONS.CLAIM_TYPE, SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS)} onClick={() => updateSearchOptions(SEARCH_OPTIONS.CLAIM_TYPE, SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS)}
/> />
</div> </div>
<div className="media-types"> <div className="media-types">
@ -132,7 +140,7 @@ const SearchOptions = (props: Props) => {
disabled={options[SEARCH_OPTIONS.CLAIM_TYPE] !== SEARCH_OPTIONS.INCLUDE_FILES} disabled={options[SEARCH_OPTIONS.CLAIM_TYPE] !== SEARCH_OPTIONS.INCLUDE_FILES}
label={t[1]} label={t[1]}
checked={!isFilteringByChannel && options[option]} checked={!isFilteringByChannel && options[option]}
onChange={() => setSearchOption(option, !options[option])} onChange={() => updateSearchOptions(option, !options[option])}
/> />
); );
})} })}
@ -147,7 +155,7 @@ const SearchOptions = (props: Props) => {
type="checkbox" type="checkbox"
name="exact-match" name="exact-match"
checked={options[SEARCH_OPTIONS.EXACT]} checked={options[SEARCH_OPTIONS.EXACT]}
onChange={() => setSearchOption(SEARCH_OPTIONS.EXACT, !options[SEARCH_OPTIONS.EXACT])} onChange={() => updateSearchOptions(SEARCH_OPTIONS.EXACT, !options[SEARCH_OPTIONS.EXACT])}
label={__('Exact match')} label={__('Exact match')}
/> />
<Icon <Icon
@ -169,7 +177,7 @@ const SearchOptions = (props: Props) => {
type="select" type="select"
name="upload-date" name="upload-date"
value={options[SEARCH_OPTIONS.TIME_FILTER]} value={options[SEARCH_OPTIONS.TIME_FILTER]}
onChange={(e) => setSearchOption(SEARCH_OPTIONS.TIME_FILTER, e.target.value)} onChange={(e) => updateSearchOptions(SEARCH_OPTIONS.TIME_FILTER, e.target.value)}
blockWrap={false} blockWrap={false}
> >
{OBJ_TO_OPTION_ELEM(TIME_FILTER)} {OBJ_TO_OPTION_ELEM(TIME_FILTER)}
@ -180,7 +188,7 @@ const SearchOptions = (props: Props) => {
'close-button--visible': options[SEARCH_OPTIONS.TIME_FILTER] !== '', 'close-button--visible': options[SEARCH_OPTIONS.TIME_FILTER] !== '',
})} })}
icon={ICONS.REMOVE} icon={ICONS.REMOVE}
onClick={() => setSearchOption(SEARCH_OPTIONS.TIME_FILTER, '')} onClick={() => updateSearchOptions(SEARCH_OPTIONS.TIME_FILTER, '')}
/> />
</div> </div>
); );
@ -192,7 +200,7 @@ const SearchOptions = (props: Props) => {
name="sort-by" name="sort-by"
blockWrap={false} blockWrap={false}
value={options[SEARCH_OPTIONS.SORT]} value={options[SEARCH_OPTIONS.SORT]}
onChange={(e) => setSearchOption(SEARCH_OPTIONS.SORT, e.target.value)} onChange={(e) => updateSearchOptions(SEARCH_OPTIONS.SORT, e.target.value)}
> >
{OBJ_TO_OPTION_ELEM(SORT_BY)} {OBJ_TO_OPTION_ELEM(SORT_BY)}
</FormField> </FormField>

12
ui/page/search/view.jsx
View file

@ -100,6 +100,10 @@ export default function SearchPage(props: Props) {
} }
} }
function resetPage() {
setFrom(0);
}
return ( return (
<Page> <Page>
<section className="search"> <section className="search">
@ -114,7 +118,13 @@ export default function SearchPage(props: Props) {
// needs to be unique to indicate when a fetch is needed. // needs to be unique to indicate when a fetch is needed.
page={from + 1} page={from + 1}
pageSize={SEARCH_PAGE_SIZE} pageSize={SEARCH_PAGE_SIZE}
header={<SearchOptions simple={SIMPLE_SITE} additionalOptions={additionalOptions} />} header={
<SearchOptions
simple={SIMPLE_SITE}
additionalOptions={additionalOptions}
onSearchOptionsChanged={resetPage}
/>
}
injectedItem={ injectedItem={
SHOW_ADS && IS_WEB ? (SIMPLE_SITE ? false : !isAuthenticated && <Ads small type={'video'} />) : false SHOW_ADS && IS_WEB ? (SIMPLE_SITE ? false : !isAuthenticated && <Ads small type={'video'} />) : false
} }