Skip to content

Commit 482d578

Browse files
siiicksiiick
committed
feat: apply new date format hook
1 parent 62daa6f commit 482d578

29 files changed

Lines changed: 297 additions & 212 deletions

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from '@app-builder/models';
1111
import { type CaseDetail, type PivotObject } from '@app-builder/models/cases';
1212
import { usePivotRelatedCasesQuery } from '@app-builder/queries/pivot-related-cases';
13-
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
13+
import { useFormatDateTimeString } from '@app-builder/utils/format';
1414
import { getRoute } from '@app-builder/utils/routes';
1515
import { fromUUIDtoSUUID } from '@app-builder/utils/short-uuid';
1616
import { Link } from '@remix-run/react';
@@ -251,7 +251,6 @@ function RelatedCases({
251251
}) {
252252
const { t } = useTranslation(['common', 'cases']);
253253
const casesQuery = usePivotRelatedCasesQuery(pivotValue);
254-
const language = useFormatLanguage();
255254

256255
return match(casesQuery)
257256
.with({ isError: true }, () => {
@@ -271,7 +270,7 @@ function RelatedCases({
271270
if (cases.length === 0) {
272271
return null;
273272
}
274-
273+
const formatDateTime = useFormatDateTimeString();
275274
return (
276275
<div className="flex flex-col gap-v2-md">
277276
<div className="text-h2 font-semibold">
@@ -289,10 +288,7 @@ function RelatedCases({
289288
className: 'shrink border-r leading-[28px]',
290289
})}
291290
>
292-
{formatDateTimeWithoutPresets(caseObj.createdAt, {
293-
language,
294-
dateStyle: 'short',
295-
})}
291+
{formatDateTime(caseObj.createdAt, { dateStyle: 'short' })}
296292
</div>
297293
<div
298294
className={cellVariants({

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { ScoreModifier } from '@app-builder/components/Scenario/Rules/ScoreModif
88
import { type PivotObject } from '@app-builder/models/cases';
99
import { type loader } from '@app-builder/routes/_builder+/cases+/$caseId+/_index';
1010
import { getDateFnsLocale } from '@app-builder/services/i18n/i18n-config';
11-
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
11+
import { useFormatDateTimeString, 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';
@@ -30,6 +30,7 @@ export const SnoozePanel = ({
3030
}) => {
3131
const { t } = useTranslation(casesI18n);
3232
const language = useFormatLanguage();
33+
const formatDateTime = useFormatDateTimeString();
3334
const { rulesByPivotPromise, dataModelWithTableOptions, pivotObjects, entitlements } =
3435
useLoaderData<typeof loader>();
3536
const { setExpanded } = DrawerContext.useValue();
@@ -131,10 +132,7 @@ export const SnoozePanel = ({
131132
<span
132133
className={cn('text-grey-50 text-xs', { 'opacity-30': r.isSnoozed })}
133134
>
134-
{formatDateTimeWithoutPresets(r.hitAt, {
135-
language,
136-
dateStyle: 'short',
137-
})}
135+
{formatDateTime(r.hitAt, { dateStyle: 'short' })}
138136
</span>
139137
);
140138

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

Lines changed: 3 additions & 5 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 { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
2+
import { useFormatDateTimeString, 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';
@@ -31,6 +31,7 @@ export const CaseAlerts = ({
3131
dataModelWithTableOptions,
3232
} = useLoaderData<typeof loader>();
3333
const language = useFormatLanguage();
34+
const formatDateTime = useFormatDateTimeString();
3435
const [selectedDecision, setSelectedDecision] = useState<string | null>(null);
3536

3637
return (
@@ -63,10 +64,7 @@ export const CaseAlerts = ({
6364
>
6465
<div className="flex min-h-full flex-col items-center p-2">
6566
<span className="text-grey-50 text-xs font-normal">
66-
{formatDateTimeWithoutPresets(decision.createdAt, {
67-
language,
68-
dateStyle: 'short',
69-
})}
67+
{formatDateTime(decision.createdAt, { dateStyle: 'short' })}
7068
</span>
7169
</div>
7270
<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: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { CaseReview } from '@app-builder/models/cases';
77
import { useAddReviewToCaseCommentsMutation } from '@app-builder/queries/add-review-to-case-comments';
88
import { useCaseReviewFeedbackMutation } from '@app-builder/queries/case-review-feedback';
99
import { type loader } from '@app-builder/routes/_builder+/cases+/$caseId+/_index';
10-
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
10+
import { useFormatDateTimeString } from '@app-builder/utils/format';
1111
import { useLoaderData, useRevalidator } from '@remix-run/react';
1212
import { cva } from 'class-variance-authority';
1313
import { useRef, useState } from 'react';
@@ -53,7 +53,8 @@ export const CaseDetails = ({
5353
}) => {
5454
const { case: detail, inboxes, reports } = useLoaderData<typeof loader>();
5555
const { t } = useTranslation(['common', 'cases']);
56-
const language = useFormatLanguage();
56+
const formatDateTime = useFormatDateTimeString();
57+
5758
const sentinelRef = useRef<HTMLDivElement>(null);
5859
const containerRef = useRef<HTMLDivElement>(null);
5960
const intersection = useIntersection(sentinelRef, {
@@ -142,8 +143,7 @@ export const CaseDetails = ({
142143
{detail.snoozedUntil ? (
143144
<span className="font-medium text-grey-00">
144145
{t('cases:case.snoozed_until', {
145-
date: formatDateTimeWithoutPresets(detail.snoozedUntil, {
146-
language,
146+
date: formatDateTime(detail.snoozedUntil, {
147147
dateStyle: 'short',
148148
}),
149149
})}
@@ -154,8 +154,7 @@ export const CaseDetails = ({
154154
<div className="grid grid-cols-[170px_1fr] items-center">
155155
<span className="text-grey-50 font-normal">{t('cases:creation_date')}</span>
156156
<time className="font-medium" dateTime={detail.createdAt}>
157-
{formatDateTimeWithoutPresets(detail.createdAt, {
158-
language,
157+
{formatDateTime(detail.createdAt, {
159158
dateStyle: 'short',
160159
})}
161160
</time>

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { type Case } from '@app-builder/models/cases';
22
import { useOrganizationTags } from '@app-builder/services/organization/organization-tags';
33
import {
44
formatDateRelative,
5-
formatDateTimeWithoutPresets,
5+
useFormatDateTimeString,
66
useFormatLanguage,
77
} from '@app-builder/utils/format';
88
import { getRoute } from '@app-builder/utils/routes';
@@ -36,6 +36,7 @@ export function CasesList({
3636
}) {
3737
const { t } = useTranslation(casesI18n);
3838
const language = useFormatLanguage();
39+
const formatDateTime = useFormatDateTimeString();
3940
const [sorting, setSorting] = useState<SortingState>(initSorting);
4041
const { orgTags } = useOrganizationTags();
4142

@@ -83,19 +84,14 @@ export function CasesList({
8384
cell: ({ getValue }) => {
8485
const dateTime = getValue();
8586
return Math.abs(differenceInDays(new Date(), dateTime)) > 1 ? (
86-
<time dateTime={dateTime}>
87-
{formatDateTimeWithoutPresets(dateTime, { language, dateStyle: 'short' })}
88-
</time>
87+
<time dateTime={dateTime}>{formatDateTime(dateTime, { dateStyle: 'short' })}</time>
8988
) : (
9089
<Tooltip.Default
9190
arrow={false}
9291
className="border-grey-90 flex items-center border px-1.5 py-1"
9392
content={
9493
<span className="text-2xs font-normal">
95-
{formatDateTimeWithoutPresets(dateTime, {
96-
language,
97-
dateStyle: 'short',
98-
})}
94+
{formatDateTime(dateTime, { dateStyle: 'short' })}
9995
</span>
10096
}
10197
>

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ 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 { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
6+
import { useFormatDateTimeString } from '@app-builder/utils/format';
77
import { useMemo } from 'react';
88
import { Trans, useTranslation } from 'react-i18next';
99
import { Icon } from 'ui-icons';
1010

1111
export const CaseSnoozedDetail = ({ event }: { event: CaseSnoozedEvent }) => {
1212
const { getOrgUserById } = useOrganizationUsers();
1313
const { t } = useTranslation(casesI18n);
14-
const language = useFormatLanguage();
14+
const formatDateTime = useFormatDateTimeString();
1515
const user = useMemo(
1616
() => (event.userId ? getOrgUserById(event.userId) : undefined),
1717
[event.userId, getOrgUserById],
@@ -29,11 +29,7 @@ export const CaseSnoozedDetail = ({ event }: { event: CaseSnoozedEvent }) => {
2929
components={{ Style: <span className="font-bold capitalize" /> }}
3030
values={{
3131
actor: user ? getFullName(user) : 'Marble',
32-
date: formatDateTimeWithoutPresets(event.snoozeUntil, {
33-
language,
34-
dateStyle: 'short',
35-
timeStyle: 'short',
36-
}),
32+
date: formatDateTime(event.snoozeUntil, { dateStyle: 'short', timeStyle: 'short' }),
3733
}}
3834
/>
3935
</span>

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
DEFAULT_CASE_EVENT_CATEGORIES_FILTER,
44
} from '@app-builder/constants/cases';
55
import { getDateFnsLocale } from '@app-builder/services/i18n/i18n-config';
6-
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
6+
import { useFormatDateTimeString, useFormatLanguage } from '@app-builder/utils/format';
77
import { endOfDay, startOfDay } from 'date-fns';
88
import { diff, toggle } from 'radash';
99
import { type ComponentProps, type Dispatch, type SetStateAction, useMemo } from 'react';
@@ -34,6 +34,7 @@ export type CaseEventFiltersProps = {
3434
export const CaseEventFilters = ({ filters, setFilters }: CaseEventFiltersProps) => {
3535
const { t } = useTranslation(casesI18n);
3636
const language = useFormatLanguage();
37+
const formatDateTime = useFormatDateTimeString();
3738
const isDirty = useMemo(
3839
() =>
3940
diff(filters.types, DEFAULT_CASE_EVENT_CATEGORIES_FILTER).length !== 0 ||
@@ -120,8 +121,7 @@ export const CaseEventFilters = ({ filters, setFilters }: CaseEventFiltersProps)
120121
{filters.startDate ? (
121122
<Badge>
122123
{t('common:from', {
123-
input: formatDateTimeWithoutPresets(filters.startDate, {
124-
language,
124+
input: formatDateTime(filters.startDate, {
125125
dateStyle: 'short',
126126
timeStyle: 'short',
127127
}),
@@ -131,8 +131,7 @@ export const CaseEventFilters = ({ filters, setFilters }: CaseEventFiltersProps)
131131
{filters.endDate ? (
132132
<Badge>
133133
{t('common:to', {
134-
input: formatDateTimeWithoutPresets(filters.endDate, {
135-
language,
134+
input: formatDateTime(filters.endDate, {
136135
dateStyle: 'short',
137136
timeStyle: 'short',
138137
}),

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {
22
formatDateRelative,
3-
formatDateTimeWithoutPresets,
3+
useFormatDateTimeString,
44
useFormatLanguage,
55
} from '@app-builder/utils/format';
66
import { differenceInDays } from 'date-fns';
@@ -9,6 +9,7 @@ import { TooltipV2 } from 'ui-design-system';
99
export const EventTime = ({ time }: { time: string }) => {
1010
const date = new Date(time);
1111
const language = useFormatLanguage();
12+
const formatDateTime = useFormatDateTimeString();
1213
const is6daysOld = Math.abs(differenceInDays(new Date(), date)) > 6;
1314

1415
return (
@@ -21,8 +22,7 @@ export const EventTime = ({ time }: { time: string }) => {
2122
</TooltipV2.TooltipTrigger>
2223
<TooltipV2.TooltipContent>
2324
<span className="text-2xs font-normal">
24-
{formatDateTimeWithoutPresets(date, {
25-
language,
25+
{formatDateTime(date, {
2626
timeStyle: is6daysOld ? 'short' : undefined,
2727
dateStyle: is6daysOld ? undefined : 'short',
2828
})}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { type DataModelObject, type TableModel } from '@app-builder/models';
2-
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
2+
import { useFormatDateTimeString, 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';
@@ -44,8 +44,8 @@ export const IngestedObjectDetail = ({
4444
}: IngestedObjectDetailProps) => {
4545
const { t } = useTranslation(['data']);
4646
const parsedTriggerObject = useParsedTriggerObject(object.data) ?? [];
47+
const formatDateTime = useFormatDateTimeString();
4748
const language = useFormatLanguage();
48-
4949
const dataModelTable = dataModel.find((table) => table.name === tableName);
5050
const links = R.pipe(
5151
dataModelTable?.linksToSingle ?? [],
@@ -67,8 +67,7 @@ export const IngestedObjectDetail = ({
6767
</span>
6868
<span className="bg-grey-100 border-grey-50 text-grey-50 rounded-sm border px-2 py-1">
6969
{t('data:last_ingestion_at', {
70-
date: formatDateTimeWithoutPresets(object.metadata.validFrom, {
71-
language,
70+
date: formatDateTime(object.metadata.validFrom, {
7271
dateStyle: 'short',
7372
timeStyle: 'short',
7473
}),

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CaseStatusBadge, decisionsI18n } from '@app-builder/components';
22
import { type DecisionDetails } from '@app-builder/models/decision';
3-
import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
3+
import { useFormatDateTimeString } 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';
@@ -9,7 +9,7 @@ import { Collapsible } from 'ui-design-system';
99

1010
export function DecisionDetail({ decision }: { decision: DecisionDetails }) {
1111
const { t } = useTranslation(decisionsI18n);
12-
const language = useFormatLanguage();
12+
const formatDateTime = useFormatDateTimeString();
1313

1414
const { case: caseDetail, createdAt, scenario, triggerObjectType } = decision;
1515

@@ -20,11 +20,7 @@ export function DecisionDetail({ decision }: { decision: DecisionDetails }) {
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>
2222
<time dateTime={createdAt}>
23-
{formatDateTimeWithoutPresets(createdAt, {
24-
language,
25-
dateStyle: 'short',
26-
timeStyle: 'short',
27-
})}
23+
{formatDateTime(createdAt, { dateStyle: 'short', timeStyle: 'short' })}
2824
</time>
2925

3026
<DetailLabel>{t('decisions:scenario.name')}</DetailLabel>

0 commit comments

Comments
 (0)