diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx index e8264a1fcd..9e65d83df7 100644 --- 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 index 4e94e220c7..a711360eb5 100644 --- a/app/routes/circulars.correction.$circularId.tsx +++ b/app/routes/circulars.correction.$circularId.tsx @@ -29,6 +29,10 @@ 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, @@ -36,7 +40,8 @@ export async function loader({ 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 index 79ef4be979..725f938eaa 100644 --- 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 (

{headerText} GCN Circular

@@ -231,40 +228,36 @@ export function CircularEditForm({ - - - - Date - { - setDate(value ?? '') - }} - name="submissionDatePicker" - id="submissionDatePicker" - /> - - - Time - { - setTime(value ?? '') - }} - step={1} - label="" - /> - - + {circularId !== undefined && ( + + + Date + { + setDate(value ?? '') + }} + name="createdOnDate" + id="createdOnDate" + /> + + + Time + { + setTime(value ?? '') + }} + step={1} + label="" + /> + + + )}