Updates the moderation form to allow edits of createdOn and submitter

nasa-gcn · May 7, 2024 · 0b19738 · 0b19738
1 parent 0f729ee
commit 0b19738
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 24 deletions.
diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx
@@ -102,9 +102,16 @@ export async function action({ request }: ActionFunctionArgs) {
       if (circularId === undefined)
         throw new Response('circularId is required', { status: 400 })
       if (!user?.name || !user.email) throw new Response(null, { status: 403 })
-
+      const submitter = getFormDataString(data, 'submitter')
+      const createdOn = getFormDataString(data, 'createdOn')
+      if (!submitter || !createdOn) throw new Response(null, { status: 400 })
       await createChangeRequest(
-        { circularId: parseFloat(circularId), ...props },
+        {
+          circularId: parseFloat(circularId),
+          ...props,
+          submitter,
+          createdOn: parseFloat(createdOn),
+        },
         user
       )
       await postZendeskRequest({

diff --git a/app/routes/circulars.correction.$circularId.tsx b/app/routes/circulars.correction.$circularId.tsx
@@ -36,6 +36,7 @@ export async function loader({
     defaultFormat: circular.format,
     circularId: circular.circularId,
     submitter: circular.submitter,
+    createdOn: circular.createdOn,
     searchString: '',
   }
 }

diff --git a/app/routes/circulars.edit.$circularId/CircularEditForm.tsx b/app/routes/circulars.edit.$circularId/CircularEditForm.tsx
@@ -29,7 +29,10 @@ import {
 import {
   type CircularFormat,
   bodyIsValid,
+  dateIsValid,
+  formatDateISO,
   subjectIsValid,
+  submitterIsValid,
 } from '../circulars/circulars.lib'
 import { RichEditor } from './RichEditor'
 import {
@@ -39,6 +42,7 @@ import {
 import { CircularsKeywords } from '~/components/CircularsKeywords'
 import CollapsableInfo from '~/components/CollapsableInfo'
 import Spinner from '~/components/Spinner'
+import TimeAgo from '~/components/TimeAgo'
 import { useFeature } from '~/root'
 
 function SyntaxExample({
@@ -118,6 +122,7 @@ export function CircularEditForm({
   defaultBody,
   defaultSubject,
   searchString,
+  createdOn,
   intent,
 }: {
   formattedContributor: string
@@ -127,6 +132,7 @@ export function CircularEditForm({
   defaultBody: string
   defaultSubject: string
   searchString: string
+  createdOn?: number
   intent: 'correction' | 'edit' | 'new'
 }) {
   let formSearchString = '?index'
@@ -140,10 +146,14 @@ export function CircularEditForm({
   const [body, setBody] = useState(defaultBody)
   const [subject, setSubject] = useState(defaultSubject)
   const [format, setFormat] = useState(defaultFormat)
+  const [date, setDate] = useState(createdOn)
+  const [updatedSubmitter, setUpdatedSubmitter] = useState(submitter)
   const bodyValid = bodyIsValid(body)
+  const dateValid = dateIsValid(date)
+  const submitterValid = submitterIsValid(updatedSubmitter)
   const [showPreview, setShowPreview] = useState(false)
   const sending = Boolean(useNavigation().formData)
-  const valid = subjectValid && bodyValid
+  const valid = subjectValid && bodyValid && dateValid && submitterValid
   let headerText, saveButtonText
 
   switch (intent) {
@@ -165,7 +175,10 @@ export function CircularEditForm({
   const changesHaveBeenMade =
     body.trim() !== defaultBody.trim() ||
     subject.trim() !== defaultSubject.trim() ||
-    format !== defaultFormat
+    format !== defaultFormat ||
+    submitter !== updatedSubmitter?.trim() ||
+    createdOn !== date
+
   return (
     <AstroDataContext.Provider value={{ rel: 'noopener', target: '_blank' }}>
       <h1>{headerText} GCN Circular</h1>
@@ -183,21 +196,12 @@ export function CircularEditForm({
                 id="submitter"
                 type="text"
                 defaultValue={submitter}
+                onChange={(event) => setUpdatedSubmitter(event.target.value)}
                 required
-                onChange={({ target: { value } }) => {
-                  // setSubject(value)
-                  // setSubjectValid(subjectIsValid(value))
-                }}
               />
             </InputGroup>
           </>
         )}
-        <InputGroup className="">
-          <InputPrefix className="wide-input-prefix">
-            Submission Date
-          </InputPrefix>
-          <DatePicker name="" id="" />
-        </InputGroup>
         <InputGroup className="border-0 maxw-full">
           <InputPrefix className="wide-input-prefix">
             {circularId === undefined ? 'From' : 'Editor'}
@@ -212,6 +216,25 @@ export function CircularEditForm({
             </Button>
           </Link>
         </InputGroup>
+        <InputGroup className="display-flex flex-align-center border-0">
+          <input type="hidden" name="createdOn" id="createdOn" value={date} />
+          <InputPrefix className="wide-input-prefix">Date</InputPrefix>
+          {createdOn ? (
+            <div>
+              <span>{formatDateISO(createdOn)} </span>
+              <TimeAgo time={createdOn} />
+            </div>
+          ) : (
+            <DatePicker
+              className="border-1px"
+              onChange={(value) =>
+                setDate(value ? Date.parse(value) : undefined)
+              }
+              name="datePicker"
+              id="datePicker"
+            />
+          )}
+        </InputGroup>
         <InputGroup
           className={classnames('maxw-full', {
             'usa-input--error': subjectValid === false,

diff --git a/app/routes/circulars.moderation.$circularId.$requestor.tsx b/app/routes/circulars.moderation.$circularId.$requestor.tsx
@@ -9,6 +9,9 @@ import type { SEOHandle } from '@nasa-gcn/remix-seo'
 import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
 import { Form, redirect, useLoaderData } from '@remix-run/react'
 import { Button, ButtonGroup } from '@trussworks/react-uswds'
+import dayjs from 'dayjs'
+import locale from 'dayjs/locale/en'
+import RelativeTime from 'dayjs/plugin/relativeTime'
 import * as Diff from 'diff'
 
 import { getUser } from './_auth/user.server'
@@ -72,13 +75,30 @@ export async function loader({
 export default function () {
   const { circular, correction } = useLoaderData<typeof loader>()
 
+  dayjs.locale(locale)
+  dayjs.extend(RelativeTime)
+  const dateTimeFormat = new Intl.DateTimeFormat(locale.name, {
+    dateStyle: 'full',
+    timeStyle: 'long',
+    timeZone: 'utc',
+  })
+
   return (
     <>
       <h2>Circular {circular.circularId}</h2>
       <h3>Original Author</h3>
-      {circular.submitter}
+      <DiffedContent
+        oldString={circular.submitter}
+        newString={correction.submitter}
+      />
       <h3>Requestor</h3>
       {correction.requestor}
+      <h3>Created On</h3>
+      <DiffedContent
+        oldString={dateTimeFormat.format(circular.createdOn)}
+        newString={dateTimeFormat.format(correction.createdOn)}
+        method="lines"
+      />
       <h3>Subject</h3>
       <DiffedContent
         oldString={circular.subject}
@@ -109,14 +129,21 @@ export default function () {
   )
 }
 
+const methodMap = {
+  words: Diff.diffWords,
+  lines: Diff.diffLines,
+}
+
 function DiffedContent({
   oldString,
   newString,
+  method,
 }: {
   oldString: string
   newString: string
+  method?: 'words' | 'lines'
 }) {
-  const diff = Diff.diffWords(oldString, newString)
+  const diff = methodMap[method ?? 'words'](oldString, newString)
 
   return (
     <div>

diff --git a/app/routes/circulars/circulars.lib.ts b/app/routes/circulars/circulars.lib.ts
@@ -37,6 +37,8 @@ export interface CircularChangeRequest extends CircularMetadata {
   requestorSub: string
   requestorEmail: string
   format: CircularFormat
+  submitter: string
+  createdOn: number
 }
 
 export interface CircularChangeRequestKeys {
@@ -130,6 +132,15 @@ export function formatIsValid(format: string): format is CircularFormat {
   return (circularFormats as any as string[]).includes(format)
 }
 
+/** For updated dates, check that the date is valid */
+export function dateIsValid(date?: number) {
+  return date !== undefined
+}
+
+export function submitterIsValid(submitter?: string) {
+  return submitter !== undefined
+}
+
 export function emailIsAutoReply(subject: string) {
   const lowercaseSubject = subject.toLowerCase()
   return emailAutoReplyChecklist.some((x) => lowercaseSubject.includes(x))

diff --git a/app/routes/circulars/circulars.server.ts b/app/routes/circulars/circulars.server.ts
@@ -368,14 +368,7 @@ export async function getVersions(circularId: number): Promise<number[]> {
 export async function createChangeRequest(
   item: Omit<
     Circular,
-    | 'sub'
-    | 'createdOn'
-    | 'submitter'
-    | 'submittedHow'
-    | 'bibcode'
-    | 'editedBy'
-    | 'version'
-    | 'editedOn'
+    'sub' | 'submittedHow' | 'bibcode' | 'editedBy' | 'version' | 'editedOn'
   >,
   user?: User
 ) {
@@ -391,6 +384,8 @@ export async function createChangeRequest(
     requestorSub: user.sub,
     requestorEmail: user.email,
     requestor,
+    createdOn: item.createdOn,
+    submitter: item.submitter,
   })
 
   await sendEmail({
@@ -518,6 +513,8 @@ export async function approveChangeRequest(
     editedBy: `${formatAuthor(user)} on behalf of ${changeRequest.requestor}`,
     editedOn: Date.now(),
     format: changeRequest.format,
+    submitter: changeRequest.submitter,
+    createdOn: changeRequest.createdOn,
   })
 
   await deleteChangeRequestRaw(circularId, requestorSub)