diff --git a/containers/ecr-viewer/src/app/components/Filters.tsx b/containers/ecr-viewer/src/app/components/Filters.tsx index a2f9da2f9..36dc9abe3 100644 --- a/containers/ecr-viewer/src/app/components/Filters.tsx +++ b/containers/ecr-viewer/src/app/components/Filters.tsx @@ -16,9 +16,11 @@ import { CustomDateInput, } from "@/app/components/BaseFilter"; import { + CustomDateRangeOption, DEFAULT_DATE_RANGE, DateRangeOptions, dateRangeLabels, + isValidParamDates, } from "@/app/view-data/utils/date-utils"; import { formatDateTime } from "@/app/services/formatService"; @@ -294,49 +296,31 @@ const FilterByDate = () => { const isFilterDateDefault = filterDateOption === DEFAULT_DATE_RANGE; const resetFilterDate = () => { - const queryDateRange = searchParams.get(ParamName.DateRange); - const resetToDefault = () => { + const queryDateRange = searchParams.get(ParamName.DateRange) || ""; + const queryCustomDates = searchParams.get(ParamName.Dates) || ""; + + if (isValidParamDates(queryDateRange, queryCustomDates)) { + setFilterDateOption(queryDateRange); + const [startDate, endDate] = queryCustomDates?.split("|"); + setStartDate(startDate); + setEndDate(endDate); + } else { setFilterDateOption(DEFAULT_DATE_RANGE); setStartDate(""); setEndDate(""); - }; - - if (!queryDateRange) { - resetToDefault(); - } else if (queryDateRange !== filterDateOption) { - setFilterDateOption(queryDateRange); - } - if (queryDateRange === "custom") { - const queryCustomDates = searchParams.get(ParamName.Dates) || ""; - if (!queryCustomDates) { - // If dateRange is custom but no custom dates, reset to default date range - resetToDefault(); - } else { - const [startDate, endDate] = queryCustomDates?.split("|"); - setStartDate(startDate); - setEndDate(endDate); - } } }; const validateURLParams = () => { - const dateRegex = /^\d{4}-\d{2}-\d{2}\|\d{4}-\d{2}-\d{2}$/; - const queryDateRange = searchParams.get(ParamName.DateRange); + const queryDateRange = searchParams.get(ParamName.DateRange) || ""; const queryCustomDates = searchParams.get(ParamName.Dates) || ""; - if (queryDateRange === "custom") { - // Reset URL params to default filter dates if no dates param or has bad inputs - if (!queryCustomDates || !dateRegex.test(queryCustomDates.trim())) { - updateQueryParam( - ParamName.DateRange, - DEFAULT_DATE_RANGE, - isFilterDateDefault, - ); - deleteQueryParam(ParamName.Dates); - pushQueryUpdate(); - } - } else if (queryCustomDates) { - // Remove dates param if dateRange is not custom + if (!isValidParamDates(queryDateRange, queryCustomDates)) { + updateQueryParam( + ParamName.DateRange, + DEFAULT_DATE_RANGE, + isFilterDateDefault, + ); deleteQueryParam(ParamName.Dates); pushQueryUpdate(); } @@ -347,7 +331,7 @@ const FilterByDate = () => { useEffect(resetFilterDate, []); const submitHandler = () => { - if (filterDateOption === "custom") { + if (filterDateOption === CustomDateRangeOption) { if (!endDate) { setEndDate(today); } @@ -379,7 +363,7 @@ const FilterByDate = () => { resetHandler={resetFilterDate} icon={Icon.Event} title={ - filterDateOption === "custom" + filterDateOption === CustomDateRangeOption ? startDate && endDate && `From ${formatDateTime(startDate)} to ${formatDateTime(endDate)}` @@ -398,12 +382,12 @@ const FilterByDate = () => {