diff --git a/package-lock.json b/package-lock.json index b2fe29a5..96a9d45f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.1.3-beta-4", + "version": "1.1.3-beta-5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.1.3-beta-4", + "version": "1.1.3-beta-5", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index bb8c8fba..e157bb62 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.1.3-beta-4", + "version": "1.1.3-beta-5", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts index 4e314e6e..f6b66aeb 100644 --- a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts +++ b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts @@ -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 = ({ }: UseUrlFiltersProps = {}): UseUrlFiltersReturnType => { const location = useLocation() const history = useHistory() - const searchParams = new URLSearchParams(location.search) + + const isAlreadyReadFromLocalStorage = useRef(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['parseSearchParams'] = (searchParamsToParse) => { if (parseSearchParams) { @@ -136,7 +168,9 @@ const useUrlFilters = ({ const clearFilters = () => { history.replace({ search: '' }) - setItemInLocalStorageIfKeyExists(localStorageKey, '') + if (localStorageKey) { + localStorage.removeItem(localStorageKey) + } } const updateSearchParams = (paramsToSerialize: Partial) => { @@ -160,21 +194,6 @@ const useUrlFilters = ({ _resetPageNumber() } - useEffect(() => { - if (!localStorageKey) { - return - } - // if we have search string, set secondary params in local storage accordingly - if (location.search) { - setItemInLocalStorageIfKeyExists(localStorageKey, JSON.stringify(parsedParams)) - return - } - const localStorageValue = localStorage.getItem(localStorageKey) - if (localStorageValue) { - updateSearchParams(JSON.parse(localStorageValue)) - } - }, []) - return { pageSize, changePage,