Circulars Archive Table Format

app/routes/_gcn.circulars._archive._index/CircularsIndex.tsx

@@ -7,38 +7,88 @@
  */
 import { Link } from '@remix-run/react'
 
-import type { CircularMetadata } from '../_gcn.circulars/circulars.lib'
+import type { Circular } from '../_gcn.circulars/circulars.lib'
+import { formatDateISO } from '../_gcn.circulars/circulars.lib'
+import { useFeature } from '~/root'
 
 export default function ({
  allItems,
  searchString,
  totalItems,
  query,
 }: {
- allItems: CircularMetadata[]
+ allItems: Circular[]
  searchString: string
  totalItems: number
  query?: string
 }) {
+ const featureCircularsTableFormat = useFeature('CIRCULARS_TABLE_FORMAT')
  return (
  <>
  {query && (
  <h3>
  {totalItems} result{totalItems != 1 && 's'} found.
  </h3>
  )}
- <ol>
- {allItems.map(({ circularId, subject }) => (
- <li key={circularId} value={circularId}>
- <Link
- className="usa-link"
- to={`/circulars/${circularId}${searchString}`}
- >
- {subject}
- </Link>
- </li>
- ))}
- </ol>
+ {!featureCircularsTableFormat && (
+ <ol>
+ {allItems.map(({ circularId, subject }) => (
+ <li key={circularId} value={circularId}>
+ <Link
+ className="usa-link"
+ to={`/circulars/${circularId}${searchString}`}
+ >
+ {subject}
+ </Link>
+ </li>
+ ))}
+ </ol>
+ )}
+
+ {featureCircularsTableFormat && (
+ <div className="usa-table-container" tabIndex={0}>
+ <table
+ className="usa-table--compact usa-table--striped usa-table--borderless"
+ data-sortable
+ >
+ <thead>
+ <tr>
+ <th scope="col" role="columnheader" data-sortable>
+ Circular ID
+ </th>
+ <th scope="col" role="columnheader" data-sortable>
+ Subject
+ </th>
+ <th scope="col" role="columnheader" data-sortable>
+ Created On
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ {allItems.map(({ circularId, subject, createdOn }) => (
+ <tr key={circularId}>
+ <td data-sort-value={circularId}>{circularId}</td>
+ <td data-sort-value={subject}>
+ <Link
+ className="usa-link"
+ to={`/circulars/${circularId}${searchString}`}
+ >
+ {subject}
+ </Link>
+ </td>
+ <td data-sort-value={createdOn}>
+ {formatDateISO(createdOn)}
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ <div
+ className="usa-sr-only usa-table__announcement-region"
+ aria-live="polite"
+ ></div>
+ </div>
+ )}
  </>
  )
 }

app/routes/_gcn.circulars._archive._index/route.tsx

@@ -68,6 +68,7 @@ export async function action({ request }: ActionFunctionArgs) {
  const data = await request.formData()
  const body = getFormDataString(data, 'body')
  const subject = getFormDataString(data, 'subject')
+ const createdOn = getFormDataString(data, 'createdOn') || undefined
  if (!body || !subject)
  throw new Response('Body and subject are required', { status: 400 })
  const user = await getUser(request)
@@ -79,6 +80,7 @@ export async function action({ request }: ActionFunctionArgs) {
  body,
  circularId: parseFloat(circularId),
  subject,
+ createdOn: parseFloat(createdOn ?? '0'),
  },
  user
  )

app/routes/_gcn.circulars/circulars.server.ts

@@ -23,11 +23,7 @@ import {
  parseEventFromSubject,
  subjectIsValid,
 } from './circulars.lib'
-import type {
- Circular,
- CircularChangeRequest,
- CircularMetadata,
-} from './circulars.lib'
+import type { Circular, CircularChangeRequest } from './circulars.lib'
 
 // A type with certain keys required.
 type Require<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>
@@ -134,7 +130,7 @@ export async function search({
  startDate?: string
  endDate?: string
 }): Promise<{
- items: CircularMetadata[]
+ items: Circular[]
  totalPages: number
  totalItems: number
 }> {
@@ -172,8 +168,8 @@ export async function search({
  },
  },
  },
- fields: ['subject'],
- _source: false,
+ fields: ['subject', 'createdOn'],
+ _source: ['subject', 'createdOn'],
  sort: {
  circularId: {
  order: 'desc',
@@ -187,16 +183,15 @@ export async function search({
 
  const items = hits.map(
  ({
- _id: circularId,
- fields: {
- subject: [subject],
- },
+ _id,
+ _source: { subject, createdOn },
  }: {
  _id: string
- fields: { subject: string[] }
+ _source: { subject: string; createdOn: string }
  }) => ({
- circularId,
+ circularId: _id,
  subject,
+ createdOn,
  })
  )
 
@@ -302,7 +297,7 @@ export async function circularRedirect(query: string) {
 }
 
 export async function putVersion(
- circular: Omit<Circular, 'createdOn' | 'submitter' | 'submittedHow'>,
+ circular: Omit<Circular, 'submitter' | 'submittedHow'>,
  user?: User
 ): Promise<number> {
  validateCircular(circular.subject, circular.body)