refactor: port date utils to TS (#720)

2025-01-25 00:07:47 +01:00 · 2022-02-25 10:40:55 +01:00 · 2022-02-25 10:40:55 +01:00 · a4dab966a3
commit a4dab966a3
parent 19b16ed600
12 changed files with 62 additions and 113 deletions
--- 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
                                    )}
--- 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
                                                )}
--- 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 = ({
            </TableCell>
            <TableCell>
                <span data-loading>
-                    {formatDateWithLocale(
-                        user.createdAt,
-                        locationSettings.locale
-                    )}
+                    {formatDateYMD(user.createdAt, locationSettings.locale)}
                </span>
            </TableCell>
            <TableCell className={styles.leftTableCell}>
--- 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();
--- 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 = () => {
                                        <span>
                                            {clientIp} last seen at{' '}
                                            <small>
-                                                {formatFullDateTimeWithLocale(
-                                                    lastSeen
+                                                {formatDateYMDHMS(
+                                                    lastSeen,
+                                                    locationSettings.locale
                                                )}
                                            </small>
                                        </span>
--- a/frontend/src/component/common/tests/util-test.jsx
+++ b/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')
-    );
-});
--- 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();
--- 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 (
        <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>
    );
 };
--- 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),
                },
            },
        },
--- 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 => (
                    <TableRow key={metric.timestamp}>
                        <TableCell>
-                            {formatFullDateTimeWithLocale(
+                            {formatDateYMDHMS(
                                metric.timestamp,
                                locationSettings.locale
                            )}
--- 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) {
--- a/frontend/src/utils/format-date.ts
+++ 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',
+    });
+};