From 9bb9771c1d3b5a627c4afe4e3ab9337dad524d99 Mon Sep 17 00:00:00 2001
From: rithviknishad <mail@rithviknishad.dev>
Date: Mon, 25 Dec 2023 15:32:07 +0530
Subject: [PATCH] Fixes Filters Cache restore logic

---
 src/Common/hooks/useFilters.tsx | 59 ++++++++++++++++++++++-----------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/Common/hooks/useFilters.tsx b/src/Common/hooks/useFilters.tsx
index a62180c8a29..5781eaca54f 100644
--- a/src/Common/hooks/useFilters.tsx
+++ b/src/Common/hooks/useFilters.tsx
@@ -33,28 +33,24 @@ export default function useFilters({ limit = 14 }: { limit?: number }) {
     if (!hasPagination) return;
     setQueryParams(Object.assign({}, qParams, { page }), { replace: true });
   };
-  const removeFilter = (param: string) => updateQuery({ [param]: "" });
-  const removeFilters = (keys: string[]) =>
-    updateQuery(keys.reduce((acc, key) => ({ ...acc, [key]: "" }), qParams));
+  const removeFilters = (params: string[]) => {
+    setQueryParams(removeFromQuery(qParams, params));
+  };
+  const removeFilter = (param: string) => removeFilters([param]);
 
-  useEffect(() => {
-    const localFilters = JSON.parse(
-      localStorage.getItem("filters--" + window.location.pathname) || "{}"
-    );
-    const blacklistLocalFilters = ["page", "limit", "offset"];
-    const newFilters = { ...localFilters, ...qParams };
-    const filteredNewFilters = blacklistLocalFilters.reduce(
-      (acc, key) => ({ ...acc, [key]: undefined }),
-      newFilters
-    );
+  useEffect(() => updateFiltersCache(qParams), [qParams]);
 
-    localStorage.setItem(
-      "filters--" + window.location.pathname,
-      JSON.stringify(filteredNewFilters)
+  useEffect(() => {
+    const cache = getFiltersCache();
+    const qParamKeys = Object.keys(qParams);
+    const canSkip = Object.keys(cache).every(
+      (key) => qParamKeys.includes(key) && qParams[key] === cache[key]
     );
-
-    updateQuery(newFilters);
-  }, [qParams]);
+    if (canSkip) return;
+    if (Object.keys(cache).length) {
+      setQueryParams(cache);
+    }
+  }, []);
 
   const FilterBadge = ({ name, value, paramKey }: FilterBadgeProps) => {
     if (Array.isArray(paramKey))
@@ -174,7 +170,8 @@ export default function useFilters({ limit = 14 }: { limit?: number }) {
             id="clear-all-filters"
             className="rounded-full border border-gray-300 bg-white px-2 py-1 text-xs text-gray-600 hover:text-gray-800"
             onClick={() => {
-              removeFilters(activeFilters);
+              updateFiltersCache({});
+              removeFilters(Object.keys(qParams));
             }}
           >
             {t("clear_all_filters")}
@@ -254,3 +251,25 @@ export default function useFilters({ limit = 14 }: { limit?: number }) {
     },
   };
 }
+
+const removeFromQuery = (query: Record<string, unknown>, params: string[]) => {
+  const result = { ...query };
+  for (const param of params) {
+    delete result[param];
+  }
+  return result;
+};
+
+const FILTERS_CACHE_BLACKLIST = ["page", "limit", "offset"];
+
+const getFiltersCacheKey = () => `filters--${window.location.pathname}`;
+const getFiltersCache = () => {
+  return JSON.parse(localStorage.getItem(getFiltersCacheKey()) || "{}");
+};
+const updateFiltersCache = (cache: Record<string, unknown>) => {
+  const result = { ...cache };
+  for (const param of FILTERS_CACHE_BLACKLIST) {
+    delete result[param];
+  }
+  localStorage.setItem(getFiltersCacheKey(), JSON.stringify(result));
+};