refactor: minor refactor of the create release date components

sanity-io · Jan 24, 2025 · 3b4cd31 · 3b4cd31
1 parent c93c322
commit 3b4cd31
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 29 deletions.
diff --git a/packages/sanity/src/core/components/inputs/DateInputs/DateTimeInput.tsx b/packages/sanity/src/core/components/inputs/DateInputs/DateTimeInput.tsx
@@ -7,6 +7,7 @@ import {
   forwardRef,
   type KeyboardEvent,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -65,11 +66,15 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
   const ref = useRef<HTMLInputElement | null>(null)
   const buttonRef = useRef(null)
 
+  const [referenceElement, setReferenceElement] = useState<HTMLInputElement | null>(null)
+
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
     () => ref.current,
   )
 
+  useEffect(() => setReferenceElement(ref.current), [])
+
   const [isPickerOpen, setPickerOpen] = useState(false)
 
   useClickOutsideEvent(
@@ -122,7 +127,7 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
             <Popover
               constrainSize={constrainSize}
               data-testid="date-input-dialog"
-              referenceElement={ref.current}
+              referenceElement={referenceElement}
               portal
               content={
                 <Box overflow="auto">

diff --git a/packages/sanity/src/core/releases/components/ScheduleDatePicker.tsx b/packages/sanity/src/core/releases/components/ScheduleDatePicker.tsx
@@ -17,6 +17,8 @@ interface ScheduleDatePickerProps {
   onChange: (date: Date) => void
 }
 
+const inputDateFormat = 'PP HH:mm'
+
 export const ScheduleDatePicker = ({
   initialValue: inputValue,
   onChange,
@@ -25,20 +27,18 @@ export const ScheduleDatePicker = ({
   const {timeZone} = useTimeZone()
   const {dialogTimeZoneShow} = useDialogTimeZone()
 
-  const handleBundlePublishAtCalendarChange = (date: Date | null) => {
+  const handlePublishAtCalendarChange = (date: Date | null) => {
     if (!date) return
 
     onChange(date)
   }
 
-  const handleBundlePublishAtInputChange = useCallback(
+  const handlePublishAtInputChange = useCallback(
     (event: React.FocusEvent<HTMLInputElement>) => {
       const date = event.currentTarget.value
-      const parsedDate = parse(date, 'PP HH:mm', new Date())
+      const parsedDate = parse(date, inputDateFormat, new Date())
 
-      if (isValid(parsedDate)) {
-        onChange(parsedDate)
-      }
+      if (isValid(parsedDate)) onChange(parsedDate)
     },
     [onChange],
   )
@@ -50,11 +50,11 @@ export const ScheduleDatePicker = ({
       <DateTimeInput
         selectTime
         monthPickerVariant={MONTH_PICKER_VARIANT.carousel}
-        onChange={handleBundlePublishAtCalendarChange}
-        onInputChange={handleBundlePublishAtInputChange}
+        onChange={handlePublishAtCalendarChange}
+        onInputChange={handlePublishAtInputChange}
         calendarLabels={calendarLabels}
         value={inputValue}
-        inputValue={format(inputValue, 'PP HH:mm')}
+        inputValue={format(inputValue, inputDateFormat)}
         constrainSize={false}
         padding={0}
         isPastDisabled

diff --git a/packages/sanity/src/core/releases/components/dialog/CreateReleaseDialog.tsx b/packages/sanity/src/core/releases/components/dialog/CreateReleaseDialog.tsx
@@ -28,7 +28,7 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
   const {t: tRelease} = useTranslation(releasesLocaleNamespace)
   const telemetry = useTelemetry()
 
-  const [value, setValue] = useState((): EditableReleaseDocument => {
+  const [release, setRelease] = useState((): EditableReleaseDocument => {
     return {
       _id: createReleaseId(),
       metadata: {
@@ -41,7 +41,7 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
   const [isSubmitting, setIsSubmitting] = useState(false)
 
   const [isScheduledDateInPast, setIsScheduledDateInPast] = useState(() =>
-    getIsScheduledDateInPast(value),
+    getIsScheduledDateInPast(release),
   )
 
   const handleOnSubmit = useCallback(
@@ -60,8 +60,8 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
         setIsSubmitting(true)
 
         const submitValue = {
-          ...value,
-          metadata: {...value.metadata, title: value.metadata?.title?.trim()},
+          ...release,
+          metadata: {...release.metadata, title: release.metadata?.title?.trim()},
         }
         await createRelease(submitValue)
         telemetry.log(CreatedRelease, {origin})
@@ -78,20 +78,20 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
         // TODO: Remove the upper part
 
         setIsSubmitting(false)
-        onSubmit(getReleaseIdFromReleaseDocumentId(value._id))
+        onSubmit(getReleaseIdFromReleaseDocumentId(release._id))
       }
     },
-    [isScheduledDateInPast, toast, tRelease, value, createRelease, telemetry, origin, onSubmit],
+    [isScheduledDateInPast, toast, tRelease, release, createRelease, telemetry, origin, onSubmit],
   )
 
   const handleOnChange = useCallback((changedValue: EditableReleaseDocument) => {
-    setValue(changedValue)
+    setRelease(changedValue)
 
     // when the value changes, re-evaluate if the scheduled date is in the past
     setIsScheduledDateInPast(getIsScheduledDateInPast(changedValue))
   }, [])
 
-  const handleOnMouseEnter = () => setIsScheduledDateInPast(getIsScheduledDateInPast(value))
+  const handleOnMouseEnter = () => setIsScheduledDateInPast(getIsScheduledDateInPast(release))
 
   const dialogTitle = t('release.dialog.create.title')
 
@@ -105,7 +105,7 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
     >
       <form onSubmit={handleOnSubmit}>
         <Box paddingX={4} paddingBottom={4}>
-          <ReleaseForm onChange={handleOnChange} value={value} />
+          <ReleaseForm onChange={handleOnChange} value={release} />
         </Box>
         <Flex justify="flex-end" paddingTop={5}>
           <Button

diff --git a/...ages/sanity/src/core/releases/components/documentHeader/dialog/CopyToNewReleaseDialog.tsx b/...ages/sanity/src/core/releases/components/documentHeader/dialog/CopyToNewReleaseDialog.tsx
@@ -32,9 +32,9 @@ export function CopyToNewReleaseDialog(props: {
   const schema = useSchema()
   const schemaType = schema.get(documentType)
 
-  const [newReleaseId] = useState(createReleaseId())
+  const [newReleaseId] = useState(createReleaseId)
 
-  const [value, setValue] = useState((): EditableReleaseDocument => {
+  const [release, setRelease] = useState((): EditableReleaseDocument => {
     return {
       _id: newReleaseId,
       metadata: {
@@ -47,7 +47,7 @@ export function CopyToNewReleaseDialog(props: {
   const [isSubmitting, setIsSubmitting] = useState(false)
 
   const [isScheduledDateInPast, setIsScheduledDateInPast] = useState(() =>
-    getIsScheduledDateInPast(value),
+    getIsScheduledDateInPast(release),
   )
 
   const telemetry = useTelemetry()
@@ -56,7 +56,7 @@ export function CopyToNewReleaseDialog(props: {
   const displayTitle = title || t('release.placeholder-untitled-release')
 
   const handleOnChange = useCallback((changedValue: EditableReleaseDocument) => {
-    setValue(changedValue)
+    setRelease(changedValue)
 
     // when the value changes, re-evaluate if the scheduled date is in the past
     setIsScheduledDateInPast(getIsScheduledDateInPast(changedValue))
@@ -79,7 +79,7 @@ export function CopyToNewReleaseDialog(props: {
     try {
       setIsSubmitting(true)
 
-      await createRelease(value)
+      await createRelease(release)
 
       await handleAddVersion()
       telemetry.log(CreatedRelease, {origin: 'document-panel'})
@@ -94,9 +94,9 @@ export function CopyToNewReleaseDialog(props: {
     } finally {
       setIsSubmitting(false)
     }
-  }, [createRelease, handleAddVersion, isScheduledDateInPast, tRelease, telemetry, toast, value])
+  }, [createRelease, handleAddVersion, isScheduledDateInPast, tRelease, telemetry, toast, release])
 
-  const handleOnMouseEnter = () => setIsScheduledDateInPast(getIsScheduledDateInPast(value))
+  const handleOnMouseEnter = () => setIsScheduledDateInPast(getIsScheduledDateInPast(release))
 
   return (
     <Dialog
@@ -155,7 +155,7 @@ export function CopyToNewReleaseDialog(props: {
       </Box>
 
       <Box paddingX={5} paddingY={3}>
-        <ReleaseForm onChange={handleOnChange} value={value} />
+        <ReleaseForm onChange={handleOnChange} value={release} />
       </Box>
     </Dialog>
   )

diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseTypePicker.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseTypePicker.tsx
@@ -19,6 +19,8 @@ import {useReleaseOperations} from '../../store/useReleaseOperations'
 import {getReleaseTone} from '../../util/getReleaseTone'
 import {getPublishDateFromRelease, isReleaseScheduledOrScheduling} from '../../util/util'
 
+const dateInputFormat = 'PP HH:mm'
+
 export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.Element {
   const {release} = props
 
@@ -134,7 +136,7 @@ export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.
   }, [])
 
   const handleInputChange = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
-    const parsedDate = parse(event.currentTarget.value, 'PP HH:mm', new Date())
+    const parsedDate = parse(event.currentTarget.value, dateInputFormat, new Date())
 
     if (isValid(parsedDate)) {
       setIsIntendedScheduleDateInPast(isBefore(parsedDate, new Date()))
@@ -182,7 +184,7 @@ export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.
               </Card>
             )}
             <LazyTextInput
-              value={inputValue ? format(inputValue, 'PP HH:mm') : undefined}
+              value={inputValue ? format(inputValue, dateInputFormat) : undefined}
               onChange={handleInputChange}
             />
             <DatePicker