refactor(date-picker): streamline date serialization and normalization functions

x0sina · x0sina · commit 077af77ae0c4 · 2026-05-06T13:43:39.000+03:30
diff --git a/dashboard/src/components/common/date-picker.tsx b/dashboard/src/components/common/date-picker.tsx
@@ -11,8 +11,8 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { Input } from '@/components/ui/input'
 import { useTranslation } from 'react-i18next'
 import { Calendar as PersianCalendar } from '@/components/ui/persian-calendar'
-import { formatDateByLocale, formatDateShort, isDateDisabled, isPersianLocaleLanguage } from '@/utils/datePickerUtils'
-import { formatOffsetDateTime, parseDateInput, toUnixSeconds } from '@/utils/dateTimeParsing'
+import { formatDateByLocale, formatDateShort, isDateDisabled, isPersianLocaleLanguage, serializeDatePickerValue } from '@/utils/datePickerUtils'
+import { parseDateInput } from '@/utils/dateTimeParsing'
 import { useTheme } from '@/components/common/theme-provider'
 import { DATE_PICKER_PREFERENCE_KEY, getDatePickerPreference, type DatePickerPreference } from '@/utils/userPreferenceStorage'
 import useDirDetection from '@/hooks/use-dir-detection'
@@ -263,7 +263,7 @@ export function DatePicker({
       }
 
       setInternalDate(selectedDate)
-      const value = useUtcTimestamp ? toUnixSeconds(selectedDate) : formatOffsetDateTime(selectedDate)
+      const value = serializeDatePickerValue(selectedDate, { useUtcTimestamp })
       handleSingleDateChange(selectedDate)
       onFieldChange?.(fieldName, value)
       setTimeout(() => {
@@ -294,7 +294,7 @@ export function DatePicker({
           newDate.setTime(now.getTime())
         }
 
-        const value = useUtcTimestamp ? toUnixSeconds(newDate) : formatOffsetDateTime(newDate)
+        const value = serializeDatePickerValue(newDate, { useUtcTimestamp })
         setInternalDate(newDate)
         handleSingleDateChange(newDate)
         onFieldChange?.(fieldName, value)
diff --git a/dashboard/src/components/dialogs/user-modal.tsx b/dashboard/src/components/dialogs/user-modal.tsx
@@ -36,7 +36,8 @@ import {
   type UserResponse,
 } from '@/service/api'
 import { dateUtils, useRelativeExpiryDate } from '@/utils/dateFormatter'
-import { formatOffsetDateTime, parseDateInput, toDisplayDate, toUnixSeconds } from '@/utils/dateTimeParsing'
+import { normalizeDatePickerValueForSubmit, serializeDatePickerValue, toDatePickerDisplayDate } from '@/utils/datePickerUtils'
+import { parseDateInput } from '@/utils/dateTimeParsing'
 import { bytesToFormGigabytes, formatBytes, gbToBytes } from '@/utils/formatByte'
 import { invalidateUserMetricsQueries, upsertUserInUsersCache } from '@/utils/usersCache'
 import { generateWireGuardKeyPair, getWireGuardPublicKey } from '@/utils/wireguard'
@@ -59,8 +60,6 @@ interface UserModalProps {
   onSuccessCallback?: (user: UserResponse) => void
 }
 
-const isDate = (v: unknown): v is Date => typeof v === 'object' && v !== null && v instanceof Date
-
 // Add template validation schema
 const templateUserSchema = z.object({
   username: z.string().min(3, 'validation.minLength').max(128, 'validation.maxLength'),
@@ -104,8 +103,7 @@ const ExpiryDateField = ({
   const handleDateChange = React.useCallback(
     (date: Date | undefined) => {
       if (date) {
-        // Use the same logic as centralized DatePicker
-        const value = useUtcTimestamp ? toUnixSeconds(date) : formatOffsetDateTime(date)
+        const value = serializeDatePickerValue(date, { useUtcTimestamp })
         field.onChange(value)
         handleFieldChange(fieldName, value)
       } else {
@@ -395,6 +393,7 @@ function UserModal({ isDialogOpen, onOpenChange, form, editingUser, editingUserI
   const onHoldExpireDurationInputRef = React.useRef<string>('')
   const nextPlanExpireInputRef = React.useRef<string>('')
   const nextPlanDataLimitInputRef = React.useRef<string>('')
+  const previousStatusRef = React.useRef(status)
 
   const handleModalOpenChange = React.useCallback(
     (open: boolean) => {
@@ -459,42 +458,8 @@ function UserModal({ isDialogOpen, onOpenChange, form, editingUser, editingUserI
   const onHoldValue = form.watch('on_hold_timeout')
   const dataLimitValue = form.watch('data_limit')
 
-  let displayDate: Date | null = null
-  let onHoldDisplayDate: Date | null = null
-
-  // Handle various formats of expire value using the same logic as OnlineBadge/OnlineStatus
-  const parseDateValue = (value: unknown): Date | null => {
-    if (isDate(value)) {
-      return value
-    } else if (typeof value === 'string') {
-      if (value === '') {
-        return null
-      } else {
-        try {
-          const trimmedValue = value.trim()
-          const dayjsDate = parseDateInput(trimmedValue)
-          if (dayjsDate.isValid()) {
-            return toDisplayDate(trimmedValue)
-          }
-        } catch (error) {
-          // Ignore invalid values and return null.
-        }
-      }
-    } else if (typeof value === 'number') {
-      try {
-        const dayjsDate = parseDateInput(value)
-        if (dayjsDate.isValid()) {
-          return toDisplayDate(value)
-        }
-      } catch (error) {
-        // Ignore invalid values and return null.
-      }
-    }
-    return null
-  }
-
-  displayDate = parseDateValue(expireValue)
-  onHoldDisplayDate = parseDateValue(onHoldValue)
+  const displayDate = toDatePickerDisplayDate(expireValue)
+  const onHoldDisplayDate = toDatePickerDisplayDate(onHoldValue)
 
   // Query client for data refetching
   const queryClient = useQueryClient()
@@ -633,16 +598,25 @@ function UserModal({ isDialogOpen, onOpenChange, form, editingUser, editingUserI
   }, [selectedTemplateId, form, t])
 
   useEffect(() => {
+    const previousStatus = previousStatusRef.current
+
     if (status === 'on_hold') {
       form.setValue('expire', undefined)
       form.clearErrors('expire')
     } else {
+      if (previousStatus === 'on_hold') {
+        form.setValue('expire', undefined)
+        form.clearErrors('expire')
+        setExpireCalendarOpen(false)
+      }
       onHoldExpireDurationInputRef.current = ''
       form.setValue('on_hold_expire_duration', undefined)
       form.clearErrors('on_hold_expire_duration')
       form.setValue('on_hold_timeout', undefined)
       form.clearErrors('on_hold_timeout')
     }
+
+    previousStatusRef.current = status
   }, [status, form])
 
   useEffect(() => {
@@ -708,29 +682,6 @@ function UserModal({ isDialogOpen, onOpenChange, form, editingUser, editingUserI
     }
   }, [isDialogOpen, editingUser, hasNextPlanData, nextPlanManuallyDisabled, form, nextPlanUserTemplateId, nextPlanExpire, nextPlanDataLimit, nextPlanAddRemainingTraffic, editingUserData])
 
-  // Helper to convert expire field to needed schema using the same logic as other components
-  function normalizeExpire(expire: Date | string | number | null | undefined, useUtcTimestamp: boolean = false): string | number | undefined {
-    if (expire === '') return 0
-    if (expire === undefined || expire === null) return undefined
-
-    // For Date objects, convert to appropriate format
-    if (expire instanceof Date) {
-      return useUtcTimestamp ? toUnixSeconds(expire) : formatOffsetDateTime(expire)
-    }
-
-    // For strings and numbers, normalize via centralized parser.
-    try {
-      const dayjsDate = parseDateInput(expire)
-      if (dayjsDate.isValid()) {
-        return useUtcTimestamp ? toUnixSeconds(expire) : formatOffsetDateTime(expire)
-      }
-    } catch (error) {
-      // If dayjs parsing fails, return undefined
-    }
-
-    return undefined
-  }
-
   // Helper to clear group selection
   const clearGroups = () => form.setValue('group_ids', [])
   // Helper to clear template selection
@@ -1017,13 +968,14 @@ function UserModal({ isDialogOpen, onOpenChange, form, editingUser, editingUserI
         const preparedValues = {
           ...valuesWithoutNextPlan,
           data_limit: typeof values.data_limit === 'string' ? parseFloat(values.data_limit) : values.data_limit,
-          on_hold_expire_duration: values.on_hold_expire_duration
-            ? typeof values.on_hold_expire_duration === 'string'
-              ? parseFloat(values.on_hold_expire_duration)
-              : values.on_hold_expire_duration
-            : undefined,
-          expire: status === 'on_hold' ? undefined : normalizeExpire(values.expire),
-          on_hold_timeout: status === 'on_hold' ? normalizeExpire(values.on_hold_timeout) : undefined,
+          on_hold_expire_duration:
+            status === 'on_hold' && values.on_hold_expire_duration
+              ? typeof values.on_hold_expire_duration === 'string'
+                ? parseFloat(values.on_hold_expire_duration)
+                : values.on_hold_expire_duration
+              : undefined,
+          expire: status === 'on_hold' ? undefined : normalizeDatePickerValueForSubmit(values.expire),
+          on_hold_timeout: status === 'on_hold' ? normalizeDatePickerValueForSubmit(values.on_hold_timeout) : undefined,
           group_ids: Array.isArray(values.group_ids) ? values.group_ids : [],
           status: values.status,
         }
diff --git a/dashboard/src/components/users/action-buttons.tsx b/dashboard/src/components/users/action-buttons.tsx
@@ -14,7 +14,7 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { CopyButton } from '@/components/common/copy-button'
 import { bytesToFormGigabytes } from '@/utils/formatByte'
-import { normalizeExpireForEditForm } from '@/utils/userEditDateUtils'
+import { normalizeDatePickerValueForEditForm } from '@/utils/userEditDateUtils'
 import SubscriptionModal from '@/components/dialogs/subscription-modal'
 import SetOwnerModal from '@/components/dialogs/set-owner-modal'
 import UsageModal from '@/components/dialogs/usage-modal'
@@ -193,12 +193,12 @@ const buildUserEditFormValues = (user: UserResponse): UseEditFormValues => ({
   username: user.username,
   status: user.status === 'active' || user.status === 'on_hold' || user.status === 'disabled' ? (user.status as UseEditFormValues['status']) : 'active',
   data_limit: user.data_limit ? bytesToFormGigabytes(Number(user.data_limit)) : 0,
-  expire: normalizeExpireForEditForm(user.expire),
+  expire: normalizeDatePickerValueForEditForm(user.expire),
   note: user.note || '',
   data_limit_reset_strategy: user.data_limit_reset_strategy || undefined,
   group_ids: user.group_ids || [],
   on_hold_expire_duration: user.on_hold_expire_duration || undefined,
-  on_hold_timeout: user.on_hold_timeout || undefined,
+  on_hold_timeout: normalizeDatePickerValueForEditForm(user.on_hold_timeout),
   proxy_settings: user.proxy_settings || undefined,
   next_plan: user.next_plan
     ? {
@@ -923,4 +923,3 @@ export const ActionButtonsModalHost: FC = () => {
 }
 
 export default ActionButtons
-
diff --git a/dashboard/src/components/users/users-table.tsx b/dashboard/src/components/users/users-table.tsx
@@ -29,7 +29,7 @@ import {
   setUsersShowSelectionCheckbox,
 } from '@/utils/userPreferenceStorage'
 import { bytesToFormGigabytes } from '@/utils/formatByte'
-import { normalizeExpireForEditForm } from '@/utils/userEditDateUtils'
+import { normalizeDatePickerValueForEditForm } from '@/utils/userEditDateUtils'
 import { useQueryClient, useMutation } from '@tanstack/react-query'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -223,12 +223,12 @@ const UsersTable = memo(() => {
       username: selectedUser?.username,
       status: selectedUser?.status === 'active' || selectedUser?.status === 'on_hold' || selectedUser?.status === 'disabled' ? selectedUser?.status : 'active',
       data_limit: selectedUser?.data_limit ? bytesToFormGigabytes(Number(selectedUser.data_limit)) : undefined,
-      expire: normalizeExpireForEditForm(selectedUser?.expire),
+      expire: normalizeDatePickerValueForEditForm(selectedUser?.expire),
       note: selectedUser?.note || '',
       data_limit_reset_strategy: selectedUser?.data_limit_reset_strategy || undefined,
       group_ids: selectedUser?.group_ids || [],
       on_hold_expire_duration: selectedUser?.on_hold_expire_duration || undefined,
-      on_hold_timeout: selectedUser?.on_hold_timeout || undefined,
+      on_hold_timeout: normalizeDatePickerValueForEditForm(selectedUser?.on_hold_timeout),
       proxy_settings: selectedUser?.proxy_settings || undefined,
       next_plan: selectedUser?.next_plan
         ? {
@@ -247,12 +247,12 @@ const UsersTable = memo(() => {
         username: selectedUser.username,
         status: selectedUser.status === 'active' || selectedUser.status === 'on_hold' || selectedUser.status === 'disabled' ? selectedUser.status : 'active',
         data_limit: selectedUser.data_limit ? bytesToFormGigabytes(Number(selectedUser.data_limit)) : 0,
-        expire: normalizeExpireForEditForm(selectedUser.expire),
+        expire: normalizeDatePickerValueForEditForm(selectedUser.expire),
         note: selectedUser.note || '',
         data_limit_reset_strategy: selectedUser.data_limit_reset_strategy || undefined,
         group_ids: selectedUser.group_ids || [],
         on_hold_expire_duration: selectedUser.on_hold_expire_duration || undefined,
-        on_hold_timeout: selectedUser.on_hold_timeout || undefined,
+        on_hold_timeout: normalizeDatePickerValueForEditForm(selectedUser.on_hold_timeout),
         proxy_settings: selectedUser.proxy_settings || undefined,
         next_plan: selectedUser.next_plan
           ? {
diff --git a/dashboard/src/utils/datePickerUtils.ts b/dashboard/src/utils/datePickerUtils.ts
@@ -1,11 +1,88 @@
 import { DateRange } from 'react-day-picker'
 import { Period } from '@/service/api'
 import { format } from 'date-fns'
+import { type DateInput, formatOffsetDateTime, parseDateInput, toDisplayDate, toLocalOffsetDateTime, toUnixSeconds } from './dateTimeParsing'
+
+type DatePickerValue = Date | string | number | null | undefined
+
+type DatePickerSerializeOptions = {
+  useUtcTimestamp?: boolean
+}
+
+const UTC_SUFFIX_PATTERN = /Z$/i
 
 /** True when the app language is Persian (e.g. `fa`, `fa-IR` from i18next or the browser). */
 export const isPersianLocaleLanguage = (language: string | undefined): boolean =>
   (language ?? '').toLowerCase().startsWith('fa')
 
+export const serializeDatePickerValue = (value: DateInput, { useUtcTimestamp = false }: DatePickerSerializeOptions = {}): string | number => {
+  return useUtcTimestamp ? toUnixSeconds(value) : formatOffsetDateTime(value)
+}
+
+export const normalizeDatePickerValueForEditForm = (value: string | number | null | undefined) => {
+  if (typeof value === 'string' && UTC_SUFFIX_PATTERN.test(value.trim())) {
+    return toLocalOffsetDateTime(value)
+  }
+
+  return value
+}
+
+export const toDatePickerDisplayDate = (value: unknown): Date | null => {
+  if (value instanceof Date) {
+    return value
+  }
+
+  if (typeof value === 'string') {
+    const trimmedValue = value.trim()
+    if (trimmedValue === '') return null
+
+    try {
+      const parsed = parseDateInput(trimmedValue)
+      return parsed.isValid() ? toDisplayDate(trimmedValue) : null
+    } catch {
+      return null
+    }
+  }
+
+  if (typeof value === 'number') {
+    try {
+      const parsed = parseDateInput(value)
+      return parsed.isValid() ? toDisplayDate(value) : null
+    } catch {
+      return null
+    }
+  }
+
+  return null
+}
+
+export const normalizeDatePickerValueForSubmit = (value: DatePickerValue | '', options: DatePickerSerializeOptions = {}): string | number | undefined => {
+  if (value === undefined || value === null) return undefined
+
+  if (typeof value === 'string') {
+    const trimmedValue = value.trim()
+    if (trimmedValue === '') return 0
+
+    try {
+      const parsed = parseDateInput(trimmedValue)
+      return parsed.isValid() ? serializeDatePickerValue(trimmedValue, options) : undefined
+    } catch {
+      return undefined
+    }
+  }
+
+  if (value instanceof Date || typeof value === 'number') {
+    try {
+      const parsed = parseDateInput(value)
+      return parsed.isValid() ? serializeDatePickerValue(value, options) : undefined
+    } catch {
+      return undefined
+    }
+  }
+
+  return undefined
+}
+
 /**
  * Determines the appropriate period (hour or day) based on the date range
  * @param range - The date range to analyze
diff --git a/dashboard/src/utils/userEditDateUtils.ts b/dashboard/src/utils/userEditDateUtils.ts
@@ -1,11 +1,5 @@
-import { toLocalOffsetDateTime } from './dateTimeParsing'
+import { normalizeDatePickerValueForEditForm } from './datePickerUtils'
 
-const UTC_SUFFIX_PATTERN = /Z$/i
+export { normalizeDatePickerValueForEditForm }
 
-export const normalizeExpireForEditForm = (expire: string | number | null | undefined) => {
-  if (typeof expire === 'string' && UTC_SUFFIX_PATTERN.test(expire.trim())) {
-    return toLocalOffsetDateTime(expire)
-  }
-
-  return expire
-}
+export const normalizeExpireForEditForm = normalizeDatePickerValueForEditForm
