Skip to content

Commit 5052af2

Browse files
ggazzodougfabris
ggazzo
and
dougfabris
authored
chore: migrate client-side code from moment to date-fns (RocketChat#40076)
Co-authored-by: Douglas Fabris <devfabris@gmail.com>
1 parent 9875f67 commit 5052af2

File tree

56 files changed

+532
-383
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+532
-383
lines changed

‎apps/meteor/client/components/InfoPanel/__snapshots__/RetentionPolicyCallout.spec.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ exports[`renders Default without crashing 1`] = `
2626
>
2727
<div>
2828
<p>
29-
a minute June 1, 2024 at 12:30 AM
29+
1 minute June 1, 2024 at 12:30 AM
3030
</p>
3131
</div>
3232
</div>
@@ -63,7 +63,7 @@ exports[`renders InvalidSettings without crashing 1`] = `
6363
>
6464
<div>
6565
<p>
66-
a minute June 12, 2024 at 12:00 AM
66+
1 minute June 12, 2024 at 12:00 AM
6767
</p>
6868
</div>
6969
</div>

‎apps/meteor/client/components/InvitationBadge/__snapshots__/InvitationBadge.spec.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`renders WithDateObject without crashing 1`] = `
77
aria-hidden="false"
88
class="rcx-box rcx-box--full rcx-icon--name-mail rcx-icon rcx-css-1p3fsdk"
99
role="status"
10-
title="Invited January 1, 2025"
10+
title="Invited January 1st, 2025"
1111
>
1212
1313
</i>
@@ -22,7 +22,7 @@ exports[`renders WithISOStringDate without crashing 1`] = `
2222
aria-hidden="false"
2323
class="rcx-box rcx-box--full rcx-icon--name-mail rcx-icon rcx-css-1p3fsdk"
2424
role="status"
25-
title="Invited January 1, 2025"
25+
title="Invited January 1st, 2025"
2626
>
2727
2828
</i>

‎apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -541,7 +541,7 @@ exports[`renders InvitedUser without crashing 1`] = `
541541
<div
542542
class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
543543
>
544-
January 1, 2025
544+
January 1st, 2025
545545
</div>
546546
</div>
547547
</div>

‎apps/meteor/client/components/dashboards/periods.ts‎

Lines changed: 74 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,92 @@
11
import type { TranslationKey } from '@rocket.chat/ui-contexts';
2-
import type { DurationInputArg1, DurationInputArg2 } from 'moment';
3-
import moment from 'moment';
2+
import { startOfDay, startOfWeek, startOfMonth, startOfYear, endOfDay, subDays, subMonths } from 'date-fns';
43

54
const label = (translationKey: TranslationKey): readonly [translationKey: TranslationKey] => [translationKey];
65

6+
function startOfDayUTC(d: Date): Date {
7+
return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), 0, 0, 0, 0));
8+
}
9+
10+
function endOfDayUTC(d: Date): Date {
11+
return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), 23, 59, 59, 999));
12+
}
13+
14+
function startOfWeekUTC(d: Date): Date {
15+
const day = d.getUTCDay(); // 0 = Sunday
16+
const sunday = new Date(d);
17+
sunday.setUTCDate(d.getUTCDate() - day);
18+
return startOfDayUTC(sunday);
19+
}
20+
21+
function startOfMonthUTC(d: Date): Date {
22+
return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1, 0, 0, 0, 0));
23+
}
24+
25+
function startOfYearUTC(d: Date): Date {
26+
return new Date(Date.UTC(d.getUTCFullYear(), 0, 1, 0, 0, 0, 0));
27+
}
28+
29+
type StartOf = 'day' | 'year' | 'month' | 'week';
30+
type Subtract = { amount: number; unit: 'days' | 'months' };
31+
732
export const getClosedPeriod =
833
({
9-
startOf,
10-
subtract,
34+
startOf: startOfKey,
35+
subtract: subtractOpt,
1136
}: {
12-
startOf: 'day' | 'year' | 'month' | 'week';
13-
subtract?: { amount: DurationInputArg1; unit: DurationInputArg2 };
37+
startOf: StartOf;
38+
subtract?: Subtract;
1439
}): ((utc: boolean) => {
1540
start: Date;
1641
end: Date;
1742
}) =>
18-
(utc): { start: Date; end: Date } => {
19-
const start = utc ? moment().utc() : moment();
20-
const end = utc ? moment().utc() : moment();
43+
(utc: boolean): { start: Date; end: Date } => {
44+
const now = new Date();
45+
46+
let start: Date;
47+
if (subtractOpt) {
48+
const { amount, unit } = subtractOpt;
49+
start = unit === 'days' ? subDays(now, amount) : subMonths(now, amount);
50+
} else {
51+
start = new Date(now.getTime());
52+
}
53+
54+
if (utc) {
55+
switch (startOfKey) {
56+
case 'day':
57+
start = startOfDayUTC(start);
58+
break;
59+
case 'week':
60+
start = startOfWeekUTC(start);
61+
break;
62+
case 'month':
63+
start = startOfMonthUTC(start);
64+
break;
65+
case 'year':
66+
start = startOfYearUTC(start);
67+
break;
68+
}
69+
return { start, end: endOfDayUTC(now) };
70+
}
2171

22-
if (subtract) {
23-
const { amount, unit } = subtract;
24-
start.subtract(amount, unit);
72+
switch (startOfKey) {
73+
case 'day':
74+
start = startOfDay(start);
75+
break;
76+
case 'week':
77+
start = startOfWeek(start);
78+
break;
79+
case 'month':
80+
start = startOfMonth(start);
81+
break;
82+
case 'year':
83+
start = startOfYear(start);
84+
break;
2585
}
2686

2787
return {
28-
start: start.startOf(startOf).toDate(),
29-
end: end.endOf('day').toDate(),
88+
start,
89+
end: endOfDay(now),
3090
};
3191
};
3292

‎apps/meteor/client/components/message/content/ThreadMetrics.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ describe('Thread Metrics', () => {
112112
expect(navigateSpy).toHaveBeenCalledWith('thread', 'rid', 'thread', 'mid');
113113

114114
const threadCount = screen.getByTitle('Last_message__date__');
115-
expect(threadCount).toHaveTextContent('5 replies July 1, 2024');
115+
expect(threadCount).toHaveTextContent('5 replies July 1st, 2024');
116116
});
117117

118118
it('should render small not followed with 3 participants and unread', async () => {

‎apps/meteor/client/components/message/toolbar/useEditMessageAction.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { isRoomFederated } from '@rocket.chat/core-typings';
22
import type { IRoom, IMessage, ISubscription } from '@rocket.chat/core-typings';
33
import { usePermission, useSetting, useUser } from '@rocket.chat/ui-contexts';
4-
import moment from 'moment';
4+
import { differenceInMinutes } from 'date-fns';
55

66
import type { MessageActionConfig } from '../../../../app/ui-utils/client/lib/MessageAction';
77
import { useChat } from '../../../views/room/contexts/ChatContext';
@@ -32,8 +32,7 @@ export const useEditMessageAction = (
3232
}
3333

3434
if (!canBypassBlockTimeLimit && blockEditInMinutes) {
35-
const msgTs = message.ts ? moment(message.ts) : undefined;
36-
const currentTsDiff = msgTs ? moment().diff(msgTs, 'minutes') : undefined;
35+
const currentTsDiff = message.ts ? differenceInMinutes(new Date(), message.ts) : undefined;
3736
return typeof currentTsDiff === 'number' && currentTsDiff < blockEditInMinutes;
3837
}
3938

‎apps/meteor/client/definitions/cron.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
declare module 'cron' {
2-
export declare function sendAt(precision: string): Moment;
2+
export declare function sendAt(precision: string): { valueOf(): number };
33
}

‎apps/meteor/client/hooks/useFormatDate.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { useSetting } from '@rocket.chat/ui-contexts';
2-
import moment from 'moment';
32
import { useCallback } from 'react';
43

4+
import { formatDate } from '../lib/utils/dateFormat';
5+
56
export const useFormatDate = () => {
67
const format = useSetting('Message_DateFormat');
7-
return useCallback((time: string | Date | number) => moment(time).format(String(format)), [format]);
8+
return useCallback((time: string | Date | number) => formatDate(time, String(format)), [format]);
89
};

‎apps/meteor/client/hooks/useFormatDateAndTime.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useUserPreference, useSetting } from '@rocket.chat/ui-contexts';
2-
import type { MomentInput } from 'moment';
3-
import moment from 'moment';
42
import { useCallback } from 'react';
53

4+
import { formatDate } from '../lib/utils/dateFormat';
5+
66
type UseFormatDateAndTimeParams = {
77
withSeconds?: boolean;
88
};
@@ -12,15 +12,15 @@ export const useFormatDateAndTime = ({ withSeconds }: UseFormatDateAndTimeParams
1212
const format = useSetting('Message_TimeAndDateFormat', 'LLL');
1313

1414
return useCallback(
15-
(time: MomentInput) => {
15+
(time: string | Date | number = new Date()) => {
1616
switch (clockMode) {
1717
case 1:
18-
return moment(time).format(withSeconds ? 'MMMM D, Y h:mm:ss A' : 'MMMM D, Y h:mm A');
18+
return formatDate(time, withSeconds ? 'MMMM D, YYYY h:mm:ss A' : 'MMMM D, YYYY h:mm A');
1919
case 2:
20-
return moment(time).format(withSeconds ? 'MMMM D, Y H:mm:ss' : 'MMMM D, Y H:mm');
20+
return formatDate(time, withSeconds ? 'MMMM D, YYYY H:mm:ss' : 'MMMM D, YYYY H:mm');
2121

2222
default:
23-
return moment(time).format(withSeconds ? 'L LTS' : format);
23+
return formatDate(time, withSeconds ? 'L LTS' : format);
2424
}
2525
},
2626
[clockMode, format, withSeconds],

‎apps/meteor/client/hooks/useFormatTime.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useUserPreference, useSetting } from '@rocket.chat/ui-contexts';
2-
import type { MomentInput } from 'moment';
3-
import moment from 'moment';
42
import { useCallback } from 'react';
53

4+
import { formatDate } from '../lib/utils/dateFormat';
5+
66
const dayFormat = ['h:mm A', 'H:mm'] as const;
77

88
export const useFormatTime = () => {
@@ -11,14 +11,14 @@ export const useFormatTime = () => {
1111
const sameDay = clockMode !== undefined ? dayFormat[clockMode - 1] : format;
1212

1313
return useCallback(
14-
(time: MomentInput) => {
14+
(time: string | Date | number) => {
1515
switch (clockMode) {
1616
case 1:
1717
case 2:
18-
return moment(time).format(sameDay);
18+
return formatDate(time, sameDay);
1919

2020
default:
21-
return moment(time).format(format);
21+
return formatDate(time, format);
2222
}
2323
},
2424
[clockMode, format, sameDay],

0 commit comments

Comments
 (0)