From 739f8b40a0a6bb8aaf4689515ceedcab4a784671 Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Wed, 28 Aug 2024 11:26:38 +0900
Subject: [PATCH] i18n datetime format

---
 .../(main)/websites/[websiteId]/events/EventsTable.tsx |  4 +++-
 .../websites/[websiteId]/realtime/RealtimeLog.tsx      |  5 ++++-
 .../websites/[websiteId]/sessions/SessionsTable.tsx    |  4 +++-
 .../sessions/[sessionId]/SessionActivity.tsx           |  8 ++++++--
 .../[websiteId]/sessions/[sessionId]/SessionInfo.tsx   | 10 ++++++++--
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
index 42eb8f7ad..fb1917d30 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
@@ -4,8 +4,10 @@ import Empty from 'components/common/Empty';
 import Avatar from 'components/common/Avatar';
 import Link from 'next/link';
 import Icons from 'components/icons';
+import { useIntl } from 'react-intl';
 
 export function EventsTable({ data = [] }) {
+  const intl = useIntl();
   const { formatTimezoneDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
   const { renderTeamUrl } = useTeamUrl();
@@ -35,7 +37,7 @@ export function EventsTable({ data = [] }) {
         }}
       </GridColumn>
       <GridColumn name="created" label={formatMessage(labels.created)} width={'300px'}>
-        {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
+        {row => formatTimezoneDate(intl, row.createdAt, { dateStyle: 'long', timeStyle: 'medium' })}
       </GridColumn>
     </GridTable>
   );
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
index f40be9dbc..1f1003313 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
@@ -12,6 +12,7 @@ import { Icon, SearchField, StatusLight, Text } from 'react-basics';
 import { FixedSizeList } from 'react-window';
 import { WebsiteContext } from '../WebsiteProvider';
 import styles from './RealtimeLog.module.css';
+import { useIntl } from 'react-intl';
 
 const TYPE_ALL = 'all';
 const TYPE_PAGEVIEW = 'pageview';
@@ -25,6 +26,7 @@ const icons = {
 };
 
 export function RealtimeLog({ data }: { data: RealtimeData }) {
+  const intl = useIntl();
   const website = useContext(WebsiteContext);
   const [search, setSearch] = useState('');
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
@@ -53,7 +55,8 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
     },
   ];
 
-  const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'h:mm:ss');
+  const getTime = ({ createdAt, firstAt }) =>
+    formatTimezoneDate(intl, firstAt || createdAt, { timeStyle: 'medium' });
 
   const getColor = ({ id, sessionId }) => stringToColor(sessionId || id);
 
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
index 3fea4836c..0a682c5d8 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
@@ -4,8 +4,10 @@ import { useFormat, useMessages, useTimezone } from 'components/hooks';
 import Avatar from 'components/common/Avatar';
 import styles from './SessionsTable.module.css';
 import TypeIcon from 'components/common/TypeIcon';
+import { useIntl } from 'react-intl';
 
 export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
+  const intl = useIntl();
   const { formatTimezoneDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
@@ -51,7 +53,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
         )}
       </GridColumn>
       <GridColumn name="lastAt" label={formatMessage(labels.lastSeen)}>
-        {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
+        {row => formatTimezoneDate(intl, row.createdAt, { dateStyle: 'long', timeStyle: 'medium' })}
       </GridColumn>
     </GridTable>
   );
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
index fd498ac3a..e1f0732b9 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
@@ -3,6 +3,7 @@ import { Loading, Icon, StatusLight } from 'react-basics';
 import Icons from 'components/icons';
 import { useSessionActivity, useTimezone } from 'components/hooks';
 import styles from './SessionActivity.module.css';
+import { useIntl } from 'react-intl';
 
 export function SessionActivity({
   websiteId,
@@ -15,6 +16,7 @@ export function SessionActivity({
   startDate: Date;
   endDate: Date;
 }) {
+  const intl = useIntl();
   const { formatTimezoneDate } = useTimezone();
   const { data, isLoading } = useSessionActivity(websiteId, sessionId, startDate, endDate);
 
@@ -33,12 +35,14 @@ export function SessionActivity({
         return (
           <>
             {showHeader && (
-              <div className={styles.header}>{formatTimezoneDate(createdAt, 'EEEE, PPP')}</div>
+              <div className={styles.header}>
+                {formatTimezoneDate(intl, createdAt, { dateStyle: 'full' })}
+              </div>
             )}
             <div key={eventId} className={styles.row}>
               <div className={styles.time}>
                 <StatusLight color={`#${visitId?.substring(0, 6)}`}>
-                  {formatTimezoneDate(createdAt, 'h:mm:ss aaa')}
+                  {formatTimezoneDate(intl, createdAt, { timeStyle: 'medium' })}
                 </StatusLight>
               </div>
               <Icon>{eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
index 6f9a8f3d5..66353816f 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
@@ -3,8 +3,10 @@ import TypeIcon from 'components/common/TypeIcon';
 import { Icon, CopyIcon } from 'react-basics';
 import Icons from 'components/icons';
 import styles from './SessionInfo.module.css';
+import { useIntl } from 'react-intl';
 
 export default function SessionInfo({ data }) {
+  const intl = useIntl();
   const { locale } = useLocale();
   const { formatTimezoneDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
@@ -20,10 +22,14 @@ export default function SessionInfo({ data }) {
         </dd>
 
         <dt>{formatMessage(labels.lastSeen)}</dt>
-        <dd>{formatTimezoneDate(data?.lastAt, 'EEEE, PPPpp')}</dd>
+        <dd>
+          {formatTimezoneDate(intl, data?.lastAt, { dateStyle: 'full', timeStyle: 'medium' })}
+        </dd>
 
         <dt>{formatMessage(labels.firstSeen)}</dt>
-        <dd>{formatTimezoneDate(data?.firstAt, 'EEEE, PPPpp')}</dd>
+        <dd>
+          {formatTimezoneDate(intl, data?.firstAt, { dateStyle: 'full', timeStyle: 'medium' })}
+        </dd>
 
         <dt>{formatMessage(labels.country)}</dt>
         <dd>