From 68351aa12faed79861c2f8002bd537f1097acf2f Mon Sep 17 00:00:00 2001 From: robo <30987265+Robonau@users.noreply.github.com> Date: Fri, 4 Mar 2022 21:48:33 +0000 Subject: [PATCH] Source filter scroll fix (array of filters on submit) (#149) * scrolling filters issue fix scrolling after changing filters and not submitting works properly now * fixed it wasn't something i introduced just then, just forgot to fix * source filters array on submit --- src/components/source/SourceOptions.tsx | 25 +++++++++--- .../source/filters/CheckBoxFilter.tsx | 7 +++- src/components/source/filters/GroupFilter.tsx | 3 ++ .../source/filters/SelectFilter.tsx | 16 +++++++- src/components/source/filters/SortFilter.tsx | 7 +++- src/components/source/filters/TextFilter.tsx | 11 +++-- .../source/filters/TriStateFilter.tsx | 9 ++++- src/screens/SourceMangas.tsx | 40 ++++++++++--------- 8 files changed, 86 insertions(+), 32 deletions(-) diff --git a/src/components/source/SourceOptions.tsx b/src/components/source/SourceOptions.tsx index 0a1e0043..3456378f 100644 --- a/src/components/source/SourceOptions.tsx +++ b/src/components/source/SourceOptions.tsx @@ -27,6 +27,7 @@ interface IFilters { sourceFilter: ISourceFilters[] updateFilterValue: Function group: number | undefined + update: any } interface IFilters1 { @@ -35,26 +36,33 @@ interface IFilters1 { resetFilterValue: Function setTriggerUpdate: Function setSearch: Function + update: any } export function Options({ sourceFilter, group, updateFilterValue, + update, }: IFilters) { return ( { sourceFilter.map((e: ISourceFilters, index) => { + let checkif = update.find((el: { + group: number | undefined; position: number; + }) => el.group === group && el.position === index); + checkif = checkif ? checkif.state : checkif; switch (e.type) { case 'CheckBox': return ( ); case 'Group': @@ -65,6 +73,7 @@ export function Options({ state={e.filter.state as ISourceFilters[]} position={index} updateFilterValue={updateFilterValue} + update={update} /> ); case 'Header': @@ -80,11 +89,12 @@ export function Options({ key={`filters ${e.filter.name}`} name={e.filter.name} values={e.filter.values} - state={e.filter.state as number} + state={parseInt(checkif, 10) || e.filter.state as number} selected={e.filter.selected} position={index} group={group} updateFilterValue={updateFilterValue} + update={update} /> ); case 'Separator': @@ -100,10 +110,11 @@ export function Options({ key={`filters ${e.filter.name}`} name={e.filter.name} values={e.filter.values} - state={e.filter.state as IState} + state={checkif ? JSON.parse(checkif) : e.filter.state as IState} position={index} group={group} updateFilterValue={updateFilterValue} + update={update} /> ); case 'Text': @@ -111,10 +122,11 @@ export function Options({ ); case 'TriState': @@ -122,10 +134,11 @@ export function Options({ ); default: @@ -142,6 +155,7 @@ export default function SourceOptions({ resetFilterValue, setTriggerUpdate, setSearch, + update, }: IFilters1) { const [FilterOptions, setFilterOptions] = React.useState(false); @@ -196,6 +210,7 @@ export default function SourceOptions({ sourceFilter={sourceFilter} updateFilterValue={updateFilterValue} group={undefined} + update={update} /> diff --git a/src/components/source/filters/CheckBoxFilter.tsx b/src/components/source/filters/CheckBoxFilter.tsx index 00d9eba0..1c405c95 100644 --- a/src/components/source/filters/CheckBoxFilter.tsx +++ b/src/components/source/filters/CheckBoxFilter.tsx @@ -15,6 +15,7 @@ interface Props { position: number group: number | undefined updateFilterValue: Function + update: any } export default function CheckBoxFilter(props: Props) { @@ -24,12 +25,16 @@ export default function CheckBoxFilter(props: Props) { position, group, updateFilterValue, + update, } = props; const [val, setval] = React.useState(state); const handleChange = (event: { target: { name: any; checked: any; }; }) => { setval(event.target.checked); - updateFilterValue({ position, state: event.target.checked.toString(), group }); + const upd = update.filter((e: { + position: number; group: number | undefined; + }) => !(position === e.position && group === e.group)); + updateFilterValue([...upd, { position, state: event.target.checked.toString(), group }]); }; if (state !== undefined) { diff --git a/src/components/source/filters/GroupFilter.tsx b/src/components/source/filters/GroupFilter.tsx index a2f3fe6d..d6c10477 100644 --- a/src/components/source/filters/GroupFilter.tsx +++ b/src/components/source/filters/GroupFilter.tsx @@ -18,6 +18,7 @@ interface Props { name: string position: number updateFilterValue: Function + update: any } export default function GroupFilter(props: Props) { @@ -26,6 +27,7 @@ export default function GroupFilter(props: Props) { name, position, updateFilterValue, + update, } = props; const [open, setOpen] = React.useState(false); @@ -46,6 +48,7 @@ export default function GroupFilter(props: Props) { sourceFilter={state} group={position} updateFilterValue={updateFilterValue} + update={update} /> diff --git a/src/components/source/filters/SelectFilter.tsx b/src/components/source/filters/SelectFilter.tsx index 046326fe..5e8e0c08 100644 --- a/src/components/source/filters/SelectFilter.tsx +++ b/src/components/source/filters/SelectFilter.tsx @@ -21,6 +21,7 @@ interface Props { position: number updateFilterValue: Function group: number | undefined + update: any } interface Selected { @@ -35,6 +36,7 @@ function hasSelect( state: number, position: number, updateFilterValue: Function, + update: any, group?: number, ) { const [val, setval] = React.useState(state); @@ -42,7 +44,10 @@ function hasSelect( const handleChange = (event: { target: { name: any; value: any; }; }) => { const vall = values.map((e) => e.displayname).indexOf(`${event.target.value}`); setval(vall); - updateFilterValue({ position, state: vall.toString(), group }); + const upd = update.filter((e: { + position: number; group: number | undefined; + }) => !(position === e.position && group === e.group)); + updateFilterValue([...upd, { position, state: vall.toString(), group }]); }; const rett = values.map((e: Selected) => ( @@ -84,6 +89,7 @@ function noSelect( state: number, position: number, updateFilterValue: Function, + update: any, group?: number, ) { const [val, setval] = React.useState(state); @@ -92,7 +98,10 @@ function noSelect( const handleChange = (event: { target: { name: any; value: any; }; }) => { const vall = values.indexOf(`${event.target.value}`); setval(vall); - updateFilterValue({ position, state: vall.toString(), group }); + const upd = update.filter((e: { + position: number; group: number | undefined; + }) => !(position === e.position && group === e.group)); + updateFilterValue([...upd, { position, state: vall.toString(), group }]); }; const rett = values.map((value: string) => ({value})); @@ -126,6 +135,7 @@ export default function SelectFilter({ selected, position, updateFilterValue, + update, group, }: Props) { if (selected === undefined) { @@ -135,6 +145,7 @@ export default function SelectFilter({ state, position, updateFilterValue, + update, group, ); } @@ -145,6 +156,7 @@ export default function SelectFilter({ state, position, updateFilterValue, + update, group, ); } diff --git a/src/components/source/filters/SortFilter.tsx b/src/components/source/filters/SortFilter.tsx index 4c26a467..b9626706 100644 --- a/src/components/source/filters/SortFilter.tsx +++ b/src/components/source/filters/SortFilter.tsx @@ -25,6 +25,7 @@ interface Props { position: number group: number | undefined updateFilterValue: Function + update: any } export default function SortFilter(props: Props) { @@ -35,6 +36,7 @@ export default function SortFilter(props: Props) { position, group, updateFilterValue, + update, } = props; const [val, setval] = React.useState(state); @@ -55,7 +57,10 @@ export default function SortFilter(props: Props) { } tmp.index = index; setval(tmp); - updateFilterValue({ position, state: JSON.stringify(tmp), group }); + const upd = update.filter((e: { + position: number; group: number | undefined; + }) => !(position === e.position && group === e.group)); + updateFilterValue([...upd, { position, state: JSON.stringify(tmp), group }]); }; const ret = ( diff --git a/src/components/source/filters/TextFilter.tsx b/src/components/source/filters/TextFilter.tsx index 5b478d56..14d65a9f 100644 --- a/src/components/source/filters/TextFilter.tsx +++ b/src/components/source/filters/TextFilter.tsx @@ -20,6 +20,7 @@ interface Props { position: number group: number | undefined updateFilterValue: Function + update: any } export default function TextFilter(props: Props) { @@ -29,16 +30,20 @@ export default function TextFilter(props: Props) { position, group, updateFilterValue, + update, } = props; - const [Search, setsearch] = React.useState(''); + const [Search, setsearch] = React.useState(state || ''); let typingTimer: NodeJS.Timeout; function doneTyping(e: React.ChangeEvent) { - updateFilterValue({ position, state: e.target.value === '' ? '' : e.target.value.toString(), group }); + const upd = update.filter((el: { + position: number; group: number | undefined; + }) => !(position === el.position && group === el.group)); + updateFilterValue([...upd, { position, state: e.target.value, group }]); } function handleChange(e: React.ChangeEvent) { - setsearch(e.target.value === '' ? '' : e.target.value); + setsearch(e.target.value); clearTimeout(typingTimer); typingTimer = setTimeout(() => { doneTyping(e); }, 2500); diff --git a/src/components/source/filters/TriStateFilter.tsx b/src/components/source/filters/TriStateFilter.tsx index 92418ef6..37f868af 100644 --- a/src/components/source/filters/TriStateFilter.tsx +++ b/src/components/source/filters/TriStateFilter.tsx @@ -16,6 +16,7 @@ interface Props { position: number group: number | undefined updateFilterValue: Function + update: any } export default function TriStateFilter(props: Props) { @@ -25,6 +26,7 @@ export default function TriStateFilter(props: Props) { position, group, updateFilterValue, + update, } = props; const [val, setval] = React.useState({ [name]: state, @@ -40,11 +42,14 @@ export default function TriStateFilter(props: Props) { setval({ ...tmp, }); - updateFilterValue({ + const upd = update.filter((e: { + position: number; group: number | undefined; + }) => !(position === e.position && group === e.group)); + updateFilterValue([...upd, { position, state: (tmp[name] === undefined ? 0 : tmp[name]).toString(), group, - }); + }]); }; if (state !== undefined) { diff --git a/src/screens/SourceMangas.tsx b/src/screens/SourceMangas.tsx index 0c56d1c1..d02b9085 100644 --- a/src/screens/SourceMangas.tsx +++ b/src/screens/SourceMangas.tsx @@ -36,7 +36,7 @@ export default function SourceMangas(props: { popular: boolean }) { const [Search, setSearch] = useState(); const [query, setquery] = useQueryParam('query', StringParam); const [reset, setReset] = React.useState(2); - const [update, setUpdate] = React.useState(); + const [update, setUpdate] = useState([]); const [triggerUpdate, setTriggerUpdate] = useState(2); const [Data, SetData] = useState(); @@ -72,31 +72,34 @@ export default function SourceMangas(props: { popular: boolean }) { setTriggerUpdate(1); return; } - setFetched(false); - setMangas([]); - setLastPageNum(0); - if (Noreset === undefined && Search) { setNoreset(null); } - }, [triggerUpdate]); - - useEffect(() => { - if (update !== undefined) { - const { position, state, group }: IPos = update; + if (update.length > 0) { + const rep = update; + setUpdate([]); client.post(`/api/v1/source/${sourceId}/filters`, - JSON.stringify(group === undefined ? { - position, - state, - } : { - position: group, - state: JSON.stringify({ + rep.map((e: IPos) => { + const { position, state, group }: IPos = e; + return group === undefined ? { position, state, - }), + } : { + position: group, + state: JSON.stringify({ + position, + state, + }), + }; })) .then(() => { + setTriggerUpdate(0); makeFilters(); }); + } else { + setFetched(false); + setMangas([]); + setLastPageNum(0); + if (Noreset === undefined && Search) { setNoreset(null); } } - }, [update]); + }, [triggerUpdate]); useEffect(() => { if (reset === 0) { @@ -207,6 +210,7 @@ export default function SourceMangas(props: { popular: boolean }) { resetFilterValue={setReset} setTriggerUpdate={setTriggerUpdate} setSearch={setSearch} + update={update} /> )}