Created formatDate function for rendering dates in correct timezone.

umami-software · Aug 13, 2024 · 9b005e1 · 9b005e1
1 parent b11b2e3
commit 9b005e1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 19 deletions.
diff --git 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 = [] }) {
         }}
       </GridColumn>
       <GridColumn name="created" label={formatMessage(labels.created)} width={'300px'}>
-        {row =>
-          formatInTimeZone(new Date(row.createdAt.split(' ').join('T') + 'Z'), timezone, 'PPPpp', {
-            locale: dateLocale,
-          })
-        }
+        {row => formatDate(row.createdAt, 'PPPpp')}
       </GridColumn>
     </GridTable>
   );

diff --git 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
         )}
       </GridColumn>
       <GridColumn name="lastAt" label={formatMessage(labels.lastSeen)}>
-        {row =>
-          formatInTimeZone(new Date(row.createdAt.split(' ').join('T') + 'Z'), timezone, 'PPPpp', {
-            locale: dateLocale,
-          })
-        }
+        {row => formatDate(row.createdAt, 'PPPpp')}
       </GridColumn>
     </GridTable>
   );

diff --git 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;