LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore: improve data time formatting in token app (#1722)

Browse Source 
* chore: improve data time formatting in token app

* chore: handle wrong date in network stats fields
This commit is contained in:
Bartłomiej Głownia 2022-10-25 19:37:01 +02:00 committed by GitHub
parent cfab9e61f3
commit b615e019b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/token/src/routes/governance/components/propose/proposal-form-vote-and-enactment-deadline.spec.tsx
View File

@ -1,6 +1,13 @@
import { render, screen, fireEvent, act } from '@testing-library/react';
import { ProposalFormVoteAndEnactmentDeadline } from './proposal-form-vote-and-enactment-deadline';
jest.mock('@vegaprotocol/react-helpers', () => ({
...jest.requireActual('@vegaprotocol/react-helpers'),
getDateTimeFormat: jest.fn(() => ({
format: (date: Date) => date.toISOString(),
})),
}));
beforeEach(() => {
jest.useFakeTimers();
jest.setSystemTime(new Date('2022-01-01T00:00:00.000Z'));
@ -19,7 +26,6 @@ const maxEnactDeadline = '4h0m0s';
* Formats date according to locale.
* @param expected Use format: YYYY-MM-DDThh:mm:ss.000Z
*/
const expectedDate = (expected: string) => new Date(expected).toLocaleString();
const renderComponent = () => {
const register = jest.fn();
@ -142,13 +148,13 @@ describe('Proposal form vote, validation and enactment deadline', () => {
// Should be adding 2 mins to the vote deadline as the minimum is set by
// default, and we add 2 mins for wallet confirmation
expect(screen.getByTestId('voting-date')).toHaveTextContent(
expectedDate('2022-01-01T01:02:00.000Z')
'2022-01-01T01:02:00.000Z'
);
expect(screen.getByTestId('validation-date')).toHaveTextContent(
expectedDate('2022-01-01T00:02:00.000Z')
'2022-01-01T00:02:00.000Z'
);
expect(screen.getByTestId('enactment-date')).toHaveTextContent(
expectedDate('2022-01-01T02:00:00.000Z')
'2022-01-01T02:00:00.000Z'
);
});
@ -159,13 +165,13 @@ describe('Proposal form vote, validation and enactment deadline', () => {
});
expect(screen.getByTestId('voting-date')).toHaveTextContent(
expectedDate('2022-01-01T01:02:30.000Z')
'2022-01-01T01:02:30.000Z'
);
expect(screen.getByTestId('validation-date')).toHaveTextContent(
expectedDate('2022-01-01T00:02:30.000Z')
'2022-01-01T00:02:30.000Z'
);
expect(screen.getByTestId('enactment-date')).toHaveTextContent(
expectedDate('2022-01-01T02:00:30.000Z')
'2022-01-01T02:00:30.000Z'
);
});
@ -174,10 +180,10 @@ describe('Proposal form vote, validation and enactment deadline', () => {
const voteDeadlineInput = screen.getByTestId('proposal-vote-deadline');
fireEvent.change(voteDeadlineInput, { target: { value: 2 } });
expect(screen.getByTestId('voting-date')).toHaveTextContent(
expectedDate('2022-01-01T02:00:00.000Z')
'2022-01-01T02:00:00.000Z'
);
expect(screen.getByTestId('enactment-date')).toHaveTextContent(
expectedDate('2022-01-01T03:00:00.000Z')
'2022-01-01T03:00:00.000Z'
);
});
@ -192,12 +198,12 @@ describe('Proposal form vote, validation and enactment deadline', () => {
fireEvent.click(voteDeadlineMaxButton);
fireEvent.click(validationDeadlineMaxButton);
expect(screen.getByTestId('validation-date')).toHaveTextContent(
expectedDate('2022-01-01T05:00:00.000Z')
'2022-01-01T05:00:00.000Z'
);
expect(validationDeadlineInput).toHaveValue(5);
fireEvent.click(voteDeadlineMinButton);
expect(screen.getByTestId('validation-date')).toHaveTextContent(
expectedDate('2022-01-01T01:00:00.000Z')
'2022-01-01T01:00:00.000Z'
);
expect(validationDeadlineInput).toHaveValue(1);
});

7
apps/token/src/routes/governance/components/propose/proposal-form-vote-and-enactment-deadline.tsx
View File

@ -6,6 +6,7 @@ import {
Input,
InputError,
} from '@vegaprotocol/ui-toolkit';
import { getDateTimeFormat } from '@vegaprotocol/react-helpers';
import { addHours, addMinutes } from 'date-fns';
import {
deadlineToSeconds,
@ -109,7 +110,7 @@ const ValidationForm = ({
{t('ThisWillSetValidationDeadlineTo')}
</span>
<span data-testid="validation-date" className="pl-2">
{deadlineDates.validation.toLocaleString()}
{getDateTimeFormat().format(deadlineDates.validation)}
</span>
{deadlines.validation === 0 && (
<span
@ -215,7 +216,7 @@ const EnactmentForm = ({
{t('ThisWillSetEnactmentDeadlineTo')}
</span>
<span data-testid="enactment-date" className="pl-2">
{deadlineDates.enactment.toLocaleString()}
{getDateTimeFormat().format(deadlineDates.enactment)}
</span>
</p>
)}
@ -454,7 +455,7 @@ export function ProposalFormVoteAndEnactmentDeadline({
{t('ThisWillSetVotingDeadlineTo')}
</span>
<span data-testid="voting-date" className="pl-2">
{deadlineDates.vote.toLocaleString()}
{getDateTimeFormat().format(deadlineDates.vote)}
</span>
{deadlines.vote === minVoteHours && (
<span

32
libs/network-stats/src/config/stats-fields.ts
View File

@ -1,4 +1,10 @@
import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
import {
addDecimalsFormatNumber,
getDateTimeFormat,
getTimeFormat,
isValidDate,
t,
} from '@vegaprotocol/react-helpers';
import type { Stats, StatFields } from './types';
// Stats fields config. Keys will correspond to graphql queries when used, and values
@ -120,7 +126,16 @@ export const statsFields: { [key in keyof Stats]: StatFields[] } = {
vegaTime: [
{
title: t('Time'),
formatter: (time: Date) => new Date(time).toLocaleTimeString(),
formatter: (time: Date) => {
if (!time) {
return;
}
const date = new Date(time);
if (!isValidDate(date)) {
return;
}
return getTimeFormat().format(date);
},
goodThreshold: (time: Date) => {
const diff = new Date().getTime() - new Date(time).getTime();
return diff > 0 && diff < 5000;
@ -147,8 +162,11 @@ export const statsFields: { [key in keyof Stats]: StatFields[] } = {
if (!t) {
return;
}
const secSinceStart =
(new Date().getTime() - new Date(t).getTime()) / 1000;
const date = new Date(t);
if (!isValidDate(date)) {
return;
}
const secSinceStart = (new Date().getTime() - date.getTime()) / 1000;
const days = Math.floor(secSinceStart / 60 / 60 / 24);
const hours = Math.floor((secSinceStart / 60 / 60) % 24);
const mins = Math.floor((secSinceStart / 60) % 60);
@ -164,7 +182,11 @@ export const statsFields: { [key in keyof Stats]: StatFields[] } = {
if (!t) {
return;
}
return `${new Date(t).toLocaleString().replace(',', ' ')}`;
const date = new Date(t);
if (!isValidDate(date)) {
return;
}
return getDateTimeFormat().format(date);
},
description: t('Genesis'),
},

3
libs/react-helpers/src/lib/format/date.ts
View File

@ -1,6 +1,9 @@
import once from 'lodash/once';
import { getUserLocale } from './utils';
export const isValidDate = (date: Date) =>
date instanceof Date && !isNaN(date.getTime());
export const getTimeFormat = once(
() =>
new Intl.DateTimeFormat(getUserLocale(), {