ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Source filter scroll fix (array of filters on submit) (#149)

Browse Source 
* 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
This commit is contained in:
robo
2022-03-04 21:48:33 +00:00
committed by GitHub
parent bdd03f6698
commit 68351aa12f
8 changed files with 86 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/source/SourceOptions.tsx
View File

@@ -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>
</>

7
src/components/source/filters/CheckBoxFilter.tsx
View File

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

3
src/components/source/filters/GroupFilter.tsx
View File

@@ -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>

16
src/components/source/filters/SelectFilter.tsx
View File

@@ -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,
);
}

7
src/components/source/filters/SortFilter.tsx
View File

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

11
src/components/source/filters/TextFilter.tsx
View File

@@ -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);

9
src/components/source/filters/TriStateFilter.tsx
View File

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

28
src/screens/SourceMangas.tsx
View File

@@ -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,17 +72,13 @@ 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 ? {
rep.map((e: IPos) => {
const { position, state, group }: IPos = e;
return group === undefined ? {
position,
state,
} : {
@@ -91,12 +87,19 @@ export default function SourceMangas(props: { popular: boolean }) {
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}
/>
)}
</>