Adds grouped view to circulars archive index

__tests__/synonyms.server.ts

@@ -1,3 +1,10 @@
+/*!
+ * Copyright © 2023 United States Government as represented by the
+ * Administrator of the National Aeronautics and Space Administration.
+ * All Rights Reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
 import { tables } from '@architect/functions'
 import type { AWSError, DynamoDB } from 'aws-sdk'
 import * as awsSDKMock from 'aws-sdk-mock'

app/routes/circulars.$circularId.($version)/AstroDataContext.tsx → app/components/circularDisplay/AstroDataContext.tsx

@@ -29,6 +29,7 @@ export const AstroDataContext = createContext<AstroDataContextProps>({})
 /**
  * An Astro Flavored Markdown enriched link.
  */
+// eslint-disable-next-line react/display-name
 export const AstroDataLink = forwardRef(
   (
     {

app/routes/circulars.$circularId.($version)/FrontMatter.tsx → app/components/circularDisplay/FrontMatter.tsx

@@ -8,8 +8,8 @@
 import { Grid } from '@trussworks/react-uswds'
 import type { ReactNode } from 'react'
 
-import { type Circular, formatDateISO } from '../circulars/circulars.lib'
 import TimeAgo from '~/components/TimeAgo'
+import { type Circular, formatDateISO } from '~/routes/circulars/circulars.lib'
 
 const submittedHowMap = {
   web: 'Web form',

app/components/pagination/Pagination.tsx

@@ -17,19 +17,22 @@ function getPageLink({
   query,
   startDate,
   endDate,
+  view,
 }: {
   page: number
   limit?: number
   query?: string
   startDate?: string
   endDate?: string
+  view?: string
 }) {
   const searchParams = new URLSearchParams()
   if (page > 1) searchParams.set('page', page.toString())
-  if (limit && limit != 100) searchParams.set('limit', limit.toString())
+  if (limit) searchParams.set('limit', limit.toString())
   if (query) searchParams.set('query', query)
   if (startDate) searchParams.set('startDate', startDate)
   if (endDate) searchParams.set('endDate', endDate)
+  searchParams.set('view', view || 'index')
 
   const searchString = searchParams.toString()
   return searchString && `?${searchString}`
@@ -38,6 +41,7 @@ function getPageLink({
 export default function Pagination({
   page,
   totalPages,
+  view,
   ...queryStringProps
 }: {
   page: number
@@ -46,8 +50,10 @@ export default function Pagination({
   query?: string
   startDate?: string
   endDate?: string
+  view?: string
 }) {
   const pages = usePagination({ currentPage: page, totalPages })
+
   return (
     <nav aria-label="Pagination" className="usa-pagination">
       <ul className="usa-pagination__list">
@@ -63,6 +69,7 @@ export default function Pagination({
                     <Link
                       to={getPageLink({
                         page: pageProps.number,
+                        view,
                         ...queryStringProps,
                       })}
                       className="usa-pagination__link usa-pagination__previous-page"
@@ -102,6 +109,7 @@ export default function Pagination({
                     <Link
                       to={getPageLink({
                         page: pageProps.number,
+                        view,
                         ...queryStringProps,
                       })}
                       className="usa-pagination__link usa-pagination__next-page"
@@ -124,6 +132,7 @@ export default function Pagination({
                   <Link
                     to={getPageLink({
                       page: pageProps.number,
+                      view,
                       ...queryStringProps,
                     })}
                     className={classNames('usa-pagination__button', {

app/components/pagination/PaginationSelectionFooter.tsx

@@ -9,40 +9,51 @@ import { useSubmit } from '@remix-run/react'
 import { Select } from '@trussworks/react-uswds'
 
 import Pagination from './Pagination'
+import { calculateLimit } from '~/lib/utils'
 
 export default function PaginationSelectionFooter({
   page,
   totalPages,
   limit,
   query,
   form,
+  view,
 }: {
   page: number
   totalPages: number
   limit?: number
   query?: string
   form: string
+  view?: string
 }) {
   const submit = useSubmit()
+  const isGroupView = view === 'group'
+  const limitValue = calculateLimit({ isGroupView, limit })
+
   return (
     <div className="display-flex flex-row flex-wrap">
       <div className="display-flex flex-align-self-center margin-right-2 width-auto">
         <div>
+          <input type="hidden" form={form} name="view" id="view" value={view} />
           <Select
             id="limit"
             title="Number of results per page"
             className="width-auto height-5 padding-y-0 margin-y-0"
             name="limit"
-            defaultValue="100"
+            value={limitValue}
             form={form}
             onChange={({ target: { form } }) => {
               submit(form)
             }}
           >
             <option value="10">10 / page</option>
             <option value="20">20 / page</option>
-            <option value="50">50 / page</option>
-            <option value="100">100 / page</option>
+            {!isGroupView && (
+              <>
+                <option value="50">50 / page</option>
+                <option value="100">100 / page</option>
+              </>
+            )}
           </Select>
         </div>
       </div>
@@ -53,6 +64,7 @@ export default function PaginationSelectionFooter({
             page={page}
             limit={limit}
             totalPages={totalPages}
+            view={view}
           />
         )}
       </div>

app/lib/utils.ts

@@ -72,3 +72,19 @@ export function useSearchString() {
   if (searchString) searchString = `?${searchString}`
   return searchString
 }
+
+export function calculateLimit({
+  isGroupView,
+  limit,
+}: {
+  isGroupView: boolean | undefined
+  limit: number | undefined
+}) {
+  const defaultLimit = isGroupView ? 20 : 100
+
+  if (!isGroupView) {
+    return limit || defaultLimit
+  } else {
+    return limit && limit < 20 ? limit : defaultLimit
+  }
+}

app/routes/circulars.$circularId.($version)/route.tsx

@@ -15,11 +15,11 @@ import { useOnClickOutside } from 'usehooks-ts'
 
 import type { loader as parentLoader } from '../circulars.$circularId/route'
 import { get } from '../circulars/circulars.server'
-import { MarkdownBody, PlainTextBody } from './Body'
-import { FrontMatter } from './FrontMatter'
 import DetailsDropdownButton from '~/components/DetailsDropdownButton'
 import DetailsDropdownContent from '~/components/DetailsDropdownContent'
 import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
+import { MarkdownBody, PlainTextBody } from '~/components/circularDisplay/Body'
+import { FrontMatter } from '~/components/circularDisplay/FrontMatter'
 import { origin } from '~/lib/env.server'
 import { getCanonicalUrlHeaders, pickHeaders } from '~/lib/headers.server'
 import { useSearchString } from '~/lib/utils'

app/routes/circulars._archive._index/SynonymGroupIndex.tsx

@@ -0,0 +1,53 @@
+/*!
+ * Copyright © 2023 United States Government as represented by the
+ * Administrator of the National Aeronautics and Space Administration.
+ * All Rights Reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Link } from '@remix-run/react'
+
+import type { SynonymGroupWithMembers } from '../synonyms/synonyms.lib'
+
+export default function ({
+  allItems,
+  totalItems,
+  searchString,
+  query,
+}: {
+  allItems: SynonymGroupWithMembers[]
+  totalItems: number
+  searchString: string
+  query?: string
+}) {
+  return (
+    <>
+      {query && (
+        <h3>
+          {totalItems} result{totalItems != 1 && 's'} found.
+        </h3>
+      )}
+
+      {allItems.map(({ group, members }) => (
+        <div key={group.synonymId}>
+          <details>
+            <summary>
+              <Link to={`/group/${group.synonymId}${searchString}`}>
+                {group.eventIds.join(', ')}
+              </Link>
+            </summary>
+            <ul>
+              {members.map(({ circularId, subject }) => {
+                return (
+                  <li key={circularId}>
+                    <Link to={`/circular/${circularId}`}>{subject}</Link>
+                  </li>
+                )
+              })}
+            </ul>
+          </details>
+        </div>
+      ))}
+    </>
+  )
+}