Merge pull request #418 from devtron-labs/fix/local-url-filters

fix: updating params twice in local filters

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.6.5-patch-1",
+    "version": "0.6.5-patch-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-import { useEffect, useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
+import { getUrlWithSearchParams } from '@Common/Helper'
 import { DEFAULT_BASE_PAGE_SIZE, EXCLUDED_FALSY_VALUES, SortingOrder } from '../../Constants'
 import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
 import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
@@ -47,7 +48,38 @@ const useUrlFilters = <T = string, K = unknown>({
 }: UseUrlFiltersProps<T, K> = {}): UseUrlFiltersReturnType<T, K> => {
     const location = useLocation()
     const history = useHistory()
-    const searchParams = new URLSearchParams(location.search)
+
+    const isAlreadyReadFromLocalStorage = useRef<boolean>(false)
+
+    const getSearchParams = () => {
+        const locationSearchParams = new URLSearchParams(location.search)
+        if (!isAlreadyReadFromLocalStorage.current && localStorageKey) {
+            if (!location.search) {
+                isAlreadyReadFromLocalStorage.current = true
+                const localStorageValue = localStorage.getItem(localStorageKey)
+                if (localStorageValue) {
+                    try {
+                        const localSearchString = getUrlWithSearchParams('', JSON.parse(localStorageValue))
+                        const localSearchParams = new URLSearchParams(localSearchString.split('?')[1] ?? '')
+
+                        history.replace({ search: localSearchParams.toString() })
+                        return localSearchParams
+                    } catch {
+                        localStorage.removeItem(localStorageKey)
+                    }
+                }
+            } else {
+                setItemInLocalStorageIfKeyExists(
+                    localStorageKey,
+                    JSON.stringify(parseSearchParams(locationSearchParams)),
+                )
+            }
+        }
+
+        return locationSearchParams
+    }
+
+    const searchParams = getSearchParams()
 
     const getParsedSearchParams: UseUrlFiltersProps<T, K>['parseSearchParams'] = (searchParamsToParse) => {
         if (parseSearchParams) {
@@ -136,7 +168,9 @@ const useUrlFilters = <T = string, K = unknown>({
 
     const clearFilters = () => {
         history.replace({ search: '' })
-        setItemInLocalStorageIfKeyExists(localStorageKey, '')
+        if (localStorageKey) {
+            localStorage.removeItem(localStorageKey)
+        }
     }
 
     const updateSearchParams = (paramsToSerialize: Partial<K>) => {
@@ -160,18 +194,6 @@ const useUrlFilters = <T = string, K = unknown>({
         _resetPageNumber()
     }
 
-    useEffect(() => {
-        // if we have search string, set secondary params in local storage accordingly
-        if (location.search) {
-            localStorage.setItem(localStorageKey, JSON.stringify(parsedParams))
-            return
-        }
-        const localStorageValue = localStorage.getItem(localStorageKey)
-        if (localStorageValue) {
-            updateSearchParams(JSON.parse(localStorageValue))
-        }
-    }, [])
-
     return {
         pageSize,
         changePage,