Date edit refactoring

nasa-gcn · May 14, 2024 · 56e8790 · 56e8790
1 parent ad71c16
commit 56e8790
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 58 deletions.
diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx
@@ -98,10 +98,12 @@ 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 })
-      let submitter, createdOn
+      let submitter, createdOnDate, createdOnTime, createdOn
       if (user.groups.includes(moderatorGroup)) {
         submitter = getFormDataString(data, 'submitter')
-        createdOn = getFormDataString(data, 'createdOn')
+        createdOnDate = getFormDataString(data, 'createdOnDate')
+        createdOnTime = getFormDataString(data, 'createdOnTime')
+        createdOn = Date.parse(`${createdOnDate} ${createdOnTime} UTC`)
       }
       await createChangeRequest(
         {
@@ -110,7 +112,7 @@ export async function action({ request }: ActionFunctionArgs) {
         },
         user,
         submitter,
-        createdOn ? parseFloat(createdOn) : undefined
+        createdOn
       )
       await postZendeskRequest({
         requester: { name: user.name, email: user.email },

diff --git a/app/routes/circulars.correction.$circularId.tsx b/app/routes/circulars.correction.$circularId.tsx
@@ -29,14 +29,19 @@ export async function loader({
   const user = await getUser(request)
   if (!user?.groups.includes(group)) throw new Response(null, { status: 403 })
   const circular = await get(parseFloat(circularId))
+  const defaultDateTime = new Date(circular.createdOn ?? 0)
+    .toISOString()
+    .split('T')
+
   return {
     formattedContributor: user ? formatAuthor(user) : '',
     defaultBody: circular.body,
     defaultSubject: circular.subject,
     defaultFormat: circular.format,
     circularId: circular.circularId,
     submitter: circular.submitter,
-    createdOn: circular.createdOn,
+    createdOnDate: defaultDateTime[0],
+    createdOnTime: defaultDateTime[1].substring(0, 5),
     searchString: '',
   }
 }

diff --git a/app/routes/circulars.edit.$circularId/CircularEditForm.tsx b/app/routes/circulars.edit.$circularId/CircularEditForm.tsx
@@ -19,7 +19,7 @@ import {
   TimePicker,
 } from '@trussworks/react-uswds'
 import classnames from 'classnames'
-import { type ReactNode, useContext, useEffect, useState } from 'react'
+import { type ReactNode, useContext, useState } from 'react'
 import { dedent } from 'ts-dedent'
 
 import { AstroDataContext } from '../circulars.$circularId.($version)/AstroDataContext'
@@ -116,7 +116,8 @@ export function CircularEditForm({
   defaultBody,
   defaultSubject,
   searchString,
-  createdOn,
+  createdOnDate,
+  createdOnTime,
   intent,
 }: {
   formattedContributor: string
@@ -126,7 +127,8 @@ export function CircularEditForm({
   defaultBody: string
   defaultSubject: string
   searchString: string
-  createdOn?: number
+  createdOnDate?: string
+  createdOnTime?: string
   intent: 'correction' | 'edit' | 'new'
 }) {
   let formSearchString = '?index'
@@ -140,18 +142,12 @@ export function CircularEditForm({
   const [body, setBody] = useState(defaultBody)
   const [subject, setSubject] = useState(defaultSubject)
   const [format, setFormat] = useState(defaultFormat)
-
-  const defaultDateTime = new Date(createdOn ?? 0).toISOString().split('T')
-  // Trimmed to remove seconds since Date and time selectors are limited to "HH:MM" accuracy
-  const defaultDateString = `${defaultDateTime[0]} ${defaultDateTime[1].substring(0, 5)} UTC`
-  const [date, setDate] = useState(`${defaultDateTime[0]}`)
-  const [time, setTime] = useState(`${defaultDateTime[1].substring(0, 5)}`)
-  const [dateString, setDateString] = useState(defaultDateString)
-  const dateNumber = Date.parse(dateString)
-  const dateValid = dateIsValid(dateNumber)
+  const [date, setDate] = useState(createdOnDate)
+  const [time, setTime] = useState(createdOnTime ?? '12:00')
+  const dateValid = circularId ? dateIsValid(date, time) : true
 
   const [updatedSubmitter, setUpdatedSubmitter] = useState(submitter)
-  const submitterValid = submitterIsValid(updatedSubmitter)
+  const submitterValid = circularId ? submitterIsValid(updatedSubmitter) : true
   const bodyValid = bodyIsValid(body)
   const sending = Boolean(useNavigation().formData)
   const valid = subjectValid && bodyValid && dateValid && submitterValid
@@ -173,19 +169,20 @@ export function CircularEditForm({
   }
   const bodyPlaceholder = useBodyPlaceholder()
 
+  /* FIXME: dateFormat does not work in the date selector, 
+    setting to YYYY-MM-DD prevents form submission. Once fixed, 
+    remove date replacement  */
   const changesHaveBeenMade =
     body.trim() !== defaultBody.trim() ||
     subject.trim() !== defaultSubject.trim() ||
     format !== defaultFormat ||
     submitter !== updatedSubmitter?.trim() ||
-    Date.parse(defaultDateString) !== Date.parse(dateString)
+    (date && date.replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$3-$1-$2')) !==
+      createdOnDate ||
+    time !== createdOnTime
 
   const userIsModerator = useModStatus()
 
-  useEffect(() => {
-    setDateString(`${date} ${time} UTC`)
-  }, [date, time])
-
   return (
     <AstroDataContext.Provider value={{ rel: 'noopener', target: '_blank' }}>
       <h1>{headerText} GCN Circular</h1>
@@ -231,40 +228,36 @@ export function CircularEditForm({
               </Link>
             </InputGroup>
           </Grid>
-          <Grid row>
-            <input
-              type="hidden"
-              name="createdOn"
-              id="createdOn"
-              value={dateNumber}
-            />
-            <InputGroup className="border-0">
-              <InputPrefix className="wide-input-prefix">Date</InputPrefix>
-              <DatePicker
-                defaultValue={date}
-                className={classnames(styles.DatePicker, 'border-1px ')}
-                onChange={(value) => {
-                  setDate(value ?? '')
-                }}
-                name="submissionDatePicker"
-                id="submissionDatePicker"
-              />
-            </InputGroup>
-            <InputGroup className="tablet:grid-col-auto">
-              <InputPrefix className="wide-input-prefix">Time</InputPrefix>
-              <TimePicker
-                id="submissionTimePicker"
-                name="submissionTimePicker"
-                defaultValue={time}
-                className="margin-top-neg-3"
-                onChange={(value) => {
-                  setTime(value ?? '')
-                }}
-                step={1}
-                label=""
-              />
-            </InputGroup>
-          </Grid>
+          {circularId !== undefined && (
+            <Grid row>
+              <InputGroup className="border-0">
+                <InputPrefix className="wide-input-prefix">Date</InputPrefix>
+                <DatePicker
+                  defaultValue={createdOnDate}
+                  className={classnames(styles.DatePicker, 'border-1px ')}
+                  onChange={(value) => {
+                    setDate(value ?? '')
+                  }}
+                  name="createdOnDate"
+                  id="createdOnDate"
+                />
+              </InputGroup>
+              <InputGroup className="tablet:grid-col-auto">
+                <InputPrefix className="wide-input-prefix">Time</InputPrefix>
+                <TimePicker
+                  id="createdOnTime"
+                  name="createdOnTime"
+                  defaultValue={time}
+                  className="margin-top-neg-3"
+                  onChange={(value) => {
+                    setTime(value ?? '')
+                  }}
+                  step={1}
+                  label=""
+                />
+              </InputGroup>
+            </Grid>
+          )}
           <Grid row>
             <InputGroup
               className={classnames('maxw-full', {

diff --git a/app/routes/circulars/circulars.lib.ts b/app/routes/circulars/circulars.lib.ts
@@ -133,8 +133,8 @@ export function formatIsValid(format: string): format is CircularFormat {
 }
 
 /** For updated dates, check that the date is valid */
-export function dateIsValid(date?: number) {
-  return date !== undefined
+export function dateIsValid(date?: string, time?: string) {
+  return !Number.isNaN(Date.parse(`${date} ${time} UTC`))
 }
 
 export function submitterIsValid(submitter?: string) {