diff --git a/containers/ecr-viewer/src/app/components/BaseFilter.tsx b/containers/ecr-viewer/src/app/components/BaseFilter.tsx index 731aeab74..7c1800dc1 100644 --- a/containers/ecr-viewer/src/app/components/BaseFilter.tsx +++ b/containers/ecr-viewer/src/app/components/BaseFilter.tsx @@ -37,8 +37,6 @@ export const useQueryParam = () => { (params: URLSearchParams, key: string) => { params.set("page", "1"); params.delete(key); - - pushQueryUpdate(params, [key]); return params; }, [searchParams], @@ -65,8 +63,8 @@ export const useQueryParam = () => { const updatedParams = isDefault ? deleteQueryParam(params, key) : setQueryParam(params, key, value); - // Update query params - pushQueryUpdate(updatedParams, [key]); + + return updatedParams; }; return { searchParams, deleteQueryParam, updateQueryParam, pushQueryUpdate }; diff --git a/containers/ecr-viewer/src/app/components/Filters.tsx b/containers/ecr-viewer/src/app/components/Filters.tsx index 9a0c602eb..5487f6db6 100644 --- a/containers/ecr-viewer/src/app/components/Filters.tsx +++ b/containers/ecr-viewer/src/app/components/Filters.tsx @@ -135,7 +135,7 @@ const Filters = () => { * - Updates the browser's query string when the filter is applied. */ const FilterReportableConditions = () => { - const { searchParams, updateQueryParam } = useQueryParam(); + const { searchParams, updateQueryParam, pushQueryUpdate } = useQueryParam(); const params = new URLSearchParams(searchParams.toString()); const [filterConditions, setFilterConditions] = useState<{ [key: string]: boolean; @@ -223,14 +223,15 @@ const FilterReportableConditions = () => { (key) => filterConditions[key] === true, ).length || "0" } - submitHandler={() => - updateQueryParam( + submitHandler={() => { + const updatedParams = updateQueryParam( params, ParamName.Condition, filterConditions, isAllSelected, - ) - } + ); + pushQueryUpdate(updatedParams, [ParamName.Condition]); + }} > {/* Select All checkbox */}
@@ -289,7 +290,8 @@ const FilterReportableConditions = () => { * - Updates the browser's query string when the filter is applied. */ const FilterByDate = () => { - const { searchParams, deleteQueryParam, updateQueryParam } = useQueryParam(); + const { searchParams, deleteQueryParam, updateQueryParam, pushQueryUpdate } = + useQueryParam(); const [filterDateOption, setFilterDateOption] = useState(DEFAULT_DATE_RANGE); @@ -368,21 +370,30 @@ const FilterByDate = () => { return; } const datesParam = `${startDate}|${endDate}`; - updateQueryParam( + let updatedParams: URLSearchParams; + updatedParams = updateQueryParam( params, ParamName.DateRange, filterDateOption, isFilterDateDefault, ); - updateQueryParam(params, ParamName.Dates, datesParam, false); + updatedParams = updateQueryParam( + updatedParams, + ParamName.Dates, + datesParam, + false, + ); + pushQueryUpdate(updatedParams, [ParamName.DateRange, ParamName.Dates]); } else { - updateQueryParam( + let updatedParams: URLSearchParams; + updatedParams = updateQueryParam( params, ParamName.DateRange, filterDateOption, isFilterDateDefault, ); - deleteQueryParam(params, ParamName.Dates); + updatedParams = deleteQueryParam(updatedParams, ParamName.Dates); + pushQueryUpdate(updatedParams, [ParamName.DateRange, ParamName.Dates]); setStartDate(""); setEndDate(""); }