diff --git a/src/utils/DateInput.tsx b/src/utils/DateInput.tsx index 230fd38f..60d45959 100644 --- a/src/utils/DateInput.tsx +++ b/src/utils/DateInput.tsx @@ -4,6 +4,7 @@ import DatePicker, { ReactDatePickerProps } from 'react-datepicker'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons'; import classNames from 'classnames'; +import { STANDARD_DATE_FORMAT } from './helpers/date'; import './DateInput.scss'; export type DateInputProps = ReactDatePickerProps; @@ -23,7 +24,7 @@ export const DateInput = (props: DateInputProps) => { options: { padding: 24 }, // This prevents the arrow to be placed on the very edge, which looks ugly }, ]} - dateFormat={dateFormat ?? 'yyyy-MM-dd'} + dateFormat={dateFormat ?? STANDARD_DATE_FORMAT} className={classNames('date-input-container__input form-control', className)} // @ts-expect-error The DatePicker type definition is wrong. It has a ref prop ref={ref} diff --git a/src/utils/Time.tsx b/src/utils/Time.tsx index fc4c3571..9a395ac8 100644 --- a/src/utils/Time.tsx +++ b/src/utils/Time.tsx @@ -1,5 +1,5 @@ import { parseISO, format as formatDate, getUnixTime, formatDistance } from 'date-fns'; -import { isDateObject } from './helpers/date'; +import { isDateObject, STANDARD_DATE_AND_TIME_FORMAT } from './helpers/date'; export interface TimeProps { date: Date | string; @@ -7,7 +7,7 @@ export interface TimeProps { relative?: boolean; } -export const Time = ({ date, format = 'yyyy-MM-dd HH:mm', relative = false }: TimeProps) => { +export const Time = ({ date, format = STANDARD_DATE_AND_TIME_FORMAT, relative = false }: TimeProps) => { const dateObject = isDateObject(date) ? date : parseISO(date); return ( diff --git a/src/utils/dates/DateTimeInput.tsx b/src/utils/dates/DateTimeInput.tsx index 09b96ffb..75e16692 100644 --- a/src/utils/dates/DateTimeInput.tsx +++ b/src/utils/dates/DateTimeInput.tsx @@ -1,14 +1,15 @@ import { ReactDatePickerProps } from 'react-datepicker'; import { FC } from 'react'; import { DateInput } from '../DateInput'; +import { STANDARD_DATE_AND_TIME_FORMAT } from '../helpers/date'; export type DateTimeInputProps = Omit; export const DateTimeInput: FC = (props) => ( ); diff --git a/src/utils/helpers/date.ts b/src/utils/helpers/date.ts index 75c8b766..9e0a73b5 100644 --- a/src/utils/helpers/date.ts +++ b/src/utils/helpers/date.ts @@ -1,6 +1,10 @@ import { format, formatISO, isBefore, isEqual, isWithinInterval, parse, parseISO as stdParseISO } from 'date-fns'; import { OptionalString } from '../utils'; +export const STANDARD_DATE_FORMAT = 'yyyy-MM-dd'; + +export const STANDARD_DATE_AND_TIME_FORMAT = 'yyyy-MM-dd HH:mm'; + export type DateOrString = Date | string; type NullableDate = DateOrString | null; @@ -15,7 +19,10 @@ const formatDateFromFormat = (date?: NullableDate, theFormat?: string): Optional return theFormat ? format(date, theFormat) : formatISO(date); }; -export const formatDate = (theFormat = 'yyyy-MM-dd') => (date?: NullableDate) => formatDateFromFormat(date, theFormat); +export const formatDate = (theFormat = STANDARD_DATE_FORMAT) => (date?: NullableDate) => formatDateFromFormat( + date, + theFormat, +); export const formatIsoDate = (date?: NullableDate) => formatDateFromFormat(date, undefined); diff --git a/src/visits/charts/LineChartCard.tsx b/src/visits/charts/LineChartCard.tsx index a6e4b4ba..8554ff71 100644 --- a/src/visits/charts/LineChartCard.tsx +++ b/src/visits/charts/LineChartCard.tsx @@ -31,6 +31,7 @@ import { prettify } from '../../utils/helpers/numbers'; import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts'; import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../utils/theme'; import './LineChartCard.scss'; +import { STANDARD_DATE_FORMAT } from '../../utils/helpers/date'; interface LineChartCardProps { title: string; @@ -65,10 +66,10 @@ const STEP_TO_DIFF_FUNC_MAP: Record n const STEP_TO_DATE_FORMAT: Record string> = { hourly: (date) => format(date, 'yyyy-MM-dd HH:00'), - daily: (date) => format(date, 'yyyy-MM-dd'), + daily: (date) => format(date, STANDARD_DATE_FORMAT), weekly(date) { - const firstWeekDay = format(startOfISOWeek(date), 'yyyy-MM-dd'); - const lastWeekDay = format(endOfISOWeek(date), 'yyyy-MM-dd'); + const firstWeekDay = format(startOfISOWeek(date), STANDARD_DATE_FORMAT); + const lastWeekDay = format(endOfISOWeek(date), STANDARD_DATE_FORMAT); return `${firstWeekDay} - ${lastWeekDay}`; }, diff --git a/test/utils/DateInput.test.tsx b/test/utils/DateInput.test.tsx index e036433c..dc809afc 100644 --- a/test/utils/DateInput.test.tsx +++ b/test/utils/DateInput.test.tsx @@ -1,5 +1,6 @@ import { screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; +import { parseISO } from 'date-fns'; import { DateInput, DateInputProps } from '../../src/utils/DateInput'; import { renderWithEvents } from '../__helpers__/setUpTest'; @@ -30,4 +31,14 @@ describe('', () => { await user.click(screen.getByPlaceholderText('foo')); await waitFor(() => expect(container.querySelector('.react-datepicker')).toBeInTheDocument()); }); + + it.each([ + [undefined, '2022-01-01'], + ['yyyy-MM-dd', '2022-01-01'], + ['yyyy-MM-dd HH:mm', '2022-01-01 15:18'], + ['HH:mm:ss', '15:18:36'], + ])('shows date in expected format', (dateFormat, expectedValue) => { + setUp({ placeholderText: 'foo', selected: parseISO('2022-01-01T15:18:36'), dateFormat }); + expect(screen.getByPlaceholderText('foo')).toHaveValue(expectedValue); + }); });