Implement Circular Archive date range search frontend with new DateSelectorButton

app/routes/circulars._archive._index.tsx

@@ -17,8 +17,13 @@ import {
 import {
   Button,
   ButtonGroup,
+  CardBody,
+  CardFooter,
+  DateRangePicker,
+  Grid,
   Icon,
   Label,
+  Radio,
   Select,
   TextInput,
 } from '@trussworks/react-uswds'
@@ -28,6 +33,7 @@ import { useState } from 'react'
 
 import { circularRedirect, search } from './circulars/circulars.server'
 import type { action } from './circulars/route'
+import DetailsDropdownContent from '~/components/DetailsDropdownContent'
 import Hint from '~/components/Hint'
 import { usePagination } from '~/lib/pagination'
 import { useFeature } from '~/root'
@@ -176,14 +182,13 @@ function Pagination({
 }
 
 const dateSelectorLabels: Record<string, string> = {
-  hour: 'Last hour',
-  day: 'Last day',
-  week: 'Last week',
-  month: 'Last month',
-  year: 'Last year',
+  hour: 'Last Hour',
   today: 'Today',
-  mtd: 'Month to date',
-  ytd: 'Year to date',
+  day: 'Last Day',
+  week: 'Last Week',
+  month: 'Last Month',
+  year: 'Last Year',
+  ytd: 'Year to Date',
 }
 
 function DateSelectorButton({
@@ -207,6 +212,8 @@ function DateSelectorButton({
               {startDate}—{endDate}
             </>
           )) ||
+          (startDate && <>After {startDate}</>) ||
+          (endDate && <>Before {endDate}</>) ||
           'Filter by date'}
       </Button>
       <Button type="button" className={`${slimClasses} padding-x-1`}>
@@ -239,10 +246,37 @@ export default function () {
   if (searchString) searchString = `?${searchString}`
 
   const [inputQuery, setInputQuery] = useState(query)
-  const clean = inputQuery === query
+  const [inputDateGte, setInputDateGte] = useState(startDate)
+  const [inputDateLte, setInputDateLte] = useState(endDate)
+  const [showContent, setShowContent] = useState(false)
+  const [showDateRange, setShowDateRange] = useState(false)
+  const clean =
+    inputQuery === query &&
+    inputDateGte === startDate &&
+    inputDateLte === endDate
 
   const submit = useSubmit()
 
+  const setFuzzyTime = (startDate?: string) => {
+    if (startDate === 'custom') {
+      setShowDateRange(true)
+    } else {
+      setShowDateRange(false)
+      setInputDateGte(startDate)
+    }
+    setInputDateLte('')
+  }
+
+  const setDateRange = () => {
+    setShowContent(false)
+    const params = new URLSearchParams(location.search)
+    if (inputDateGte) params.set('startDate', inputDateGte)
+    else params.delete('startDate')
+    if (inputDateLte) params.set('endDate', inputDateLte)
+    else params.delete('endDate')
+    window.location.search = params.toString()
+  }
+
   return (
     <>
       <h1>GCN Circulars</h1>
@@ -260,7 +294,7 @@ export default function () {
         </Link>{' '}
         for help with subscribing to or submitting Circulars.
       </p>
-      <ButtonGroup className="position-sticky top-0 bg-white margin-bottom-1 padding-top-1">
+      <ButtonGroup className="position-sticky top-0 bg-white margin-bottom-1 padding-top-1 z-top">
         <Form
           className="display-inline-block usa-search usa-search--small"
           role="search"
@@ -291,7 +325,102 @@ export default function () {
           </Button>
         </Form>
         {featureCircularsFilterByDate && (
-          <DateSelectorButton startDate={startDate} endDate={endDate} />
+          <>
+            <DateSelectorButton
+              startDate={startDate}
+              endDate={endDate}
+              onClick={() => {
+                setShowContent((shown) => !shown)
+                setShowDateRange(false)
+              }}
+              expanded={showContent}
+            />
+            {showContent && (
+              <DetailsDropdownContent className="maxw-card-xlg">
+                <CardBody>
+                  <Grid row>
+                    <Grid col={4} key={`radio-alltime`}>
+                      <Radio
+                        id={`radio-alltime`}
+                        name="radio-date"
+                        value=""
+                        label="All Time"
+                        defaultChecked={true}
+                        onChange={(e) => {
+                          setInputDateGte(e.target.value)
+                        }}
+                      />
+                    </Grid>
+                    {Object.entries(dateSelectorLabels).map(
+                      ([value, label]) => (
+                        <Grid col={4} key={`radio-${value}`}>
+                          <Radio
+                            id={`radio-${value}`}
+                            name="radio-date"
+                            value={value}
+                            label={label}
+                            checked={value === inputDateGte}
+                            onChange={() => {
+                              setFuzzyTime(value)
+                            }}
+                          />
+                        </Grid>
+                      )
+                    )}
+                    <Grid col={4}>
+                      <Radio
+                        id="radio-custom"
+                        name="radio-date"
+                        value="custom"
+                        label="Custom Range..."
+                        checked={showDateRange}
+                        onChange={(e) => {
+                          setShowDateRange(e.target.checked)
+                        }}
+                      />
+                    </Grid>
+                  </Grid>
+                  {showDateRange && (
+                    <DateRangePicker
+                      startDateHint="dd/mm/yyyy"
+                      startDateLabel="Start Date"
+                      className="margin-bottom-2"
+                      startDatePickerProps={{
+                        id: 'event-date-start',
+                        name: 'event-date-start',
+                        defaultValue: 'startDate',
+                        onChange: (value) => {
+                          setInputDateGte(value)
+                        },
+                      }}
+                      endDateHint="dd/mm/yyyy"
+                      endDateLabel="End Date"
+                      endDatePickerProps={{
+                        id: 'event-date-end',
+                        name: 'event-date-end',
+                        defaultValue: 'endDate',
+                        onChange: (value) => {
+                          setInputDateLte(value)
+                        },
+                      }}
+                    />
+                  )}
+
+                  <CardFooter>
+                    <Button
+                      type="button"
+                      form="searchForm"
+                      onClick={() => {
+                        setDateRange()
+                      }}
+                    >
+                      <Icon.CalendarToday /> Submit
+                    </Button>
+                  </CardFooter>
+                </CardBody>
+              </DetailsDropdownContent>
+            )}
+          </>
         )}
         <Link to={`/circulars/new${searchString}`}>
           <Button