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

@@ -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 (
         <Box key={`filters ${group}`}>
             { 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 (
                             <CheckBoxFilter
                                 key={`filters ${e.filter.name}`}
                                 name={e.filter.name}
-                                state={e.filter.state as boolean}
+                                state={checkif === 'false' || e.filter.state as boolean}
                                 position={index}
                                 group={group}
                                 updateFilterValue={updateFilterValue}
+                                update={update}
                             />
                         );
                     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({
                             <TextFilter
                                 key={`filters ${e.filter.name}`}
                                 name={e.filter.name}
-                                state={e.filter.state as string}
+                                state={checkif || e.filter.state as string}
                                 position={index}
                                 group={group}
                                 updateFilterValue={updateFilterValue}
+                                update={update}
                             />
                         );
                     case 'TriState':
@@ -122,10 +134,11 @@ export function Options({
                             <TriStateFilter
                                 key={`filters ${e.filter.name}`}
                                 name={e.filter.name}
-                                state={e.filter.state as number}
+                                state={parseInt(checkif, 10) || e.filter.state as number}
                                 position={index}
                                 group={group}
                                 updateFilterValue={updateFilterValue}
+                                update={update}
                             />
                         );
                     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}
                 />
             </Drawer>
         </>

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) {

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}
                     />
                 </List>
             </Collapse>

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) => (<MenuItem key={`${name} ${value}`} value={value}>{value}</MenuItem>));
@@ -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,
     );
 }

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 = (

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<HTMLInputElement>) {
-        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<HTMLInputElement>) {
-        setsearch(e.target.value === '' ? '' : e.target.value);
+        setsearch(e.target.value);
 
         clearTimeout(typingTimer);
         typingTimer = setTimeout(() => { doneTyping(e); }, 2500);

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) {

src/screens/SourceMangas.tsx

@@ -36,7 +36,7 @@ export default function SourceMangas(props: { popular: boolean }) {
     const [Search, setSearch] = useState<boolean>();
     const [query, setquery] = useQueryParam('query', StringParam);
     const [reset, setReset] = React.useState(2);
-    const [update, setUpdate] = React.useState();
+    const [update, setUpdate] = useState<IPos[]>([]);
     const [triggerUpdate, setTriggerUpdate] = useState<number>(2);
     const [Data, SetData] = useState<ISourceFilters[]>();
 
@@ -72,31 +72,34 @@ export default function SourceMangas(props: { popular: boolean }) {
             setTriggerUpdate(1);
             return;
         }
-        setFetched(false);
+        if (update.length > 0) {
-        setMangas([]);
+            const rep = update;
-        setLastPageNum(0);
+            setUpdate([]);
-        if (Noreset === undefined && Search) { setNoreset(null); }
-    }, [triggerUpdate]);
-
-    useEffect(() => {
-        if (update !== undefined) {
-            const { position, state, group }: IPos = update;
             client.post(`/api/v1/source/${sourceId}/filters`,
-                JSON.stringify(group === undefined ? {
+                rep.map((e: IPos) => {
-                    position,
+                    const { position, state, group }: IPos = e;
-                    state,
+                    return group === undefined ? {
-                } : {
-                    position: group,
-                    state: JSON.stringify({
                         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}
                 />
             )}
         </>