diff --git a/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx b/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx index 7e97a831b1..7f6058b383 100644 --- a/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx +++ b/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx @@ -24,7 +24,6 @@ import { DELETE_API_TOKEN, } from '../../../providers/AccessProvider/permissions'; import { useStyles } from './ApiTokenList.styles'; -import { formatDateWithLocale } from '../../../common/util'; import Secret from './secret'; import { Delete, FileCopy } from '@material-ui/icons'; import Dialogue from '../../../common/Dialogue'; @@ -32,6 +31,7 @@ import { CREATE_API_TOKEN_BUTTON } from '../../../../testIds'; import { Alert } from '@material-ui/lab'; import copy from 'copy-to-clipboard'; import { useLocationSettings } from '../../../../hooks/useLocationSettings'; +import { formatDateYMD } from '../../../../utils/format-date'; interface IApiToken { createdAt: Date; @@ -146,7 +146,7 @@ export const ApiTokenList = () => { align="left" className={styles.hideSM} > - {formatDateWithLocale( + {formatDateYMD( item.createdAt, locationSettings.locale )} diff --git a/frontend/src/component/admin/invoice/InvoiceList.tsx b/frontend/src/component/admin/invoice/InvoiceList.tsx index adf6d589b9..8e766ef5ea 100644 --- a/frontend/src/component/admin/invoice/InvoiceList.tsx +++ b/frontend/src/component/admin/invoice/InvoiceList.tsx @@ -8,7 +8,6 @@ import { Button, } from '@material-ui/core'; import OpenInNew from '@material-ui/icons/OpenInNew'; -import { formatDateWithLocale } from '../../common/util'; import PageContent from '../../common/PageContent'; import HeaderTitle from '../../common/HeaderTitle'; import ConditionallyRender from '../../common/ConditionallyRender'; @@ -16,6 +15,7 @@ import { formatApiPath } from '../../../utils/format-path'; import useInvoices from '../../../hooks/api/getters/useInvoices/useInvoices'; import { IInvoice } from '../../../interfaces/invoice'; import { useLocationSettings } from '../../../hooks/useLocationSettings'; +import { formatDateYMD } from '../../../utils/format-date'; const PORTAL_URL = formatApiPath('api/admin/invoices/portal'); @@ -87,7 +87,7 @@ const InvoiceList = () => { style={{ textAlign: 'left' }} > {item.dueDate && - formatDateWithLocale( + formatDateYMD( item.dueDate, locationSettings.locale )} diff --git a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx index 6710630abc..7cdcb5f05c 100644 --- a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx +++ b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx @@ -1,20 +1,20 @@ import { - TableRow, - TableCell, Avatar, IconButton, + TableCell, + TableRow, Typography, } from '@material-ui/core'; -import { Edit, Lock, Delete } from '@material-ui/icons'; +import { Delete, Edit, Lock } from '@material-ui/icons'; import { SyntheticEvent, useContext } from 'react'; import { ADMIN } from '../../../../providers/AccessProvider/permissions'; import ConditionallyRender from '../../../../common/ConditionallyRender'; -import { formatDateWithLocale } from '../../../../common/util'; import AccessContext from '../../../../../contexts/AccessContext'; import { IUser } from '../../../../../interfaces/user'; import { useStyles } from './UserListItem.styles'; import { useHistory } from 'react-router-dom'; import { ILocationSettings } from '../../../../../hooks/useLocationSettings'; +import { formatDateYMD } from '../../../../../utils/format-date'; interface IUserListItemProps { user: IUser; @@ -51,10 +51,7 @@ const UserListItem = ({ - {formatDateWithLocale( - user.createdAt, - locationSettings.locale - )} + {formatDateYMD(user.createdAt, locationSettings.locale)} diff --git a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx index 4a8d6e0a04..2f5b9ddb39 100644 --- a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx +++ b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx @@ -10,7 +10,6 @@ import { } from '@material-ui/core'; import { Link as LinkIcon } from '@material-ui/icons'; import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender'; -import { formatDateWithLocale } from '../../common/util'; import { UPDATE_APPLICATION } from '../../providers/AccessProvider/permissions'; import { ApplicationView } from '../ApplicationView/ApplicationView'; import { ApplicationUpdate } from '../ApplicationUpdate/ApplicationUpdate'; @@ -25,6 +24,7 @@ import { useHistory, useParams } from 'react-router-dom'; import { useLocationSettings } from '../../../hooks/useLocationSettings'; import useToast from '../../../hooks/useToast'; import PermissionButton from '../../common/PermissionButton/PermissionButton'; +import { formatDateYMD } from '../../../utils/format-date'; export const ApplicationEdit = () => { const history = useHistory(); @@ -42,8 +42,7 @@ export const ApplicationEdit = () => { setShowDialog(!showDialog); }; - const formatDate = (v: string) => - formatDateWithLocale(v, locationSettings.locale); + const formatDate = (v: string) => formatDateYMD(v, locationSettings.locale); const onDeleteApplication = async (evt: Event) => { evt.preventDefault(); diff --git a/frontend/src/component/application/ApplicationView/ApplicationView.tsx b/frontend/src/component/application/ApplicationView/ApplicationView.tsx index ee17b0875e..dffc1bb422 100644 --- a/frontend/src/component/application/ApplicationView/ApplicationView.tsx +++ b/frontend/src/component/application/ApplicationView/ApplicationView.tsx @@ -23,13 +23,16 @@ import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyR import { getTogglePath } from '../../../utils/route-path-helpers'; import useApplication from '../../../hooks/api/getters/useApplication/useApplication'; import AccessContext from '../../../contexts/AccessContext'; -import { formatFullDateTimeWithLocale } from '../../common/util'; +import { formatDateYMDHMS } from '../../../utils/format-date'; +import { useLocationSettings } from '../../../hooks/useLocationSettings'; export const ApplicationView = () => { const { hasAccess } = useContext(AccessContext); const { name } = useParams<{ name: string }>(); const { application } = useApplication(name); + const { locationSettings } = useLocationSettings(); const { instances, strategies, seenToggles } = application; + const notFoundListItem = ({ createUrl, name, @@ -195,8 +198,9 @@ export const ApplicationView = () => { {clientIp} last seen at{' '} - {formatFullDateTimeWithLocale( - lastSeen + {formatDateYMDHMS( + lastSeen, + locationSettings.locale )} diff --git a/frontend/src/component/common/__tests__/util-test.jsx b/frontend/src/component/common/__tests__/util-test.jsx deleted file mode 100644 index 7678c294a8..0000000000 --- a/frontend/src/component/common/__tests__/util-test.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import { formatFullDateTimeWithLocale } from '../util'; - -test.skip('formats dates correctly', () => { - expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'UTC')).toEqual( - '2017-02-23 14:56:49' - ); - expect( - formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'Europe/Paris') - ).toEqual('2017-02-23 15:56:49'); - expect( - formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'Europe/Oslo') - ).toEqual('2017-02-23 15:56:49'); - expect( - formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'Europe/London') - ).toEqual('2017-02-23 14:56:49'); - expect( - formatFullDateTimeWithLocale(1487861809466, 'en-GB', 'Europe/Paris') - ).toEqual('02/23/2017, 3:56:49 PM'); - expect( - formatFullDateTimeWithLocale(1487861809466, 'en-GB', 'Europe/Oslo') - ).toEqual('02/23/2017, 3:56:49 PM'); - expect( - formatFullDateTimeWithLocale(1487861809466, 'en-GB', 'Europe/London') - ).toEqual('02/23/2017, 2:56:49 PM'); - - expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO')).toEqual( - expect.stringMatching(/(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/) - ); - expect(formatFullDateTimeWithLocale(1487861809466, 'en-GB')).toEqual( - expect.stringContaining('02/23/2017') - ); - expect(formatFullDateTimeWithLocale(1487861809466, 'en-US')).toEqual( - expect.stringContaining('02/23/2017') - ); -}); diff --git a/frontend/src/component/common/util.js b/frontend/src/component/common/util.js index 28ee9b27ef..a538005dd6 100644 --- a/frontend/src/component/common/util.js +++ b/frontend/src/component/common/util.js @@ -1,26 +1,6 @@ import { weightTypes } from '../feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/enums'; import differenceInDays from 'date-fns/differenceInDays'; -const dateTimeOptions = { - day: '2-digit', - month: '2-digit', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - second: '2-digit', -}; - -const dateOptions = { - day: '2-digit', - month: '2-digit', - year: 'numeric', -}; - -const timeOptions = { - hour: '2-digit', - minute: '2-digit', -}; - export const filterByFlags = flags => r => { if (r.flag && !flags[r.flag]) { return false; @@ -32,27 +12,6 @@ export const scrollToTop = () => { window.scrollTo(0, 0); }; -export const formatFullDateTimeWithLocale = (v, locale, tz) => { - if (tz) { - dateTimeOptions.timeZone = tz; - } - return new Date(v).toLocaleString(locale, dateTimeOptions); -}; - -export const formatDateWithLocale = (v, locale, tz) => { - if (tz) { - dateTimeOptions.timeZone = tz; - } - return new Date(v).toLocaleString(locale, dateOptions); -}; - -export const formatTimeWithLocale = (v, locale, tz) => { - if (tz) { - dateTimeOptions.timeZone = tz; - } - return new Date(v).toLocaleString(locale, timeOptions); -}; - export const trim = value => { if (value && value.trim) { return value.trim(); diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx index d20eb7aa44..f7ba855579 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx @@ -1,9 +1,6 @@ import { Tooltip } from '@material-ui/core'; -import { - formatDateWithLocale, - formatFullDateTimeWithLocale, -} from '../../../common/util'; import { useLocationSettings } from '../../../../hooks/useLocationSettings'; +import { formatDateYMD, formatDateYMDHMS } from '../../../../utils/format-date'; interface CreatedAtProps { time: Date; @@ -14,12 +11,12 @@ const CreatedAt = ({ time }: CreatedAtProps) => { return ( - {formatDateWithLocale(time, locationSettings.locale)} + {formatDateYMD(time, locationSettings.locale)} ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts index c40c901dd6..4f0f46a68f 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts @@ -1,9 +1,9 @@ import { ILocationSettings } from '../../../../../hooks/useLocationSettings'; import 'chartjs-adapter-date-fns'; import { ChartOptions, defaults } from 'chart.js'; -import { formatTimeWithLocale } from '../../../../common/util'; import { IFeatureMetricsRaw } from '../../../../../interfaces/featureToggle'; import theme from '../../../../../themes/main-theme'; +import { formatDateHM } from '../../../../../utils/format-date'; export const createChartOptions = ( metrics: IFeatureMetricsRaw[], @@ -30,7 +30,7 @@ export const createChartOptions = ( usePointStyle: true, callbacks: { title: items => - formatTimeWithLocale( + formatDateHM( items[0].parsed.x, locationSettings.locale ), @@ -73,10 +73,7 @@ export const createChartOptions = ( grid: { display: false }, ticks: { callback: (_, i, data) => - formatTimeWithLocale( - data[i].value, - locationSettings.locale - ), + formatDateHM(data[i].value, locationSettings.locale), }, }, }, diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx index 186b20dd4e..d877d1fc25 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx @@ -9,8 +9,8 @@ import { useTheme, } from '@material-ui/core'; import { useLocationSettings } from '../../../../../hooks/useLocationSettings'; -import { formatFullDateTimeWithLocale } from '../../../../common/util'; import { useMemo } from 'react'; +import { formatDateYMDHMS } from 'utils/format-date'; export const FEATURE_METRICS_TABLE_ID = 'feature-metrics-table-id'; @@ -48,7 +48,7 @@ export const FeatureMetricsTable = ({ metrics }: IFeatureMetricsTableProps) => { {sortedMetrics.map(metric => ( - {formatFullDateTimeWithLocale( + {formatDateYMDHMS( metric.timestamp, locationSettings.locale )} diff --git a/frontend/src/component/history/EventLog/EventLog.jsx b/frontend/src/component/history/EventLog/EventLog.jsx index d5bbc04b78..79189697d4 100644 --- a/frontend/src/component/history/EventLog/EventLog.jsx +++ b/frontend/src/component/history/EventLog/EventLog.jsx @@ -1,14 +1,11 @@ import { List, Switch, FormControlLabel } from '@material-ui/core'; import PropTypes from 'prop-types'; - -import { formatFullDateTimeWithLocale } from '../../common/util'; - import EventJson from './EventJson/EventJson'; import PageContent from '../../common/PageContent/PageContent'; import HeaderTitle from '../../common/HeaderTitle'; import EventCard from './EventCard/EventCard'; - import { useStyles } from './EventLog.styles.js'; +import { formatDateYMDHMS } from '../../../utils/format-date'; const EventLog = ({ title, @@ -23,7 +20,7 @@ const EventLog = ({ setEventSettings({ showData: !eventSettings.showData }); }; const formatFulldateTime = v => { - return formatFullDateTimeWithLocale(v, locationSettings.locale); + return formatDateYMDHMS(v, locationSettings.locale); }; if (!history || history.length < 0) { diff --git a/frontend/src/utils/format-date.ts b/frontend/src/utils/format-date.ts new file mode 100644 index 0000000000..0bc10ff721 --- /dev/null +++ b/frontend/src/utils/format-date.ts @@ -0,0 +1,34 @@ +export const formatDateYMDHMS = ( + date: number | string | Date, + locale: string +): string => { + return new Date(date).toLocaleString(locale, { + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + }); +}; + +export const formatDateYMD = ( + date: number | string | Date, + locale: string +): string => { + return new Date(date).toLocaleString(locale, { + day: '2-digit', + month: '2-digit', + year: 'numeric', + }); +}; + +export const formatDateHM = ( + date: number | string | Date, + locale: string +): string => { + return new Date(date).toLocaleString(locale, { + hour: '2-digit', + minute: '2-digit', + }); +};