refactor: port date utils to TS (#720)

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
                                     )}

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
                                                 )}

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 = ({
             </TableCell>
             <TableCell>
                 <span data-loading>
-                    {formatDateWithLocale(
+                    {formatDateYMD(user.createdAt, locationSettings.locale)}
-                        user.createdAt,
-                        locationSettings.locale
-                    )}
                 </span>
             </TableCell>
             <TableCell className={styles.leftTableCell}>

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) =>
+    const formatDate = (v: string) => formatDateYMD(v, locationSettings.locale);
-        formatDateWithLocale(v, locationSettings.locale);
 
     const onDeleteApplication = async (evt: Event) => {
         evt.preventDefault();

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 = () => {
                                         <span>
                                             {clientIp} last seen at{' '}
                                             <small>
-                                                {formatFullDateTimeWithLocale(
+                                                {formatDateYMDHMS(
-                                                    lastSeen
+                                                    lastSeen,
+                                                    locationSettings.locale
                                                 )}
                                             </small>
                                         </span>

frontend/src/component/common/__tests__/util-test.jsx

@@ -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')
-    );
-});

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();

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 (
         <Tooltip
-            title={`Created at ${formatFullDateTimeWithLocale(
+            title={`Created at ${formatDateYMDHMS(
                 time,
                 locationSettings.locale
             )}`}
         >
-            <span>{formatDateWithLocale(time, locationSettings.locale)}</span>
+            <span>{formatDateYMD(time, locationSettings.locale)}</span>
         </Tooltip>
     );
 };

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(
+                        formatDateHM(data[i].value, locationSettings.locale),
-                            data[i].value,
-                            locationSettings.locale
-                        ),
                 },
             },
         },

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 => (
                     <TableRow key={metric.timestamp}>
                         <TableCell>
-                            {formatFullDateTimeWithLocale(
+                            {formatDateYMDHMS(
                                 metric.timestamp,
                                 locationSettings.locale
                             )}

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) {

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',
+    });
+};