From 6954a1892b7d9b86c81c7b1acc342aec8efac53c Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 6 Mar 2025 16:42:13 +0800
Subject: [PATCH] fix: handle date format

---
 .../components/datasets/metadata/base/date-picker.tsx | 11 +++++------
 .../metadata/metadata-document/info-group.tsx         |  9 +++++++--
 web/i18n/en-US/dataset.ts                             |  1 +
 web/i18n/zh-Hans/dataset.ts                           |  1 +
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/app/components/datasets/metadata/base/date-picker.tsx b/web/app/components/datasets/metadata/base/date-picker.tsx
index eb65d43a61..13ae3f39a2 100644
--- a/web/app/components/datasets/metadata/base/date-picker.tsx
+++ b/web/app/components/datasets/metadata/base/date-picker.tsx
@@ -9,7 +9,6 @@ import cn from '@/utils/classnames'
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useTranslation } from 'react-i18next'
-import { useAppContext } from '@/context/app-context'
 
 type Props = {
   className?: string
@@ -22,12 +21,12 @@ const WrappedDatePicker = ({
   onChange,
 }: Props) => {
   const { t } = useTranslation()
-  const { userProfile: { timezone } } = useAppContext()
+  // const { userProfile: { timezone } } = useAppContext()
   const { formatTime: formatTimestamp } = useTimestamp()
 
   const handleDateChange = useCallback((date?: dayjs.Dayjs) => {
     if (date)
-      onChange(date.valueOf())
+      onChange(date.unix())
     else
       onChange(null)
   }, [onChange])
@@ -43,7 +42,7 @@ const WrappedDatePicker = ({
             value ? 'text-text-secondary' : 'text-text-tertiary',
           )}
         >
-          {value ? formatTimestamp(dayjs.utc(value).tz(timezone).valueOf() / 1000, t('datasetDocuments.metadata.dateTimeFormat')) : 'Choose a time...'}
+          {value ? formatTimestamp(value, t('datasetDocuments.metadata.dateTimeFormat')) : t('dataset.metadata.chooseTime')}
         </div>
         <RiCloseCircleFill
           className={cn(
@@ -60,11 +59,11 @@ const WrappedDatePicker = ({
         />
       </div>
     )
-  }, [className, value, handleDateChange])
+  }, [className, value, formatTimestamp, t, handleDateChange])
 
   return (
     <DatePicker
-      value={dayjs(value || Date.now())}
+      value={dayjs(value ? value * 1000 : Date.now())}
       onChange={handleDateChange}
       onClear={handleDateChange}
       renderTrigger={renderTrigger}
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index fee5b51725..e5490cf1fe 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useRouter } from 'next/navigation'
-import { type MetadataItemWithValue, isShowManageMetadataLocalStorageKey } from '../types'
+import { DataType, type MetadataItemWithValue, isShowManageMetadataLocalStorageKey } from '../types'
 import Field from './field'
 import InputCombined from '../edit-metadata-batch/input-combined'
 import { RiDeleteBinLine, RiQuestionLine } from '@remixicon/react'
@@ -11,6 +11,8 @@ import cn from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import SelectMetadataModal from '../metadata-dataset/select-metadata-modal'
 import AddMetadataButton from '../add-metadata-button'
+import useTimestamp from '@/hooks/use-timestamp'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   dataSetId: string
@@ -46,6 +48,9 @@ const InfoGroup: FC<Props> = ({
   onAdd,
 }) => {
   const router = useRouter()
+  const { t } = useTranslation()
+  const { formatTime: formatTimestamp } = useTimestamp()
+
   const handleMangeMetadata = () => {
     localStorage.setItem(isShowManageMetadataLocalStorageKey, 'true')
     router.push(`/datasets/${dataSetId}/documents`)
@@ -96,7 +101,7 @@ const InfoGroup: FC<Props> = ({
                   <RiDeleteBinLine className='size-4' onClick={() => onDelete?.(item)} />
                 </div>
               </div>
-            ) : (<div className='py-1 system-xs-regular text-text-secondary'>{item.value}</div>)}
+            ) : (<div className='py-1 system-xs-regular text-text-secondary'>{(item.value && item.type === DataType.time) ? formatTimestamp((item.value as number), t('datasetDocuments.metadata.dateTimeFormat')) : item.value}</div>)}
           </Field>
         ))}
       </div>
diff --git a/web/i18n/en-US/dataset.ts b/web/i18n/en-US/dataset.ts
index 79040d62d0..8b95eb6a28 100644
--- a/web/i18n/en-US/dataset.ts
+++ b/web/i18n/en-US/dataset.ts
@@ -171,6 +171,7 @@ const translation = {
   metadata: {
     metadata: 'Metadata',
     addMetadata: 'Add Metadata',
+    chooseTime: 'Choose a time...',
     createMetadata: {
       title: 'New Metadata',
       back: 'Back',
diff --git a/web/i18n/zh-Hans/dataset.ts b/web/i18n/zh-Hans/dataset.ts
index a2b61888f3..9fdccfa33f 100644
--- a/web/i18n/zh-Hans/dataset.ts
+++ b/web/i18n/zh-Hans/dataset.ts
@@ -171,6 +171,7 @@ const translation = {
   metadata: {
     metadata: '元数据',
     addMetadata: '添加元数据',
+    chooseTime: '选择时间',
     createMetadata: {
       title: '新建元数据',
       back: '返回',