diff --git a/package-lock.json b/package-lock.json index 8780bc14..06d12992 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.0.11", + "version": "1.1.0-patch-1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.0.11", + "version": "1.1.0-patch-1", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index e38e61d2..e011bcb3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.0.11", + "version": "1.1.0-patch-1", "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..1c8d94dd 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' @@ -45,9 +46,31 @@ const useUrlFilters = ({ parseSearchParams, localStorageKey, }: UseUrlFiltersProps = {}): UseUrlFiltersReturnType => { + const isAlreadyReadFromLocalStorage = useRef(false) const location = useLocation() const history = useHistory() - const searchParams = new URLSearchParams(location.search) + + const getSearchParams = () => { + if (!isAlreadyReadFromLocalStorage.current && !location.search && localStorageKey) { + 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 { + // Do nothing; returning the default value below + } + } + } + + return new URLSearchParams(location.search) + } + + const searchParams = getSearchParams() const getParsedSearchParams: UseUrlFiltersProps['parseSearchParams'] = (searchParamsToParse) => { if (parseSearchParams) { @@ -136,7 +159,9 @@ const useUrlFilters = ({ const clearFilters = () => { history.replace({ search: '' }) - setItemInLocalStorageIfKeyExists(localStorageKey, '') + if (localStorageKey) { + localStorage.removeItem(localStorageKey) + } } const updateSearchParams = (paramsToSerialize: Partial) => { @@ -160,21 +185,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,