From fc758745dc30bf87b9bc364e8dda94ac734074ba Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Tue, 13 Aug 2024 01:04:28 -0700
Subject: [PATCH] Fixed date display for session profile.

---
 .../sessions/[sessionId]/SessionActivity.tsx          | 11 ++++-------
 .../[websiteId]/sessions/[sessionId]/SessionInfo.tsx  |  8 ++++----
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
index 69407584..def3f0ba 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
@@ -1,8 +1,7 @@
-import { formatDate } from 'lib/date';
 import { isSameDay } from 'date-fns';
 import { Loading, Icon, StatusLight } from 'react-basics';
 import Icons from 'components/icons';
-import { useLocale, useSessionActivity } from 'components/hooks';
+import { useSessionActivity, useTimezone } from 'components/hooks';
 import styles from './SessionActivity.module.css';
 
 export function SessionActivity({
@@ -16,7 +15,7 @@ export function SessionActivity({
   startDate: string;
   endDate: string;
 }) {
-  const { locale } = useLocale();
+  const { formatDate } = useTimezone();
   const { data, isLoading } = useSessionActivity(websiteId, sessionId, startDate, endDate);
 
   if (isLoading) {
@@ -34,14 +33,12 @@ export function SessionActivity({
         return (
           <>
             {showHeader && (
-              <div className={styles.header}>
-                {formatDate(new Date(createdAt), 'EEEE, PPP', locale)}
-              </div>
+              <div className={styles.header}>{formatDate(createdAt, 'EEEE, PPP')}</div>
             )}
             <div key={eventId} className={styles.row}>
               <div className={styles.time}>
                 <StatusLight color={`#${visitId?.substring(0, 6)}`}>
-                  {formatDate(new Date(createdAt), 'h:mm:ss aaa', locale)}
+                  {formatDate(createdAt, 'h:mm:ss aaa')}
                 </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 4b3e8a06..641d2941 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
@@ -1,5 +1,4 @@
-import { formatDate } from 'lib/date';
-import { useFormat, useLocale, useMessages, useRegionNames } from 'components/hooks';
+import { useFormat, useLocale, useMessages, useRegionNames, useTimezone } from 'components/hooks';
 import TypeIcon from 'components/common/TypeIcon';
 import { Icon, CopyIcon } from 'react-basics';
 import Icons from 'components/icons';
@@ -7,6 +6,7 @@ import styles from './SessionInfo.module.css';
 
 export default function SessionInfo({ data }) {
   const { locale } = useLocale();
+  const { formatDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
   const { getRegionName } = useRegionNames(locale);
@@ -20,10 +20,10 @@ export default function SessionInfo({ data }) {
         </dd>
 
         <dt>{formatMessage(labels.lastSeen)}</dt>
-        <dd>{formatDate(new Date(data?.lastAt), 'EEEE, PPPpp', locale)}</dd>
+        <dd>{formatDate(data?.lastAt, 'EEEE, PPPpp')}</dd>
 
         <dt>{formatMessage(labels.firstSeen)}</dt>
-        <dd>{formatDate(new Date(data?.firstAt), 'EEEE, PPPpp', locale)}</dd>
+        <dd>{formatDate(data?.firstAt, 'EEEE, PPPpp')}</dd>
 
         <dt>{formatMessage(labels.country)}</dt>
         <dd>