From dcead5a801cec5e7cba92ee5effb458a2940a6ba Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sun, 24 Sep 2023 22:34:37 +0200
Subject: [PATCH] Preserve selected filters on browser back navigation

---
 src/screens/SourceMangas.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

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