Include HH:MM in time selection

nasa-gcn · May 8, 2024 · 9efdcfa · 9efdcfa
1 parent 6c99cb0
commit 9efdcfa
Showing 1 changed file with 41 additions and 22 deletions.
diff --git a/app/routes/circulars.edit.$circularId/CircularEditForm.tsx b/app/routes/circulars.edit.$circularId/CircularEditForm.tsx
@@ -16,9 +16,10 @@ import {
   Table,
   TextInput,
   Textarea,
+  TimePicker,
 } from '@trussworks/react-uswds'
 import classnames from 'classnames'
-import { type ReactNode, useContext, useState } from 'react'
+import { type ReactNode, useContext, useEffect, useState } from 'react'
 import { dedent } from 'ts-dedent'
 
 import { AstroDataContext } from '../circulars.$circularId.($version)/AstroDataContext'
@@ -30,7 +31,6 @@ import {
   type CircularFormat,
   bodyIsValid,
   dateIsValid,
-  formatDateISO,
   subjectIsValid,
   submitterIsValid,
 } from '../circulars/circulars.lib'
@@ -42,7 +42,6 @@ import {
 import { CircularsKeywords } from '~/components/CircularsKeywords'
 import CollapsableInfo from '~/components/CollapsableInfo'
 import Spinner from '~/components/Spinner'
-import TimeAgo from '~/components/TimeAgo'
 import { useFeature, useModStatus } from '~/root'
 
 function SyntaxExample({
@@ -146,10 +145,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 defaultDate = new Date(createdOn ?? 0).toISOString().split('T')
+  const [date, setDate] = useState(`${defaultDate[0]}`)
+  const [time, setTime] = useState(`${defaultDate[1].substring(0, 5)}`)
+  const [dateString, setDateString] = useState(`${date} ${time}`)
   const [updatedSubmitter, setUpdatedSubmitter] = useState(submitter)
   const bodyValid = bodyIsValid(body)
-  const dateValid = dateIsValid(date)
+  const dateNumber = Date.parse(dateString)
+  const dateValid = dateIsValid(dateNumber)
   const submitterValid = submitterIsValid(updatedSubmitter)
   const [showPreview, setShowPreview] = useState(false)
   const sending = Boolean(useNavigation().formData)
@@ -177,9 +180,15 @@ export function CircularEditForm({
     subject.trim() !== defaultSubject.trim() ||
     format !== defaultFormat ||
     submitter !== updatedSubmitter?.trim() ||
-    createdOn !== date
+    Date.parse(`${defaultDate[0]} ${defaultDate[1].substring(0, 5)}`) !==
+      dateNumber
 
   const userIsModerator = useModStatus()
+
+  useEffect(() => {
+    setDateString(`${date} ${time}`)
+  }, [date, time])
+
   return (
     <AstroDataContext.Provider value={{ rel: 'noopener', target: '_blank' }}>
       <h1>{headerText} GCN Circular</h1>
@@ -219,23 +228,33 @@ export function CircularEditForm({
           </Link>
         </InputGroup>
         <InputGroup className="display-flex flex-align-center border-0">
-          <input type="hidden" name="createdOn" id="createdOn" value={date} />
+          <input
+            type="hidden"
+            name="createdOn"
+            id="createdOn"
+            value={dateNumber}
+          />
           <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"
-            />
-          )}
+          <DatePicker
+            defaultValue={date}
+            className="border-1px"
+            onChange={(value) => {
+              setDate(value ?? '')
+            }}
+            name="submissionDatePicker"
+            id="submissionDatePicker"
+          />
+          <TimePicker
+            id="submissionTimePicker"
+            name="submissionTimePicker"
+            defaultValue={time}
+            className="border-1px margin-top-neg-3 margin-x-1"
+            onChange={(value) => {
+              setTime(value ?? '')
+            }}
+            step={1}
+            label=""
+          />
         </InputGroup>
         <InputGroup
           className={classnames('maxw-full', {