Merge pull request nasa-gcn#1705 from lpsinger/fix-circular-index-aft…

…er-new-submission

Show just-created Circular after new submission

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

@@ -30,14 +30,19 @@ import {
 import clamp from 'lodash/clamp'
 import { useState } from 'react'
 
-import { circularRedirect, search } from '../_gcn.circulars/circulars.server'
-import type { action } from '../_gcn.circulars/route'
+import { getUser } from '../_gcn._auth/user.server'
+import {
+  circularRedirect,
+  put,
+  search,
+} from '../_gcn.circulars/circulars.server'
 import CircularPagination from './CircularPagination'
 import CircularsHeader from './CircularsHeader'
 import CircularsIndex from './CircularsIndex'
 import DateSelectorButton from './DateSelectorButton'
 import DetailsDropdownContent from '~/components/DetailsDropdownContent'
 import Hint from '~/components/Hint'
+import { getFormDataString } from '~/lib/utils'
 import { useFeature } from '~/root'
 
 import searchImg from 'nasawds/src/img/usa-icons-bg/search--white.svg'
@@ -63,6 +68,18 @@ export async function loader({ request: { url } }: DataFunctionArgs) {
   return { page, ...results }
 }
 
+export async function action({ request }: DataFunctionArgs) {
+  const data = await request.formData()
+  const body = getFormDataString(data, 'body')
+  const subject = getFormDataString(data, 'subject')
+  if (!body || !subject)
+    throw new Response('Body and subject are required', { status: 400 })
+  return await put(
+    { subject, body, submittedHow: 'web' },
+    await getUser(request)
+  )
+}
+
 export default function () {
   const newItem = useActionData<typeof action>()
   const { items, page, totalPages, totalItems } = useLoaderData<typeof loader>()
@@ -72,6 +89,11 @@ export default function () {
   const allItems = [...(newItem ? [newItem] : []), ...(items || [])]
 
   const [searchParams] = useSearchParams()
+
+  // Strip off the ?index param if we navigated here from a form.
+  // See https://remix.run/docs/en/main/guides/index-query-param.
+  searchParams.delete('index')
+
   const limit = searchParams.get('limit') || '100'
   const query = searchParams.get('query') || undefined
   const startDate = searchParams.get('startDate') || undefined

app/routes/_gcn.circulars.new.tsx

@@ -142,7 +142,11 @@ export default function () {
   searchParams.delete('subject')
   searchParams.delete('body')
   let searchString = searchParams.toString()
-  if (searchString) searchString = `?${searchString}`
+  let formSearchString = '?index'
+  if (searchString) {
+    formSearchString = `${formSearchString}&${searchString}`
+    searchString = `?${searchString}`
+  }
 
   const [subjectValid, setSubjectValid] = useState(
     subjectIsValid(defaultSubject)
@@ -158,7 +162,7 @@ export default function () {
   return (
     <AstroDataContext.Provider value={{ rel: 'noopener', target: '_blank' }}>
       <h1>New GCN Circular</h1>
-      <Form method="POST" action={`/circulars${searchString}`}>
+      <Form method="POST" action={`/circulars${formSearchString}`}>
         <InputGroup className="border-0 maxw-full">
           <InputPrefix>From</InputPrefix>
           <span className="padding-1">{formattedAuthor}</span>

app/routes/_gcn.circulars/route.tsx

@@ -5,31 +5,15 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-import type { DataFunctionArgs } from '@remix-run/node'
 import { Outlet } from '@remix-run/react'
 import { GridContainer } from '@trussworks/react-uswds'
 
-import { getUser } from '../_gcn._auth/user.server'
-import { put } from './circulars.server'
-import { getFormDataString } from '~/lib/utils'
 import type { BreadcrumbHandle } from '~/root/Title'
 
 export const handle: BreadcrumbHandle = {
   breadcrumb: 'Circulars',
 }
 
-export async function action({ request }: DataFunctionArgs) {
-  const data = await request.formData()
-  const body = getFormDataString(data, 'body')
-  const subject = getFormDataString(data, 'subject')
-  if (!body || !subject)
-    throw new Response('Body and subject are required', { status: 400 })
-  return await put(
-    { subject, body, submittedHow: 'web' },
-    await getUser(request)
-  )
-}
-
 export default function () {
   return (
     <GridContainer className="usa-section">