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,
expanded: boolean,
toggleSearchExpanded: () => void,
onSearchOptionsChanged: (string) => void,
};
const SearchOptions = (props: Props) => {
const { options, simple, setSearchOption, expanded, toggleSearchExpanded } = props;
const { options, simple, setSearchOption, expanded, toggleSearchExpanded, onSearchOptionsChanged } = props;
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) {
return (
<tr>
@ -116,7 +124,7 @@ const SearchOptions = (props: Props) => {
'close-button--visible': options[SEARCH_OPTIONS.CLAIM_TYPE] !== SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS,
})}
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 className="media-types">
@ -132,7 +140,7 @@ const SearchOptions = (props: Props) => {
disabled={options[SEARCH_OPTIONS.CLAIM_TYPE] !== SEARCH_OPTIONS.INCLUDE_FILES}
label={t[1]}
checked={!isFilteringByChannel && options[option]}
onChange={() => setSearchOption(option, !options[option])}
onChange={() => updateSearchOptions(option, !options[option])}
/>
);
})}
@ -147,7 +155,7 @@ const SearchOptions = (props: Props) => {
type="checkbox"
name="exact-match"
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')}
/>
<Icon
@ -169,7 +177,7 @@ const SearchOptions = (props: Props) => {
type="select"
name="upload-date"
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}
>
{OBJ_TO_OPTION_ELEM(TIME_FILTER)}
@ -180,7 +188,7 @@ const SearchOptions = (props: Props) => {
'close-button--visible': options[SEARCH_OPTIONS.TIME_FILTER] !== '',
})}
icon={ICONS.REMOVE}
onClick={() => setSearchOption(SEARCH_OPTIONS.TIME_FILTER, '')}
onClick={() => updateSearchOptions(SEARCH_OPTIONS.TIME_FILTER, '')}
/>
</div>
);
@ -192,7 +200,7 @@ const SearchOptions = (props: Props) => {
name="sort-by"
blockWrap={false}
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)}
</FormField>

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

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