diff --git a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx index c09a797c..4100202b 100644 --- a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx +++ b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx @@ -1,14 +1,12 @@ import { GridTable, GridColumn, Icon } from 'react-basics'; -import { useLocale, useMessages, useTeamUrl, useTimezone } from 'components/hooks'; +import { useMessages, useTeamUrl, useTimezone } from 'components/hooks'; import Empty from 'components/common/Empty'; import Avatar from 'components/common/Avatar'; import Link from 'next/link'; import Icons from 'components/icons'; -import { formatInTimeZone } from 'date-fns-tz'; export function EventsTable({ data = [] }) { - const { dateLocale } = useLocale(); - const { timezone } = useTimezone(); + const { formatDate } = useTimezone(); const { formatMessage, labels } = useMessages(); const { renderTeamUrl } = useTeamUrl(); @@ -37,11 +35,7 @@ export function EventsTable({ data = [] }) { }} - {row => - formatInTimeZone(new Date(row.createdAt.split(' ').join('T') + 'Z'), timezone, 'PPPpp', { - locale: dateLocale, - }) - } + {row => formatDate(row.createdAt, 'PPPpp')} ); diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx index 0f346f8b..e2668856 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx @@ -1,14 +1,12 @@ import Link from 'next/link'; import { GridColumn, GridTable } from 'react-basics'; -import { useFormat, useLocale, useMessages, useTimezone } from 'components/hooks'; +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 { formatInTimeZone } from 'date-fns-tz'; export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) { - const { dateLocale } = useLocale(); - const { timezone } = useTimezone(); + const { formatDate } = useTimezone(); const { formatMessage, labels } = useMessages(); const { formatValue } = useFormat(); @@ -53,11 +51,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean )} - {row => - formatInTimeZone(new Date(row.createdAt.split(' ').join('T') + 'Z'), timezone, 'PPPpp', { - locale: dateLocale, - }) - } + {row => formatDate(row.createdAt, 'PPPpp')} ); diff --git a/src/components/hooks/useTimezone.ts b/src/components/hooks/useTimezone.ts index 8bd76504..067441f5 100644 --- a/src/components/hooks/useTimezone.ts +++ b/src/components/hooks/useTimezone.ts @@ -1,5 +1,6 @@ import { setItem } from 'next-basics'; import { TIMEZONE_CONFIG } from 'lib/constants'; +import { formatInTimeZone } from 'date-fns-tz'; import useStore, { setTimezone } from 'store/app'; const selector = (state: { timezone: string }) => state.timezone; @@ -12,7 +13,11 @@ export function useTimezone() { setTimezone(value); }; - return { timezone, saveTimezone }; + const formatDate = (date: string, pattern: string) => { + return formatInTimeZone(date.split(' ').join('T') + 'Z', timezone, pattern); + }; + + return { timezone, saveTimezone, formatDate }; } export default useTimezone;