From 511fec2ddba3282abc632b0774375c047c8ea09c Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Tue, 20 Aug 2024 14:15:47 -0700 Subject: [PATCH] Fixed timezone date format. --- .../[websiteId]/events/EventsTable.tsx | 4 ++-- .../[websiteId]/realtime/RealtimeLog.tsx | 4 ++-- .../[websiteId]/sessions/SessionsTable.tsx | 4 ++-- .../sessions/[sessionId]/SessionActivity.tsx | 6 +++--- .../sessions/[sessionId]/SessionInfo.tsx | 6 +++--- src/components/hooks/useTimezone.ts | 18 ++++++++++-------- 6 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx index 4100202b..42eb8f7a 100644 --- a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx +++ b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx @@ -6,7 +6,7 @@ import Link from 'next/link'; import Icons from 'components/icons'; export function EventsTable({ data = [] }) { - const { formatDate } = useTimezone(); + const { formatTimezoneDate } = useTimezone(); const { formatMessage, labels } = useMessages(); const { renderTeamUrl } = useTeamUrl(); @@ -35,7 +35,7 @@ export function EventsTable({ data = [] }) { }} - {row => formatDate(row.createdAt, 'PPPpp')} + {row => formatTimezoneDate(row.createdAt, 'PPPpp')} ); diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx index 8bae2c17..98b7a924 100644 --- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx +++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx @@ -31,7 +31,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) { const { formatMessage, labels, messages, FormattedMessage } = useMessages(); const { formatValue } = useFormat(); const { locale } = useLocale(); - const { formatDate } = useTimezone(); + const { formatTimezoneDate } = useTimezone(); const { countryNames } = useCountryNames(locale); const [filter, setFilter] = useState(TYPE_ALL); @@ -54,7 +54,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) { }, ]; - const getTime = ({ createdAt, firstAt }) => formatDate(firstAt || createdAt, 'h:mm:ss'); + const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'h:mm:ss'); 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 e2668856..3fea4836 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx @@ -6,7 +6,7 @@ import styles from './SessionsTable.module.css'; import TypeIcon from 'components/common/TypeIcon'; export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) { - const { formatDate } = useTimezone(); + const { formatTimezoneDate } = useTimezone(); const { formatMessage, labels } = useMessages(); const { formatValue } = useFormat(); @@ -51,7 +51,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean )} - {row => formatDate(row.createdAt, 'PPPpp')} + {row => formatTimezoneDate(row.createdAt, 'PPPpp')} ); diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx index 187205e9..fd498ac3 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx @@ -15,7 +15,7 @@ export function SessionActivity({ startDate: Date; endDate: Date; }) { - const { formatDate } = useTimezone(); + const { formatTimezoneDate } = useTimezone(); const { data, isLoading } = useSessionActivity(websiteId, sessionId, startDate, endDate); if (isLoading) { @@ -33,12 +33,12 @@ export function SessionActivity({ return ( <> {showHeader && ( -
{formatDate(createdAt, 'EEEE, PPP')}
+
{formatTimezoneDate(createdAt, 'EEEE, PPP')}
)}
- {formatDate(createdAt, 'h:mm:ss aaa')} + {formatTimezoneDate(createdAt, 'h:mm:ss aaa')}
{eventName ? : } diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx index 641d2941..6f9a8f3d 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx @@ -6,7 +6,7 @@ import styles from './SessionInfo.module.css'; export default function SessionInfo({ data }) { const { locale } = useLocale(); - const { formatDate } = useTimezone(); + const { formatTimezoneDate } = useTimezone(); const { formatMessage, labels } = useMessages(); const { formatValue } = useFormat(); const { getRegionName } = useRegionNames(locale); @@ -20,10 +20,10 @@ export default function SessionInfo({ data }) {
{formatMessage(labels.lastSeen)}
-
{formatDate(data?.lastAt, 'EEEE, PPPpp')}
+
{formatTimezoneDate(data?.lastAt, 'EEEE, PPPpp')}
{formatMessage(labels.firstSeen)}
-
{formatDate(data?.firstAt, 'EEEE, PPPpp')}
+
{formatTimezoneDate(data?.firstAt, 'EEEE, PPPpp')}
{formatMessage(labels.country)}
diff --git a/src/components/hooks/useTimezone.ts b/src/components/hooks/useTimezone.ts index 24cef02c..d06562a2 100644 --- a/src/components/hooks/useTimezone.ts +++ b/src/components/hooks/useTimezone.ts @@ -13,13 +13,15 @@ export function useTimezone() { setTimezone(value); }; - const formatDate = (date: string, pattern: string) => { - return formatInTimeZone( - /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}Z$/.test(date) - ? date - : date.split(' ').join('T') + 'Z', - timezone, - pattern, + const formatTimezoneDate = (date: string, pattern: string) => { + return ( + formatInTimeZone( + /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}(\.[0-9]{3})?Z$/.test(date) + ? date + : date.split(' ').join('T') + 'Z', + timezone, + pattern, + ) + `, ${date}, ${pattern}, ${timezone}, ${formatInTimeZone(date, timezone, pattern)}` ); }; @@ -31,7 +33,7 @@ export function useTimezone() { return utcToZonedTime(date, timezone); }; - return { timezone, saveTimezone, formatDate, toUtc, fromUtc }; + return { timezone, saveTimezone, formatTimezoneDate, toUtc, fromUtc }; } export default useTimezone;