refactor: date validation code

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 = () => {
         <div className="border-top-1px border-base-lighter margin-x-105 padding-bottom-1"></div>
         <RadioDateOption
           groupName="filter-date"
-          option="custom"
+          option={CustomDateRangeOption}
           label="Custom date range"
           onChange={setFilterDateOption}
-          isChecked={filterDateOption === "custom"}
+          isChecked={filterDateOption === CustomDateRangeOption}
         />
-        {filterDateOption === "custom" && (
+        {filterDateOption === CustomDateRangeOption && (
           <div className="padding-x-105">
             <CustomDateInput
               label="Start date"

containers/ecr-viewer/src/app/page.tsx

@@ -7,10 +7,7 @@ import LibrarySearch from "./components/LibrarySearch";
 import NotFound from "./not-found";
 import Filters from "@/app/components/Filters";
 import { EcrTableLoading } from "./components/EcrTableClient";
-import {
-  DEFAULT_DATE_RANGE,
-  returnParamDates,
-} from "@/app/view-data/utils/date-utils";
+import { returnParamDates } from "@/app/view-data/utils/date-utils";
 import { env } from "next-runtime-env";
 
 /**
@@ -34,9 +31,7 @@ const HomePage = async ({
   const searchTerm = searchParams?.search as string | undefined;
   const filterConditions = searchParams?.condition as string | undefined;
   const filterConditionsArr = filterConditions?.split("|");
-  const filterDateRange =
-    (searchParams?.dateRange as string) || DEFAULT_DATE_RANGE;
-  const filterDates = returnParamDates(filterDateRange, searchParams);
+  const filterDates = returnParamDates(searchParams);
 
   let totalCount: number = 0;
   if (isNonIntegratedViewer) {

containers/ecr-viewer/src/app/tests/components/__snapshots__/Filters.test.tsx.snap

@@ -180,7 +180,7 @@ exports[`Filter by Date Component - custom dates Renders correctly after opening
                       id="filter-date-custom"
                       name="filter-date-options"
                       type="radio"
-                      value="custom"
+                      value=CustomDateRangeOption
                     />
                     <label
                       class="line-height-sans-6 font-sans-xs margin-y-0 usa-radio__label text-no-wrap"
@@ -478,7 +478,7 @@ exports[`Filter by Date Component Renders correctly after opening Filter by Date
                       id="filter-date-custom"
                       name="filter-date-options"
                       type="radio"
-                      value="custom"
+                      value=CustomDateRangeOption
                     />
                     <label
                       class="line-height-sans-6 font-sans-xs margin-y-0 usa-radio__label text-no-wrap"

containers/ecr-viewer/src/app/view-data/utils/date-utils.ts

@@ -14,6 +14,8 @@ export enum DateRangeOptions {
   LastYear = "last-year",
 }
 
+export const CustomDateRangeOption = "custom";
+
 const isProd = process.env.NODE_ENV === "production";
 // Local dev default = Last year ; Prod default = Last 24 hours
 export const DEFAULT_DATE_RANGE = isProd
@@ -127,27 +129,39 @@ export function buildCustomDateRange(datesString: string) {
   return { startDate: startDate, endDate: endDate };
 }
 
+const DATE_PARAM_REGEX = /^\d{4}-\d{2}-\d{2}\|\d{4}-\d{2}-\d{2}$/;
+
 /**
- * Description
- * @param dateRange - asdf
- * @param searchParams - asdf
- * @returns asdf
+ * Check if the data parameters are valid
+ * @param dateRange the type of date range passed
+ * @param datesParam the dates params string
+ * @returns whether the params are valid
  */
-export function returnParamDates(
+export function isValidParamDates(
   dateRange: string,
-  searchParams: {
-    [key: string]: string | string[] | undefined;
-  },
-): DateRangePeriod {
-  const dateRegex = /^\d{4}-\d{2}-\d{2}\|\d{4}-\d{2}-\d{2}$/;
-  const datesParam = searchParams?.dates as string | undefined;
+  datesParam: string | undefined,
+): boolean {
+  if (dateRange === CustomDateRangeOption) {
+    return !!datesParam && DATE_PARAM_REGEX.test(datesParam);
+  } else {
+    return (<any>Object).values(DateRangeOptions).includes(dateRange);
+  }
+}
 
-  if (dateRange === "custom") {
-    if (!datesParam || !dateRegex.test(datesParam)) {
-      return convertDateOptionToDateRange(DEFAULT_DATE_RANGE);
-    } else {
-      return buildCustomDateRange(datesParam);
-    }
+/**
+ * Description
+ * @param searchParams - current search params
+ * @returns dates indicated by the search params
+ */
+export function returnParamDates(searchParams: {
+  [key: string]: string | string[] | undefined;
+}): DateRangePeriod {
+  const dateRange = (searchParams?.dateRange as string) || DEFAULT_DATE_RANGE;
+  const datesParam = searchParams?.dates as string | undefined;
+  if (!isValidParamDates(dateRange, datesParam))
+    return convertDateOptionToDateRange(dateRange);
+  if (dateRange === CustomDateRangeOption) {
+    return buildCustomDateRange(datesParam as string);
   } else {
     return convertDateOptionToDateRange(dateRange);
   }