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

Preserve selected filters on browser back navigation

Browse Source
This commit is contained in:
schroda
2023-09-24 22:34:37 +02:00
parent 12dd973179
commit dcead5a801
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/screens/SourceMangas.tsx
View File

@@ -201,15 +201,19 @@ export default function SourceMangas() {
const { sourceId } = useParams<{ sourceId: string }>(); const { sourceId } = useParams<{ sourceId: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const { contentType: currentLocationContentType = SourceContentType.POPULAR } = const {
contentType: currentLocationContentType = SourceContentType.POPULAR,
filtersToApply: currentLocationFiltersToApply = [],
} =
useLocation<{ useLocation<{
contentType: SourceContentType; contentType: SourceContentType;
filtersToApply: IPos[];
}>().state ?? {}; }>().state ?? {};
const { options } = useLibraryOptionsContext(); const { options } = useLibraryOptionsContext();
const [query] = useQueryParam('query', StringParam); const [query] = useQueryParam('query', StringParam);
const [dialogFiltersToApply, setDialogFiltersToApply] = useState<IPos[]>([]); const [dialogFiltersToApply, setDialogFiltersToApply] = useState<IPos[]>(currentLocationFiltersToApply);
const [filtersToApply, setFiltersToApply] = useState<IPos[]>([]); const [filtersToApply, setFiltersToApply] = useState<IPos[]>(currentLocationFiltersToApply);
const searchTerm = useDebounce(query, 1000); const searchTerm = useDebounce(query, 1000);
const [resetScrollPosition, setResetScrollPosition] = useState(false); const [resetScrollPosition, setResetScrollPosition] = useState(false);
const [contentType, setContentType] = useState(currentLocationContentType); const [contentType, setContentType] = useState(currentLocationContentType);
@@ -250,6 +254,15 @@ export default function SourceMangas() {
[setContentType], [setContentType],
); );
const updateLocationFilters = useCallback(
(updatedFilters: IPos[]) => {
if (contentType === SourceContentType.FILTER) {
navigate('', { replace: true, state: { contentType, filtersToApply: updatedFilters } });
}
},
[contentType],
);
const isSearchTermAvailable = searchTerm && query?.length; const isSearchTermAvailable = searchTerm && query?.length;
const setSearchContentType = isSearchTermAvailable && contentType !== SourceContentType.SEARCH; const setSearchContentType = isSearchTermAvailable && contentType !== SourceContentType.SEARCH;
if (setSearchContentType) { if (setSearchContentType) {
@@ -272,7 +285,9 @@ export default function SourceMangas() {
const resetFilters = useCallback(async () => { const resetFilters = useCallback(async () => {
setDialogFiltersToApply([]); setDialogFiltersToApply([]);
setFiltersToApply([]); setFiltersToApply([]);
}, [sourceId]); updateLocationFilters([]);
setResetScrollPosition(true);
}, [sourceId, contentType]);
useEffect( useEffect(
() => () => { () => () => {
@@ -360,6 +375,7 @@ export default function SourceMangas() {
updateFilterValue={setDialogFiltersToApply} updateFilterValue={setDialogFiltersToApply}
setTriggerUpdate={() => { setTriggerUpdate={() => {
setFiltersToApply(dialogFiltersToApply); setFiltersToApply(dialogFiltersToApply);
updateLocationFilters(dialogFiltersToApply);
}} }}
resetFilterValue={resetFilters} resetFilterValue={resetFilters}
update={dialogFiltersToApply} update={dialogFiltersToApply}