chore: migrate client-side code from moment to date-fns

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

@@ -26,7 +26,7 @@ exports[`renders Default without crashing 1`] = `
           >
             <div>
               <p>
-                a minute June 1, 2024 at 12:30 AM
+                1 minute June 1, 2024 at 12:30 AM
               </p>
             </div>
           </div>
@@ -63,7 +63,7 @@ exports[`renders InvalidSettings without crashing 1`] = `
           >
             <div>
               <p>
-                a minute June 12, 2024 at 12:00 AM
+                1 minute June 12, 2024 at 12:00 AM
               </p>
             </div>
           </div>

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

@@ -7,7 +7,7 @@ exports[`renders WithDateObject without crashing 1`] = `
       aria-hidden="false"
       class="rcx-box rcx-box--full rcx-icon--name-mail rcx-icon rcx-css-1p3fsdk"
       role="status"
-      title="Invited January 1, 2025"
+      title="Invited January 1st, 2025"
     >
       
     </i>
@@ -22,7 +22,7 @@ exports[`renders WithISOStringDate without crashing 1`] = `
       aria-hidden="false"
       class="rcx-box rcx-box--full rcx-icon--name-mail rcx-icon rcx-css-1p3fsdk"
       role="status"
-      title="Invited January 1, 2025"
+      title="Invited January 1st, 2025"
     >
       
     </i>

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

@@ -541,7 +541,7 @@ exports[`renders InvitedUser without crashing 1`] = `
                       <div
                         class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
                       >
-                        January 1, 2025
+                        January 1st, 2025
                       </div>
                     </div>
                   </div>

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

@@ -1,32 +1,92 @@
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import type { DurationInputArg1, DurationInputArg2 } from 'moment';
-import moment from 'moment';
+import { startOfDay, startOfWeek, startOfMonth, startOfYear, endOfDay, subDays, subMonths } from 'date-fns';
 
 const label = (translationKey: TranslationKey): readonly [translationKey: TranslationKey] => [translationKey];
 
+function startOfDayUTC(d: Date): Date {
+	return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), 0, 0, 0, 0));
+}
+
+function endOfDayUTC(d: Date): Date {
+	return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), 23, 59, 59, 999));
+}
+
+function startOfWeekUTC(d: Date): Date {
+	const day = d.getUTCDay(); // 0 = Sunday
+	const sunday = new Date(d);
+	sunday.setUTCDate(d.getUTCDate() - day);
+	return startOfDayUTC(sunday);
+}
+
+function startOfMonthUTC(d: Date): Date {
+	return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1, 0, 0, 0, 0));
+}
+
+function startOfYearUTC(d: Date): Date {
+	return new Date(Date.UTC(d.getUTCFullYear(), 0, 1, 0, 0, 0, 0));
+}
+
+type StartOf = 'day' | 'year' | 'month' | 'week';
+type Subtract = { amount: number; unit: 'days' | 'months' };
+
 export const getClosedPeriod =
 	({
-		startOf,
-		subtract,
+		startOf: startOfKey,
+		subtract: subtractOpt,
 	}: {
-		startOf: 'day' | 'year' | 'month' | 'week';
-		subtract?: { amount: DurationInputArg1; unit: DurationInputArg2 };
+		startOf: StartOf;
+		subtract?: Subtract;
 	}): ((utc: boolean) => {
 		start: Date;
 		end: Date;
 	}) =>
-	(utc): { start: Date; end: Date } => {
-		const start = utc ? moment().utc() : moment();
-		const end = utc ? moment().utc() : moment();
+	(utc: boolean): { start: Date; end: Date } => {
+		const now = new Date();
+
+		let start: Date;
+		if (subtractOpt) {
+			const { amount, unit } = subtractOpt;
+			start = unit === 'days' ? subDays(now, amount) : subMonths(now, amount);
+		} else {
+			start = new Date(now.getTime());
+		}
+
+		if (utc) {
+			switch (startOfKey) {
+				case 'day':
+					start = startOfDayUTC(start);
+					break;
+				case 'week':
+					start = startOfWeekUTC(start);
+					break;
+				case 'month':
+					start = startOfMonthUTC(start);
+					break;
+				case 'year':
+					start = startOfYearUTC(start);
+					break;
+			}
+			return { start, end: endOfDayUTC(now) };
+		}
 
-		if (subtract) {
-			const { amount, unit } = subtract;
-			start.subtract(amount, unit);
+		switch (startOfKey) {
+			case 'day':
+				start = startOfDay(start);
+				break;
+			case 'week':
+				start = startOfWeek(start);
+				break;
+			case 'month':
+				start = startOfMonth(start);
+				break;
+			case 'year':
+				start = startOfYear(start);
+				break;
 		}
 
 		return {
-			start: start.startOf(startOf).toDate(),
-			end: end.endOf('day').toDate(),
+			start,
+			end: endOfDay(now),
 		};
 	};
 

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

@@ -112,7 +112,7 @@ describe('Thread Metrics', () => {
 			expect(navigateSpy).toHaveBeenCalledWith('thread', 'rid', 'thread', 'mid');
 
 			const threadCount = screen.getByTitle('Last_message__date__');
-			expect(threadCount).toHaveTextContent('5 replies July 1, 2024');
+			expect(threadCount).toHaveTextContent('5 replies July 1st, 2024');
 		});
 
 		it('should render small not followed with 3 participants and unread', async () => {

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

@@ -1,7 +1,7 @@
 import { isRoomFederated } from '@rocket.chat/core-typings';
 import type { IRoom, IMessage, ISubscription } from '@rocket.chat/core-typings';
 import { usePermission, useSetting, useUser } from '@rocket.chat/ui-contexts';
-import moment from 'moment';
+import { differenceInMinutes } from 'date-fns';
 
 import type { MessageActionConfig } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { useChat } from '../../../views/room/contexts/ChatContext';
@@ -32,8 +32,7 @@ export const useEditMessageAction = (
 		}
 
 		if (!canBypassBlockTimeLimit && blockEditInMinutes) {
-			const msgTs = message.ts ? moment(message.ts) : undefined;
-			const currentTsDiff = msgTs ? moment().diff(msgTs, 'minutes') : undefined;
+			const currentTsDiff = message.ts ? differenceInMinutes(new Date(), message.ts) : undefined;
 			return typeof currentTsDiff === 'number' && currentTsDiff < blockEditInMinutes;
 		}
 

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

@@ -1,3 +1,3 @@
 declare module 'cron' {
-	export declare function sendAt(precision: string): Moment;
+	export declare function sendAt(precision: string): { valueOf(): number };
 }

apps/meteor/client/hooks/useFormatDate.ts

@@ -1,8 +1,9 @@
 import { useSetting } from '@rocket.chat/ui-contexts';
-import moment from 'moment';
 import { useCallback } from 'react';
 
+import { formatDate } from '../lib/utils/dateFormat';
+
 export const useFormatDate = () => {
 	const format = useSetting('Message_DateFormat');
-	return useCallback((time: string | Date | number) => moment(time).format(String(format)), [format]);
+	return useCallback((time: string | Date | number) => formatDate(time, String(format)), [format]);
 };

apps/meteor/client/hooks/useFormatDateAndTime.ts

@@ -1,8 +1,8 @@
 import { useUserPreference, useSetting } from '@rocket.chat/ui-contexts';
-import type { MomentInput } from 'moment';
-import moment from 'moment';
 import { useCallback } from 'react';
 
+import { formatDate } from '../lib/utils/dateFormat';
+
 type UseFormatDateAndTimeParams = {
 	withSeconds?: boolean;
 };
@@ -12,15 +12,15 @@ export const useFormatDateAndTime = ({ withSeconds }: UseFormatDateAndTimeParams
 	const format = useSetting('Message_TimeAndDateFormat', 'LLL');
 
 	return useCallback(
-		(time: MomentInput) => {
+		(time: string | Date | number = new Date()) => {
 			switch (clockMode) {
 				case 1:
-					return moment(time).format(withSeconds ? 'MMMM D, Y h:mm:ss A' : 'MMMM D, Y h:mm A');
+					return formatDate(time, withSeconds ? 'MMMM D, YYYY h:mm:ss A' : 'MMMM D, YYYY h:mm A');
 				case 2:
-					return moment(time).format(withSeconds ? 'MMMM D, Y H:mm:ss' : 'MMMM D, Y H:mm');
+					return formatDate(time, withSeconds ? 'MMMM D, YYYY H:mm:ss' : 'MMMM D, YYYY H:mm');
 
 				default:
-					return moment(time).format(withSeconds ? 'L LTS' : format);
+					return formatDate(time, withSeconds ? 'L LTS' : format);
 			}
 		},
 		[clockMode, format, withSeconds],

apps/meteor/client/hooks/useFormatTime.ts

@@ -1,8 +1,8 @@
 import { useUserPreference, useSetting } from '@rocket.chat/ui-contexts';
-import type { MomentInput } from 'moment';
-import moment from 'moment';
 import { useCallback } from 'react';
 
+import { formatDate } from '../lib/utils/dateFormat';
+
 const dayFormat = ['h:mm A', 'H:mm'] as const;
 
 export const useFormatTime = () => {
@@ -11,14 +11,14 @@ export const useFormatTime = () => {
 	const sameDay = clockMode !== undefined ? dayFormat[clockMode - 1] : format;
 
 	return useCallback(
-		(time: MomentInput) => {
+		(time: string | Date | number) => {
 			switch (clockMode) {
 				case 1:
 				case 2:
-					return moment(time).format(sameDay);
+					return formatDate(time, sameDay);
 
 				default:
-					return moment(time).format(format);
+					return formatDate(time, format);
 			}
 		},
 		[clockMode, format, sameDay],

apps/meteor/client/hooks/useFormattedRelativeTime.ts

@@ -1,14 +1,5 @@
-import moment from 'moment';
 import { useMemo } from 'react';
 
-export const useFormattedRelativeTime = (timeMs: number): string =>
-	useMemo(() => {
-		moment.relativeTimeThreshold('s', 60);
-		moment.relativeTimeThreshold('ss', 0);
-		moment.relativeTimeThreshold('m', 60);
-		moment.relativeTimeThreshold('h', 24);
-		moment.relativeTimeThreshold('d', 31);
-		moment.relativeTimeThreshold('M', 12);
+import { formatDurationMs } from '../lib/utils/dateFormat';
 
-		return moment.duration(timeMs).humanize();
-	}, [timeMs]);
+export const useFormattedRelativeTime = (timeMs: number): string => useMemo(() => formatDurationMs(timeMs), [timeMs]);

apps/meteor/client/hooks/usePruneWarningMessage.spec.ts

@@ -38,9 +38,9 @@ describe('usePruneWarningMessage hook', () => {
 					TTLChannels: 60000,
 				}),
 			});
-			expect(result.current).toEqual('a minute June 1, 2024 at 12:30 AM');
+			expect(result.current).toEqual('1 minute June 1, 2024 at 12:30 AM');
 			await jest.advanceTimersByTimeAsync(31 * 60 * 1000);
-			await waitFor(() => expect(result.current).toEqual('a minute June 1, 2024 at 1:00 AM'));
+			await waitFor(() => expect(result.current).toEqual('1 minute June 1, 2024 at 1:00 AM'));
 		});
 
 		it('Should return the default warning with precision set to every_hour', () => {
@@ -52,7 +52,7 @@ describe('usePruneWarningMessage hook', () => {
 					precision: '1',
 				}),
 			});
-			expect(result.current).toEqual('a minute June 1, 2024 at 1:00 AM');
+			expect(result.current).toEqual('1 minute June 1, 2024 at 1:00 AM');
 		});
 
 		it('Should return the default warning with precision set to every_six_hours', () => {
@@ -64,7 +64,7 @@ describe('usePruneWarningMessage hook', () => {
 					precision: '2',
 				}),
 			});
-			expect(result.current).toEqual('a minute June 1, 2024 at 6:00 AM');
+			expect(result.current).toEqual('1 minute June 1, 2024 at 6:00 AM');
 		});
 
 		it('Should return the default warning with precision set to every_day', () => {
@@ -76,7 +76,7 @@ describe('usePruneWarningMessage hook', () => {
 					precision: '3',
 				}),
 			});
-			expect(result.current).toEqual('a minute June 2, 2024 at 12:00 AM');
+			expect(result.current).toEqual('1 minute June 2, 2024 at 12:00 AM');
 		});
 
 		it('Should return the default warning with advanced precision', () => {
@@ -89,7 +89,7 @@ describe('usePruneWarningMessage hook', () => {
 					advancedPrecisionCron: '0 0 1 */1 *',
 				}),
 			});
-			expect(result.current).toEqual('a minute July 1, 2024 at 12:00 AM');
+			expect(result.current).toEqual('1 minute July 1, 2024 at 12:00 AM');
 		});
 	});
 
@@ -102,7 +102,7 @@ describe('usePruneWarningMessage hook', () => {
 					TTLChannels: 60000,
 				}),
 			});
-			expect(result.current).toEqual('a minute June 1, 2024 at 12:30 AM');
+			expect(result.current).toEqual('1 minute June 1, 2024 at 12:30 AM');
 		});
 
 		it('Should return the unpinned messages warning', () => {
@@ -114,7 +114,7 @@ describe('usePruneWarningMessage hook', () => {
 					doNotPrunePinned: true,
 				}),
 			});
-			expect(result.current).toEqual('Unpinned a minute June 1, 2024 at 12:30 AM');
+			expect(result.current).toEqual('Unpinned 1 minute June 1, 2024 at 12:30 AM');
 		});
 
 		it('Should return the files only warning', () => {
@@ -127,7 +127,7 @@ describe('usePruneWarningMessage hook', () => {
 					filesOnly: true,
 				}),
 			});
-			expect(result.current).toEqual('FilesOnly a minute June 1, 2024 at 12:30 AM');
+			expect(result.current).toEqual('FilesOnly 1 minute June 1, 2024 at 12:30 AM');
 		});
 
 		it('Should return the unpinned files only warning', () => {
@@ -141,7 +141,7 @@ describe('usePruneWarningMessage hook', () => {
 					doNotPrunePinned: true,
 				}),
 			});
-			expect(result.current).toEqual('UnpinnedFilesOnly a minute June 1, 2024 at 12:30 AM');
+			expect(result.current).toEqual('UnpinnedFilesOnly 1 minute June 1, 2024 at 12:30 AM');
 		});
 	});