diff --git a/containers/ecr-viewer/src/app/components/BaseFilter.tsx b/containers/ecr-viewer/src/app/components/BaseFilter.tsx
index 0fdcf0957..a90955528 100644
--- a/containers/ecr-viewer/src/app/components/BaseFilter.tsx
+++ b/containers/ecr-viewer/src/app/components/BaseFilter.tsx
@@ -6,9 +6,14 @@ import React, {
useEffect,
useRef,
} from "react";
-import { Button } from "@trussworks/react-uswds";
+import { Button, Label } from "@trussworks/react-uswds";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
-import { FILTER_CLOSED, FILTER_SUBMITTED, FilterOpenContext } from "./Filters";
+import {
+ FILTER_CLOSED,
+ FILTER_SUBMITTED,
+ FilterOpenContext,
+} from "@/app/components/Filters";
+import { toKebabCase } from "@/app/services/formatService";
/**
* Custom hook to manage query parameters in the URL (set, delete, and update). Hook always resets page back to 1.
@@ -24,8 +29,7 @@ export const useQueryParam = () => {
// Set a query param with a specific value
const setQueryParam = useCallback(
- (key: string, value: string) => {
- const params = new URLSearchParams(searchParams.toString());
+ (params: URLSearchParams, key: string, value: string) => {
params.set("page", "1");
params.set(key, value);
return params;
@@ -35,10 +39,9 @@ export const useQueryParam = () => {
// Delete a query param or a specific query param value
const deleteQueryParam = useCallback(
- (name: string, value?: string) => {
- const params = new URLSearchParams(searchParams.toString());
+ (params: URLSearchParams, key: string) => {
params.set("page", "1");
- params.delete(name, value);
+ params.delete(key);
return params;
},
[searchParams],
@@ -52,9 +55,10 @@ export const useQueryParam = () => {
// Update a specific query param (set or delete if default)
const updateQueryParam = (
+ params: URLSearchParams,
key: string,
value: string | { [key: string]: boolean },
- isDefault: boolean,
+ isDefault: boolean = false,
) => {
if (typeof value === "object") {
value = Object.keys(value)
@@ -62,14 +66,13 @@ export const useQueryParam = () => {
.join("|");
}
const updatedParams = isDefault
- ? deleteQueryParam(key)
- : setQueryParam(key, value);
+ ? deleteQueryParam(params, key)
+ : setQueryParam(params, key, value);
- // Update query params
- pushQueryUpdate(updatedParams, [key]);
+ return updatedParams;
};
- return { searchParams, updateQueryParam, pushQueryUpdate };
+ return { searchParams, deleteQueryParam, updateQueryParam, pushQueryUpdate };
};
/**
@@ -210,7 +213,6 @@ const FilterLegend = ({ type }: { type: string }) => {
const ApplyFilterButton = ({ type }: { type: string }) => {
return (
-
);
};
+
+/**
+ * A reusable radio button component, used for the filter by date feature.
+ * @param props - The properties for the RadioDateOption component.
+ * @param props.groupName - The name of the radio button group.
+ * @param props.option - The value of the radio option.
+ * @param props.label - The label to display next to the radio button.
+ * @param props.onChange - The callback function to handle the `onChange` event when the radio button is clicked.
+ * @param props.isChecked - Determines if the radio button is selected based on the current state.
+ * @param props.classNames - (Optional) Additional custom CSS class names to apply to the radio button wrapper.
+ * @returns The rendered RadioDateOption component.
+ */
+export const RadioDateOption = ({
+ groupName,
+ option,
+ label,
+ onChange,
+ isChecked,
+ classNames,
+}: {
+ groupName: string;
+ option: string;
+ label: string;
+ onChange: (value: string) => void;
+ isChecked: boolean;
+ classNames?: string;
+}) => {
+ return (
+
+ );
+};
+
+/**
+ * A group of radio button components, given a set of options.
+ * @param props - The properties for the RadioDateOption component.
+ * @param props.groupName - The name of the radio button group.
+ * @param props.optionsMap - A map with each option as the key, and the corresponding labels as the value.
+ * @param props.onChange - The callback function to handle the `onChange` event when the radio button is clicked.
+ * @param props.currentOption - The option currently selected.
+ * @param props.classNames - (Optional) Additional custom CSS class names to apply to the radio button wrapper.
+ * @returns The rendered RadioDateOption component.
+ */
+export const RadioDateOptions = ({
+ groupName,
+ optionsMap,
+ onChange,
+ currentOption,
+ classNames,
+}: {
+ groupName: string;
+ optionsMap: Record;
+ onChange: (value: string) => void;
+ currentOption: string;
+ classNames?: string;
+}) => {
+ return (
+ <>
+ {Object.entries(optionsMap).map(([option, label]) => (
+
+ ))}
+
+ );
+};
+
+/**
+ * A custom date input component for selecting a date.
+ * @param props - The properties for the CustomDateInput component.
+ * @param props.label - The label of the custom date input component.
+ * @param props.onDateChange - The function that is caulled when the date changes.
+ * @param props.defaultValue - The default value of the date input.
+ * @param props.isRequired - Boolean indicating whether or not the date is required.
+ * @returns A JSX element containing a date input field and corresponding label.
+ */
+export const CustomDateInput = ({
+ label,
+ onDateChange,
+ defaultValue,
+ isRequired,
+}: {
+ label: string;
+ onDateChange: (date: string) => void;
+ defaultValue: string;
+ isRequired: boolean;
+}) => {
+ const today = new Date().toLocaleDateString("en-CA");
+ const id = toKebabCase(label);
+ return (
+