Created formatDate function for rendering dates in correct timezone.

This commit is contained in:
Mike Cao 2024-08-13 00:40:19 -07:00
parent b11b2e3524
commit 9b005e11c0
3 changed files with 12 additions and 19 deletions

View File

@ -1,14 +1,12 @@
import { GridTable, GridColumn, Icon } from 'react-basics'; 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 Empty from 'components/common/Empty';
import Avatar from 'components/common/Avatar'; import Avatar from 'components/common/Avatar';
import Link from 'next/link'; import Link from 'next/link';
import Icons from 'components/icons'; import Icons from 'components/icons';
import { formatInTimeZone } from 'date-fns-tz';
export function EventsTable({ data = [] }) { export function EventsTable({ data = [] }) {
const { dateLocale } = useLocale(); const { formatDate } = useTimezone();
const { timezone } = useTimezone();
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useTeamUrl(); const { renderTeamUrl } = useTeamUrl();
@ -37,11 +35,7 @@ export function EventsTable({ data = [] }) {
}} }}
</GridColumn> </GridColumn>
<GridColumn name="created" label={formatMessage(labels.created)} width={'300px'}> <GridColumn name="created" label={formatMessage(labels.created)} width={'300px'}>
{row => {row => formatDate(row.createdAt, 'PPPpp')}
formatInTimeZone(new Date(row.createdAt.split(' ').join('T') + 'Z'), timezone, 'PPPpp', {
locale: dateLocale,
})
}
</GridColumn> </GridColumn>
</GridTable> </GridTable>
); );

View File

@ -1,14 +1,12 @@
import Link from 'next/link'; import Link from 'next/link';
import { GridColumn, GridTable } from 'react-basics'; 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 Avatar from 'components/common/Avatar';
import styles from './SessionsTable.module.css'; import styles from './SessionsTable.module.css';
import TypeIcon from 'components/common/TypeIcon'; import TypeIcon from 'components/common/TypeIcon';
import { formatInTimeZone } from 'date-fns-tz';
export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) { export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
const { dateLocale } = useLocale(); const { formatDate } = useTimezone();
const { timezone } = useTimezone();
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat(); const { formatValue } = useFormat();
@ -53,11 +51,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
)} )}
</GridColumn> </GridColumn>
<GridColumn name="lastAt" label={formatMessage(labels.lastSeen)}> <GridColumn name="lastAt" label={formatMessage(labels.lastSeen)}>
{row => {row => formatDate(row.createdAt, 'PPPpp')}
formatInTimeZone(new Date(row.createdAt.split(' ').join('T') + 'Z'), timezone, 'PPPpp', {
locale: dateLocale,
})
}
</GridColumn> </GridColumn>
</GridTable> </GridTable>
); );

View File

@ -1,5 +1,6 @@
import { setItem } from 'next-basics'; import { setItem } from 'next-basics';
import { TIMEZONE_CONFIG } from 'lib/constants'; import { TIMEZONE_CONFIG } from 'lib/constants';
import { formatInTimeZone } from 'date-fns-tz';
import useStore, { setTimezone } from 'store/app'; import useStore, { setTimezone } from 'store/app';
const selector = (state: { timezone: string }) => state.timezone; const selector = (state: { timezone: string }) => state.timezone;
@ -12,7 +13,11 @@ export function useTimezone() {
setTimezone(value); 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; export default useTimezone;