Implement Circular Archive date range search frontend with new DateSelectorButton

app/routes/circulars._archive._index.tsx

@@ -17,17 +17,20 @@ import {
 import {
   Button,
   ButtonGroup,
+  DateRangePicker,
   Icon,
   Label,
+  Radio,
   Select,
   TextInput,
 } from '@trussworks/react-uswds'
 import classNames from 'classnames'
 import clamp from 'lodash/clamp'
-import { useState } from 'react'
+import { useEffect, 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'
@@ -184,6 +187,7 @@ const dateSelectorLabels: Record<string, string> = {
   today: 'Today',
   mtd: 'Month to date',
   ytd: 'Year to date',
+  undefined: 'All time',
 }
 
 function DateSelectorButton({
@@ -239,10 +243,55 @@ 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('now')
+  }
+
+  const setDateRange = () => {
+    setShowContent(false)
+    const params = new URLSearchParams(location.search)
+    if (inputDateGte) params.set('startDate', inputDateGte)
+    if (inputDateLte) params.set('endDate', inputDateLte)
+    submit(params, {
+      method: 'get',
+      action: '/circulars',
+    })
+  }
+
+  useEffect(() => {
+    const radiobuttons = document.querySelectorAll('input[name="radio-date"]')
+    let radioSelected = false
+    radiobuttons.forEach((button) => {
+      if ((button as HTMLInputElement).value === inputDateGte) {
+        ;(button as HTMLInputElement).checked = true
+        radioSelected = true
+      }
+    })
+    if (!radioSelected) {
+      const customButton = document.getElementById('radio-custom')
+      if (customButton) {
+        ;(customButton as HTMLInputElement).checked = true
+      } // does not address the need for the custom date range button to be expanded if this button is checked
+    }
+  })
+
   return (
     <>
       <h1>GCN Circulars</h1>
@@ -260,7 +309,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 +340,152 @@ 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="margin-top-1">
+                <div className="maxw-card-xlg">
+                  <div className="display-flex flex-row">
+                    <div className="display-flex flex-column flex-align-start margin-1">
+                      <Radio
+                        id="radio-alltime"
+                        name="radio-date"
+                        value="undefined"
+                        defaultChecked={true}
+                        label="All Time"
+                        onChange={(e) => {
+                          setFuzzyTime(e.target.value)
+                        }}
+                      />
+                      <Radio
+                        id="radio-hour"
+                        name="radio-date"
+                        value="hour"
+                        label="Last hour"
+                        onChange={(e) => {
+                          setFuzzyTime(e.target.value)
+                        }}
+                      />
+                      <Radio
+                        id="radio-today"
+                        name="radio-date"
+                        value="today"
+                        label="Today"
+                        onChange={(e) => {
+                          setFuzzyTime(e.target.value)
+                        }}
+                      />
+                    </div>
+                    <div className="display-flex flex-column margin-1">
+                      <Radio
+                        id="radio-day"
+                        name="radio-date"
+                        value="day"
+                        label="Last 24 Hours"
+                        onChange={(e) => {
+                          setFuzzyTime(e.target.value)
+                        }}
+                      />
+                      <Radio
+                        id="radio-week"
+                        name="radio-date"
+                        value="week"
+                        label="Last Week"
+                        onChange={(e) => {
+                          setFuzzyTime(e.target.value)
+                        }}
+                      />
+                      <Radio
+                        id="radio-month"
+                        name="radio-date"
+                        value="month"
+                        label="Last Month"
+                        onChange={(e) => {
+                          setFuzzyTime(e.target.value)
+                        }}
+                      />
+                    </div>
+
+                    <div className="display-flex flex-column margin-1">
+                      <Radio
+                        id="radio-year"
+                        name="radio-date"
+                        value="year"
+                        label="Last Year"
+                        onChange={(e) => {
+                          setFuzzyTime(e.target.value)
+                        }}
+                      />
+                      <Radio
+                        id="radio-ytd"
+                        name="radio-date"
+                        value="ytd"
+                        label="Year to Date"
+                        onChange={(e) => {
+                          setFuzzyTime(e.target.value)
+                        }}
+                      />
+                      <Radio
+                        id="radio-custom"
+                        name="radio-date"
+                        value="custom"
+                        label="Custom Range..."
+                        onChange={(e) => {
+                          setShowDateRange(e.target.checked)
+                        }}
+                      />
+                    </div>
+                  </div>
+
+                  {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)
+                        },
+                      }}
+                    />
+                  )}
+                  <div className="display-flex flex-row">
+                    <Button
+                      type="button"
+                      className=""
+                      form="searchForm"
+                      onClick={() => {
+                        setDateRange()
+                      }}
+                    >
+                      <Icon.CalendarToday /> Submit
+                    </Button>
+                  </div>
+                </div>
+              </DetailsDropdownContent>
+            )}
+          </>
         )}
         <Link to={`/circulars/new${searchString}`}>
           <Button