From 5a415993c3f036993ddd451a0d4098afc27c27b4 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Thu, 14 Nov 2024 14:13:43 +0800
Subject: [PATCH] refactor(extension): display dataset admin time in local time
 (#353)

---
 .../containers/dataset/blocks/StatusBlock.tsx | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/extension/src/editor/containers/dataset/blocks/StatusBlock.tsx b/extension/src/editor/containers/dataset/blocks/StatusBlock.tsx
index 5fc76d04..6cf53340 100644
--- a/extension/src/editor/containers/dataset/blocks/StatusBlock.tsx
+++ b/extension/src/editor/containers/dataset/blocks/StatusBlock.tsx
@@ -27,14 +27,24 @@ export const StatusBlock: React.FC<StatusBlockProps> = ({ dataset, ...props }) =
         : { value: "published", label: "公開済" },
     [dataset?.admin?.status],
   );
+
+  const localCreatedAt = useMemo(
+    () => UTCTimeToLocalTime(dataset?.admin?.createdAt),
+    [dataset?.admin?.createdAt],
+  );
+  const localUpdatedAt = useMemo(
+    () => UTCTimeToLocalTime(dataset?.admin?.updatedAt),
+    [dataset?.admin?.updatedAt],
+  );
+
   return (
     <EditorBlock title="Status" expandable {...props}>
       <BlockContentWrapper>
         <EditorCommonField label="Status" inline>
           <PublishStatus status={status.value}>{status.label}</PublishStatus>
         </EditorCommonField>
-        <EditorTextField label="Created At" value={dataset?.admin?.createdAt ?? ""} disabled />
-        <EditorTextField label="Updated At" value={dataset?.admin?.updatedAt ?? ""} disabled />
+        <EditorTextField label="Created At" value={localCreatedAt} disabled />
+        <EditorTextField label="Updated At" value={localUpdatedAt} disabled />
         <EditorTextField
           label="CMS URL"
           value={dataset?.admin?.cmsUrl ?? ""}
@@ -60,3 +70,16 @@ const PublishStatus = styled("div")<{ status: "alpha" | "beta" | "published" }>(
     borderRadius: theme.shape.borderRadius,
   }),
 );
+
+function UTCTimeToLocalTime(utcTime: string): string {
+  if (!utcTime) return "";
+  return new Date(utcTime).toLocaleString("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  });
+}