Skip to content

Commit 6bd3c5d

Browse files
Pascal-DelangePascal-Delange
committed
refactor: remove opinionated presets on formatDateTime
fix
1 parent e54c6ea commit 6bd3c5d

35 files changed

+209
-97
lines changed

‎packages/app-builder/src/components/CaseManager/PivotsPanel/PivotsPanelContent.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from '@app-builder/models';
99
import { type CaseDetail, type PivotObject } from '@app-builder/models/cases';
1010
import { usePivotRelatedCasesQuery } from '@app-builder/queries/pivot-related-cases';
11-
import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
11+
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
1212
import { getRoute } from '@app-builder/utils/routes';
1313
import { fromUUIDtoSUUID } from '@app-builder/utils/short-uuid';
1414
import { Link } from '@remix-run/react';
@@ -167,7 +167,10 @@ function RelatedCases({
167167
className: 'shrink border-r leading-[28px]',
168168
})}
169169
>
170-
{formatDateTime(caseObj.createdAt, { language, timeStyle: undefined })}
170+
{formatDateTimeWithoutPresets(caseObj.createdAt, {
171+
language,
172+
dateStyle: 'short',
173+
})}
171174
</div>
172175
<div
173176
className={cellVariants({

‎packages/app-builder/src/components/CaseManager/SnoozePanel/SnoozePanel.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { type PivotObject } from '@app-builder/models/cases';
88
import { type loader } from '@app-builder/routes/_builder+/cases+/$caseId+/_index';
99
import { AddRuleSnooze } from '@app-builder/routes/ressources+/cases+/add-rule-snooze';
1010
import { getDateFnsLocale } from '@app-builder/services/i18n/i18n-config';
11-
import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
11+
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
1212
import { Await, useLoaderData } from '@remix-run/react';
1313
import { Dict } from '@swan-io/boxed';
1414
import { formatRelative } from 'date-fns';
@@ -131,7 +131,10 @@ export const SnoozePanel = ({
131131
<span
132132
className={cn('text-grey-50 text-xs', { 'opacity-30': r.isSnoozed })}
133133
>
134-
{formatDateTime(r.hitAt, { language, timeStyle: undefined })}
134+
{formatDateTimeWithoutPresets(r.hitAt, {
135+
language,
136+
dateStyle: 'short',
137+
})}
135138
</span>
136139
);
137140

‎packages/app-builder/src/components/Cases/CaseAlerts.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { type loader } from '@app-builder/routes/_builder+/cases+/$caseId+/_index';
2-
import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
2+
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
33
import { parseUnknownData } from '@app-builder/utils/parse';
44
import { Await, useLoaderData } from '@remix-run/react';
55
import { Suspense, useState } from 'react';
@@ -63,7 +63,10 @@ export const CaseAlerts = ({
6363
>
6464
<div className="flex min-h-full flex-col items-center p-2">
6565
<span className="text-grey-50 text-xs font-normal">
66-
{formatDateTime(decision.createdAt, { language, timeStyle: undefined })}
66+
{formatDateTimeWithoutPresets(decision.createdAt, {
67+
language,
68+
dateStyle: 'short',
69+
})}
6770
</span>
6871
</div>
6972
<div className="border-grey-90 flex min-h-full flex-col gap-2 border-x p-2">

‎packages/app-builder/src/components/Cases/CaseDetails.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { OpenCase } from '@app-builder/routes/ressources+/cases+/open-case';
1313
import { SnoozeCase } from '@app-builder/routes/ressources+/cases+/snooze-case';
1414
import { UploadFile } from '@app-builder/routes/ressources+/files+/upload-file';
1515
import { getCaseFileUploadEndpoint } from '@app-builder/utils/files';
16-
import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
16+
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
1717
import { useLoaderData } from '@remix-run/react';
1818
import { useRef } from 'react';
1919
import { useTranslation } from 'react-i18next';
@@ -79,9 +79,9 @@ export const CaseDetails = ({
7979
<div className="grid grid-cols-[170px,1fr] items-center">
8080
<span className="text-grey-50 text-xs font-normal">{t('cases:creation_date')}</span>
8181
<time className="text-xs font-medium" dateTime={detail.createdAt}>
82-
{formatDateTime(detail.createdAt, {
82+
{formatDateTimeWithoutPresets(detail.createdAt, {
8383
language,
84-
timeStyle: undefined,
84+
dateStyle: 'short',
8585
})}
8686
</time>
8787
</div>

‎packages/app-builder/src/components/Cases/CasesList.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { type Case } from '@app-builder/models/cases';
22
import { useOrganizationTags } from '@app-builder/services/organization/organization-tags';
3-
import { formatDateRelative, formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
3+
import {
4+
formatDateRelative,
5+
formatDateTimeWithoutPresets,
6+
useFormatLanguage,
7+
} from '@app-builder/utils/format';
48
import { getRoute } from '@app-builder/utils/routes';
59
import { fromUUIDtoSUUID } from '@app-builder/utils/short-uuid';
610
import { Link } from '@remix-run/react';
@@ -80,17 +84,16 @@ export function CasesList({
8084
const dateTime = getValue();
8185
return Math.abs(differenceInDays(new Date(), dateTime)) > 1 ? (
8286
<time dateTime={dateTime}>
83-
{formatDateTime(dateTime, { language, timeStyle: undefined })}
87+
{formatDateTimeWithoutPresets(dateTime, { language, dateStyle: 'short' })}
8488
</time>
8589
) : (
8690
<Tooltip.Default
8791
arrow={false}
8892
className="border-grey-90 flex items-center border px-1.5 py-1"
8993
content={
9094
<span className="text-2xs font-normal">
91-
{formatDateTime(dateTime, {
95+
{formatDateTimeWithoutPresets(dateTime, {
9296
language,
93-
timeStyle: undefined,
9497
dateStyle: 'short',
9598
})}
9699
</span>

‎packages/app-builder/src/components/Cases/Events/CaseSnoozed.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { EventTime } from '@app-builder/components/Cases/Events/Time';
33
import { type CaseSnoozedEvent } from '@app-builder/models/cases';
44
import { useOrganizationUsers } from '@app-builder/services/organization/organization-users';
55
import { getFullName } from '@app-builder/services/user';
6-
import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
6+
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
77
import { useMemo } from 'react';
88
import { Trans, useTranslation } from 'react-i18next';
99
import { Icon } from 'ui-icons';
@@ -29,7 +29,11 @@ export const CaseSnoozedDetail = ({ event }: { event: CaseSnoozedEvent }) => {
2929
components={{ Style: <span className="font-bold capitalize" /> }}
3030
values={{
3131
actor: user ? getFullName(user) : 'Marble',
32-
date: formatDateTime(event.snoozeUntil, { language }),
32+
date: formatDateTimeWithoutPresets(event.snoozeUntil, {
33+
language,
34+
dateStyle: 'short',
35+
timeStyle: 'short',
36+
}),
3337
}}
3438
/>
3539
</span>

‎packages/app-builder/src/components/Cases/Events/Filters/index.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { type CaseEventType, caseEventTypes } from '@app-builder/models/cases';
22
import { getDateFnsLocale } from '@app-builder/services/i18n/i18n-config';
3-
import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
3+
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
44
import { endOfDay, startOfDay } from 'date-fns';
55
import { diff, toggle } from 'radash';
66
import { type ComponentProps, type Dispatch, type SetStateAction, useMemo } from 'react';
@@ -126,10 +126,26 @@ export const CaseEventFilters = ({
126126
<div className="bg-grey-80 mx-1 h-3 w-px" />
127127
) : null}
128128
{filters.startDate ? (
129-
<Badge>From {formatDateTime(filters.startDate, { language })}</Badge>
129+
<Badge>
130+
{t('common:from', {
131+
input: formatDateTimeWithoutPresets(filters.startDate, {
132+
language,
133+
dateStyle: 'short',
134+
timeStyle: 'short',
135+
}),
136+
})}
137+
</Badge>
130138
) : null}
131139
{filters.endDate ? (
132-
<Badge>To {formatDateTime(filters.endDate, { language })}</Badge>
140+
<Badge>
141+
{t('common:to', {
142+
input: formatDateTimeWithoutPresets(filters.endDate, {
143+
language,
144+
dateStyle: 'short',
145+
timeStyle: 'short',
146+
}),
147+
})}
148+
</Badge>
133149
) : null}
134150
</Button>
135151
</MenuCommand.Trigger>

‎packages/app-builder/src/components/Cases/Events/Time.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { formatDateRelative, formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
1+
import {
2+
formatDateRelative,
3+
formatDateTimeWithoutPresets,
4+
useFormatLanguage,
5+
} from '@app-builder/utils/format';
26
import { differenceInDays } from 'date-fns';
37
import { TooltipV2 } from 'ui-design-system';
48

@@ -17,7 +21,7 @@ export const EventTime = ({ time }: { time: string }) => {
1721
</TooltipV2.TooltipTrigger>
1822
<TooltipV2.TooltipContent>
1923
<span className="text-2xs font-normal">
20-
{formatDateTime(date, {
24+
{formatDateTimeWithoutPresets(date, {
2125
language,
2226
timeStyle: is6daysOld ? 'short' : undefined,
2327
dateStyle: is6daysOld ? undefined : 'short',

‎packages/app-builder/src/components/Data/IngestedObjectDetail.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { type DataModelObject, type TableModel } from '@app-builder/models';
2-
import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
2+
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
33
import { parseUnknownData } from '@app-builder/utils/parse';
44
import { getRoute } from '@app-builder/utils/routes';
55
import { Link } from '@remix-run/react';
66
import clsx from 'clsx';
77
import { Fragment, useMemo } from 'react';
8+
import { useTranslation } from 'react-i18next';
89
import * as R from 'remeda';
910
import { Icon } from 'ui-icons';
1011

@@ -41,6 +42,7 @@ export const IngestedObjectDetail = ({
4142
bordered = true,
4243
withLinks = true,
4344
}: IngestedObjectDetailProps) => {
45+
const { t } = useTranslation(['data']);
4446
const parsedTriggerObject = useParsedTriggerObject(object.data) ?? [];
4547
const language = useFormatLanguage();
4648

@@ -64,9 +66,12 @@ export const IngestedObjectDetail = ({
6466
ID: {objectId}
6567
</span>
6668
<span className="bg-grey-100 border-grey-50 text-grey-50 rounded border px-2 py-1">
67-
last ingestion at:{' '}
68-
{formatDateTime(object.metadata.validFrom, {
69-
language,
69+
{t('data:last_ingestion_at', {
70+
date: formatDateTimeWithoutPresets(object.metadata.validFrom, {
71+
language,
72+
dateStyle: 'short',
73+
timeStyle: 'short',
74+
}),
7075
})}
7176
</span>
7277
</div>

‎packages/app-builder/src/components/Decisions/DecisionDetail.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CaseStatusBadge, decisionsI18n } from '@app-builder/components';
22
import { type DecisionDetail } from '@app-builder/models/decision';
3-
import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
3+
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
44
import { getRoute } from '@app-builder/utils/routes';
55
import { fromUUIDtoSUUID } from '@app-builder/utils/short-uuid';
66
import { Link } from '@remix-run/react';
@@ -19,7 +19,13 @@ export function DecisionDetail({ decision }: { decision: DecisionDetail }) {
1919
<Collapsible.Content>
2020
<div className="grid auto-rows-fr grid-cols-[max-content_1fr] items-center gap-x-10 gap-y-2">
2121
<DetailLabel>{t('decisions:created_at')}</DetailLabel>
22-
<time dateTime={createdAt}>{formatDateTime(createdAt, { language })}</time>
22+
<time dateTime={createdAt}>
23+
{formatDateTimeWithoutPresets(createdAt, {
24+
language,
25+
dateStyle: 'short',
26+
timeStyle: 'short',
27+
})}
28+
</time>
2329

2430
<DetailLabel>{t('decisions:scenario.name')}</DetailLabel>
2531
<Link

0 commit comments

Comments
 (0)