diff --git a/apps/meteor/client/components/InfoPanel/__snapshots__/RetentionPolicyCallout.spec.tsx.snap b/apps/meteor/client/components/InfoPanel/__snapshots__/RetentionPolicyCallout.spec.tsx.snap index 8b1d477b28c52..4a717b0108484 100644 --- a/apps/meteor/client/components/InfoPanel/__snapshots__/RetentionPolicyCallout.spec.tsx.snap +++ b/apps/meteor/client/components/InfoPanel/__snapshots__/RetentionPolicyCallout.spec.tsx.snap @@ -26,7 +26,7 @@ exports[`renders Default without crashing 1`] = ` >

- a minute June 1, 2024 at 12:30 AM + 1 minute June 1, 2024 at 12:30 AM

@@ -63,7 +63,7 @@ exports[`renders InvalidSettings without crashing 1`] = ` >

- a minute June 12, 2024 at 12:00 AM + 1 minute June 12, 2024 at 12:00 AM

diff --git a/apps/meteor/client/components/InvitationBadge/__snapshots__/InvitationBadge.spec.tsx.snap b/apps/meteor/client/components/InvitationBadge/__snapshots__/InvitationBadge.spec.tsx.snap index da3763aaf4e55..32132535fbba5 100644 --- a/apps/meteor/client/components/InvitationBadge/__snapshots__/InvitationBadge.spec.tsx.snap +++ b/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" >  @@ -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" >  diff --git a/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap b/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap index d9a9819ddbc26..07e5652512bc2 100644 --- a/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap +++ b/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap @@ -541,7 +541,7 @@ exports[`renders InvitedUser without crashing 1`] = `
- January 1, 2025 + January 1st, 2025
diff --git a/apps/meteor/client/components/dashboards/periods.ts b/apps/meteor/client/components/dashboards/periods.ts index 637a2e0ac0b9f..dcdcae33b2876 100644 --- a/apps/meteor/client/components/dashboards/periods.ts +++ b/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), }; }; diff --git a/apps/meteor/client/components/message/content/ThreadMetrics.spec.tsx b/apps/meteor/client/components/message/content/ThreadMetrics.spec.tsx index 363eb1f2870b8..c6138e9dd342d 100644 --- a/apps/meteor/client/components/message/content/ThreadMetrics.spec.tsx +++ b/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 () => { diff --git a/apps/meteor/client/components/message/toolbar/useEditMessageAction.ts b/apps/meteor/client/components/message/toolbar/useEditMessageAction.ts index 92df4f7cea35a..39ef7e94e2fd6 100644 --- a/apps/meteor/client/components/message/toolbar/useEditMessageAction.ts +++ b/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; } diff --git a/apps/meteor/client/definitions/cron.d.ts b/apps/meteor/client/definitions/cron.d.ts index 25c4be4f97a7c..f3c1e67e19795 100644 --- a/apps/meteor/client/definitions/cron.d.ts +++ b/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 }; } diff --git a/apps/meteor/client/hooks/useFormatDate.ts b/apps/meteor/client/hooks/useFormatDate.ts index 4beeb1d70b051..35410591ddd9d 100644 --- a/apps/meteor/client/hooks/useFormatDate.ts +++ b/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]); }; diff --git a/apps/meteor/client/hooks/useFormatDateAndTime.ts b/apps/meteor/client/hooks/useFormatDateAndTime.ts index 9f73cc5718ea2..2f2ddaa182d6f 100644 --- a/apps/meteor/client/hooks/useFormatDateAndTime.ts +++ b/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], diff --git a/apps/meteor/client/hooks/useFormatTime.ts b/apps/meteor/client/hooks/useFormatTime.ts index 38b3cf236b703..fcb1c445e03fc 100644 --- a/apps/meteor/client/hooks/useFormatTime.ts +++ b/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], diff --git a/apps/meteor/client/hooks/useFormattedRelativeTime.ts b/apps/meteor/client/hooks/useFormattedRelativeTime.ts index b2003c3825b77..555b02d0d9b69 100644 --- a/apps/meteor/client/hooks/useFormattedRelativeTime.ts +++ b/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]); diff --git a/apps/meteor/client/hooks/usePruneWarningMessage.spec.ts b/apps/meteor/client/hooks/usePruneWarningMessage.spec.ts index a1982f6b81f9d..77d44e6ece876 100644 --- a/apps/meteor/client/hooks/usePruneWarningMessage.spec.ts +++ b/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'); }); }); diff --git a/apps/meteor/client/hooks/useTimeAgo.ts b/apps/meteor/client/hooks/useTimeAgo.ts index 4d4b7d12b7b7a..c159963ede1f8 100644 --- a/apps/meteor/client/hooks/useTimeAgo.ts +++ b/apps/meteor/client/hooks/useTimeAgo.ts @@ -1,9 +1,8 @@ import { useUserPreference, useSetting } from '@rocket.chat/ui-contexts'; -import type { MomentInput } from 'moment'; -import moment from 'moment'; import { useCallback } from 'react'; import { t } from '../../app/utils/lib/i18n'; +import { formatTimeAgo } from '../lib/utils/dateFormat'; const dayFormat = ['h:mm A', 'H:mm'] as const; @@ -11,13 +10,16 @@ export const useTimeAgo = () => { const clockMode = useUserPreference<1 | 2>('clockMode'); const timeFormat = useSetting('Message_TimeFormat', 'LT'); const format = clockMode !== undefined ? dayFormat[clockMode - 1] : timeFormat; + return useCallback( - (time: MomentInput) => { - return moment(time).calendar(null, { - sameDay: format, - lastDay: moment(time).calendar('lastDay').replace('LT', format), - lastWeek: `dddd ${format}`, - sameElse: 'LL', + (time: string | Date | number) => { + return formatTimeAgo(time, { + sameDayFormat: format, + yesterdayLabel: t('Yesterday_at'), + lastDayFormat: format, + lastWeekFormat: `dddd ${format}`, + otherFormat: 'LL', + otherYearFormat: 'LL', }); }, [format], @@ -28,27 +30,15 @@ export const useShortTimeAgo = () => { const clockMode = useUserPreference<1 | 2>('clockMode'); const timeFormat = useSetting('Message_TimeFormat', 'LT'); const format = clockMode !== undefined ? dayFormat[clockMode - 1] : timeFormat; - return useCallback( - (time: MomentInput) => - moment(time).calendar(null, { - sameDay: format, - lastDay: `[${t('Yesterday')}]`, - lastWeek: 'dddd', - sameElse(this: moment.Moment, now) { - /* - Using only this.isBefore(): - ERRORS: - Cannot invoke an object which is possibly 'undefined'. - This expression is not callable. - Not all constituents of type 'CalendarSpecVal' are callable. - Type 'string' has no call signatures. - */ - if (this.isBefore(now, 'year')) { - return 'LL'; - } - return 'MMM Do'; - }, + return useCallback( + (time: string | Date | number) => + formatTimeAgo(time, { + sameDayFormat: format, + yesterdayLabel: t('Yesterday'), + lastWeekFormat: 'dddd', + otherFormat: 'MMM Do', + otherYearFormat: 'LL', }), [format], ); diff --git a/apps/meteor/client/hooks/useTimeFromNow.ts b/apps/meteor/client/hooks/useTimeFromNow.ts index 3cda1e37c2713..6d8af9aa265e1 100644 --- a/apps/meteor/client/hooks/useTimeFromNow.ts +++ b/apps/meteor/client/hooks/useTimeFromNow.ts @@ -1,5 +1,6 @@ -import moment from 'moment'; import { useCallback } from 'react'; +import { formatFromNow } from '../lib/utils/dateFormat'; + export const useTimeFromNow = (withSuffix: boolean) => - useCallback((date?: Date | string) => moment(date).fromNow(!withSuffix), [withSuffix]); + useCallback((date?: Date | string) => formatFromNow(date ?? new Date(), withSuffix), [withSuffix]); diff --git a/apps/meteor/client/hooks/useTimezoneNameList.ts b/apps/meteor/client/hooks/useTimezoneNameList.ts index 6c8547e037a7c..e51d8812ac2c9 100644 --- a/apps/meteor/client/hooks/useTimezoneNameList.ts +++ b/apps/meteor/client/hooks/useTimezoneNameList.ts @@ -1,4 +1,8 @@ -import moment from 'moment-timezone'; import { useMemo } from 'react'; -export const useTimezoneNameList = (): string[] => useMemo(() => moment.tz.names(), []); +const getTimeZoneNames = (): string[] => { + const intl = Intl as typeof Intl & { supportedValuesOf?(key: 'timeZone'): string[] }; + return typeof intl.supportedValuesOf === 'function' ? intl.supportedValuesOf('timeZone') : []; +}; + +export const useTimezoneNameList = (): string[] => useMemo(() => getTimeZoneNames(), []); diff --git a/apps/meteor/client/hooks/useTimezoneTime.ts b/apps/meteor/client/hooks/useTimezoneTime.ts index d6ce1a7929280..9907606320170 100644 --- a/apps/meteor/client/hooks/useTimezoneTime.ts +++ b/apps/meteor/client/hooks/useTimezoneTime.ts @@ -1,29 +1,21 @@ -import moment from 'moment'; +import { guessTimezoneFromOffset } from '@rocket.chat/tools'; import { useState, useEffect } from 'react'; -import { useFormatTime } from './useFormatTime'; - export const useTimezoneTime = (offset: number, interval = 1000): string => { - const [time, setTime] = useState(() => moment().utcOffset(offset)); - - const format = useFormatTime(); + const [now, setNow] = useState(() => new Date()); useEffect(() => { if (offset === undefined) { return; } - const update = (): void => { - setTime(moment().utcOffset(offset)); - }; - - const timer = setInterval(update, interval); - update(); - - return (): void => { - clearInterval(timer); - }; + const timer = setInterval(() => setNow(new Date()), interval); + return () => clearInterval(timer); }, [offset, interval]); - return format(time); + const zone = guessTimezoneFromOffset(offset); + return new Intl.DateTimeFormat(undefined, { + timeZone: zone, + timeStyle: 'short', + }).format(now); }; diff --git a/apps/meteor/client/lib/chats/data.ts b/apps/meteor/client/lib/chats/data.ts index 5206e802e7d0c..bd02100bb9e87 100644 --- a/apps/meteor/client/lib/chats/data.ts +++ b/apps/meteor/client/lib/chats/data.ts @@ -1,7 +1,7 @@ import { isEncryptedMessageContent, type IEditedMessage, type IMessage, type IRoom, type ISubscription } from '@rocket.chat/core-typings'; import { MessageTypes } from '@rocket.chat/message-types'; import { Random } from '@rocket.chat/random'; -import moment from 'moment'; +import { differenceInMinutes } from 'date-fns'; import type { DataAPI } from './ChatAPI'; import { hasAtLeastOnePermission, hasPermission } from '../../../app/authorization/client'; @@ -77,7 +77,7 @@ export const createDataAPI = ({ rid, tmid }: { rid: IRoom['_id']; tmid: IMessage const blockEditInMinutes = settings.peek('Message_AllowEditing_BlockEditInMinutes') as number | undefined; const bypassBlockTimeLimit = hasPermission('bypass-time-limit-edit-and-delete', message.rid); - const elapsedMinutes = moment().diff(message.ts, 'minutes'); + const elapsedMinutes = differenceInMinutes(new Date(), message.ts); if (!bypassBlockTimeLimit && elapsedMinutes && blockEditInMinutes && elapsedMinutes > blockEditInMinutes) { return false; } @@ -215,7 +215,7 @@ export const createDataAPI = ({ rid, tmid }: { rid: IRoom['_id']; tmid: IMessage const blockDeleteInMinutes = settings.peek('Message_AllowDeleting_BlockDeleteInMinutes') as number | undefined; const bypassBlockTimeLimit = hasPermission('bypass-time-limit-edit-and-delete', message.rid); - const elapsedMinutes = moment().diff(message.ts, 'minutes'); + const elapsedMinutes = differenceInMinutes(new Date(), message.ts); const onTimeForDelete = bypassBlockTimeLimit || !blockDeleteInMinutes || !elapsedMinutes || elapsedMinutes <= blockDeleteInMinutes; return deleteAllowed && onTimeForDelete; diff --git a/apps/meteor/client/lib/utils/dateFormat.ts b/apps/meteor/client/lib/utils/dateFormat.ts new file mode 100644 index 0000000000000..f09bea095a887 --- /dev/null +++ b/apps/meteor/client/lib/utils/dateFormat.ts @@ -0,0 +1,97 @@ +import { format, formatDistanceToNow, formatDuration, intervalToDuration, differenceInCalendarDays } from 'date-fns'; +import type { Locale } from 'date-fns'; + +export type DateInput = string | Date | number; + +/** + * Map moment-style locale format tokens to date-fns format string. + * Used for Message_DateFormat and Message_TimeFormat settings (defaults: LL, LT). + */ +export const momentFormatToDateFns = (momentFormat: string): string => { + const tokenMap: Record = { + L: 'P', // 09/04/1986 + LT: 'p', // 8:30 PM + LTS: 'pp', // 8:30:00 PM + LL: 'PPP', // September 4, 1986 + LLL: 'PPP p', // September 4, 1986 8:30 PM + LLLL: 'EEEE, PPP p', + // Common tokens + YYYY: 'yyyy', + YY: 'yy', + Y: 'yyyy', + MMMM: 'MMMM', + MMM: 'MMM', + MM: 'MM', + M: 'M', + Do: 'do', // 4th + DD: 'dd', + D: 'd', + dddd: 'EEEE', + ddd: 'EEE', + HH: 'HH', + H: 'H', + hh: 'hh', + h: 'h', + mm: 'mm', + m: 'm', + ss: 'ss', + s: 's', + A: 'a', + a: 'a', + }; + let out = momentFormat; + const entries = Object.entries(tokenMap).sort(([a], [b]) => b.length - a.length); + for (const [mom, df] of entries) { + out = out.replace(new RegExp(mom.replace(/([.*+?^${}()|[\]\\])/g, '\\$1'), 'g'), df); + } + return out; +}; + +export const formatDate = (date: DateInput, formatStr: string, locale?: Locale): string => { + const d = typeof date === 'object' && date instanceof Date ? date : new Date(date); + const dfFormat = momentFormatToDateFns(formatStr); + return format(d, dfFormat, locale ? { locale } : undefined); +}; + +export const formatTimeAgo = ( + date: DateInput, + options: { + yesterdayLabel: string; + sameDayFormat: string; + lastDayFormat?: string; // if set, show "Yesterday" + format(time, lastDayFormat) + lastWeekFormat: string; + otherFormat: string; + otherYearFormat: string; + }, + locale?: Locale, +): string => { + const d = typeof date === 'object' && date instanceof Date ? date : new Date(date); + const now = new Date(); + const diffDays = differenceInCalendarDays(now, d); + + if (diffDays === 0) { + return format(d, momentFormatToDateFns(options.sameDayFormat), locale ? { locale } : undefined); + } + if (diffDays === 1) { + if (options.lastDayFormat) { + return `${options.yesterdayLabel} ${format(d, momentFormatToDateFns(options.lastDayFormat), locale ? { locale } : undefined)}`; + } + return options.yesterdayLabel; + } + if (diffDays > 1 && diffDays < 7) { + return format(d, momentFormatToDateFns(options.lastWeekFormat), locale ? { locale } : undefined); + } + const diffYears = now.getFullYear() - d.getFullYear(); + const fmt = diffYears !== 0 ? options.otherYearFormat : options.otherFormat; + return format(d, momentFormatToDateFns(fmt), locale ? { locale } : undefined); +}; + +export const formatFromNow = (date: DateInput, addSuffix: boolean, locale?: Locale): string => { + const d = typeof date === 'object' && date instanceof Date ? date : new Date(date); + return formatDistanceToNow(d, { addSuffix, locale }); +}; + +export const formatDurationMs = (timeMs: number, locale?: Locale): string => { + const duration = intervalToDuration({ start: 0, end: timeMs }); + return formatDuration(duration, { locale }); +}; diff --git a/apps/meteor/client/lib/utils/getDateRange.ts b/apps/meteor/client/lib/utils/getDateRange.ts index 6a7cf3b296ceb..2cf3e9148c181 100644 --- a/apps/meteor/client/lib/utils/getDateRange.ts +++ b/apps/meteor/client/lib/utils/getDateRange.ts @@ -1,15 +1,12 @@ -import moment from 'moment'; +import { startOfDay, endOfDay } from 'date-fns'; export const getDateRange = (): { start: string; end: string; } => { - const today = moment(new Date()); - const start = moment(new Date(today.year(), today.month(), today.date(), 0, 0, 0)); - const end = moment(new Date(today.year(), today.month(), today.date(), 23, 59, 59)); - + const now = new Date(); return { - start: start.toISOString(), - end: end.toISOString(), + start: startOfDay(now).toISOString(), + end: endOfDay(now).toISOString(), }; }; diff --git a/apps/meteor/client/lib/utils/timeAgo.ts b/apps/meteor/client/lib/utils/timeAgo.ts index 98e5d936c2d6b..2826a218d98f8 100644 --- a/apps/meteor/client/lib/utils/timeAgo.ts +++ b/apps/meteor/client/lib/utils/timeAgo.ts @@ -1,26 +1,23 @@ import { Tracker } from 'meteor/tracker'; -import type { Moment, MomentInput } from 'moment'; -import moment from 'moment'; import { getUserPreference } from '../../../app/utils/client'; import { t } from '../../../app/utils/lib/i18n'; import { settings } from '../settings'; import { getUserId } from '../user'; +import { formatTimeAgo } from './dateFormat'; const dayFormat = ['h:mm A', 'H:mm']; -export const timeAgo = (date: MomentInput) => { +export const timeAgo = (date: string | Date | number) => { const clockMode = Tracker.nonreactive(() => getUserPreference(getUserId(), 'clockMode', false) as number | boolean); const messageTimeFormat = settings.peek('Message_TimeFormat'); const sameDay = (typeof clockMode === 'number' ? dayFormat[clockMode - 1] : undefined) || messageTimeFormat; - return moment(date).calendar(null, { - lastDay: `[${t('yesterday')}]`, - sameDay, - lastWeek: 'dddd', - sameElse(this: Moment, now) { - const diff = Math.ceil(this.diff(now, 'years', true)); - return diff < 0 ? 'MMM D YYYY' : 'MMM D'; - }, + return formatTimeAgo(date, { + yesterdayLabel: t('yesterday'), + sameDayFormat: sameDay, + lastWeekFormat: 'dddd', + otherFormat: 'MMM d', + otherYearFormat: 'MMM d yyyy', }); }; diff --git a/apps/meteor/client/providers/TranslationProvider.tsx b/apps/meteor/client/providers/TranslationProvider.tsx index c8aaabbf8470c..b9a53c7b78a6f 100644 --- a/apps/meteor/client/providers/TranslationProvider.tsx +++ b/apps/meteor/client/providers/TranslationProvider.tsx @@ -12,10 +12,9 @@ import en from '@rocket.chat/i18n/dist/resources/en.i18n.json'; import { capitalize } from '@rocket.chat/string-helpers'; import { normalizeLanguage } from '@rocket.chat/tools'; import type { TranslationContextValue } from '@rocket.chat/ui-contexts'; -import { useMethod, useSetting, TranslationContext } from '@rocket.chat/ui-contexts'; +import { useSetting, TranslationContext } from '@rocket.chat/ui-contexts'; import type i18next from 'i18next'; import I18NextHttpBackend from 'i18next-http-backend'; -import moment from 'moment'; import type { ReactElement, ReactNode } from 'react'; import { useEffect, useMemo } from 'react'; import { I18nextProvider, initReactI18next, useTranslation } from 'react-i18next'; @@ -189,8 +188,6 @@ type TranslationProviderProps = { }; const TranslationProvider = ({ children }: TranslationProviderProps): ReactElement => { - const loadLocale = useMethod('loadLocale'); - const language = useAutoLanguage(); const i18nextInstance = useI18next(language); useCustomTranslations(i18nextInstance); @@ -215,25 +212,6 @@ const TranslationProvider = ({ children }: TranslationProviderProps): ReactEleme [language, i18nextInstance], ); - useEffect(() => { - if (moment.locales().includes(language.toLowerCase())) { - moment.locale(language); - return; - } - - const locale = !availableLanguages.find((lng) => lng.key === language) ? language.split('-').shift() : language; - - loadLocale(locale ?? language) - .then((localeSrc) => { - localeSrc && Function(localeSrc).call({ moment }); - moment.locale(language); - }) - .catch((error) => { - moment.locale('en'); - console.error('Error loading moment locale:', error); - }); - }, [language, loadLocale, availableLanguages]); - useEffect( () => onLoggedIn(() => { diff --git a/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx index 9866febc2dcaa..d742456b67f2a 100644 --- a/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx +++ b/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx @@ -65,7 +65,7 @@ describe('SidebarItemBadges', () => { }, ); - expect(screen.getByRole('status', { name: 'Invited January 1, 2025' })).toBeInTheDocument(); + expect(screen.getByRole('status', { name: 'Invited January 1st, 2025' })).toBeInTheDocument(); }); it('should not render InvitationBadge when subscription does not have status INVITED', () => { diff --git a/apps/meteor/client/startup/startup.ts b/apps/meteor/client/startup/startup.ts index 45fa6c12b1bbb..e9568ae7e2dea 100644 --- a/apps/meteor/client/startup/startup.ts +++ b/apps/meteor/client/startup/startup.ts @@ -1,7 +1,6 @@ import type { UserStatus } from '@rocket.chat/core-typings'; import { Meteor } from 'meteor/meteor'; import { Tracker } from 'meteor/tracker'; -import moment from 'moment'; import 'highlight.js/styles/github.css'; import { sdk } from '../../app/utils/client/lib/SDKClient'; @@ -31,7 +30,7 @@ Meteor.startup(() => { return; } - const utcOffset = moment().utcOffset() / 60; + const utcOffset = -new Date().getTimezoneOffset() / 60; if (user.utcOffset !== utcOffset) { sdk.call('userSetUtcOffset', utcOffset); } diff --git a/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx b/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx index bbbb48583658e..24e400998b3c5 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx @@ -1,15 +1,15 @@ import { Icon, Margins, Pagination, Skeleton, Table, TableBody, TableCell, TableHead, TableRow, Tile } from '@rocket.chat/fuselage'; -import moment from 'moment'; +import { format } from 'date-fns'; import type { ReactElement } from 'react'; import { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { useChannelsList } from './useChannelsList'; import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton'; import PeriodSelector from '../../../../components/dashboards/PeriodSelector'; import { usePeriodSelectorState } from '../../../../components/dashboards/usePeriodSelectorState'; import Growth from '../../../../components/dataView/Growth'; import EngagementDashboardCardFilter from '../EngagementDashboardCardFilter'; -import { useChannelsList } from './useChannelsList'; const ChannelsOverview = (): ReactElement => { const [period, periodSelectorProps] = usePeriodSelectorState('last 7 days', 'last 30 days', 'last 90 days'); @@ -86,8 +86,8 @@ const ChannelsOverview = (): ReactElement => { {name} - {moment(createdAt).format('L')} - {moment(updatedAt).format('L')} + {format(new Date(createdAt ?? new Date()), 'P')} + {format(new Date(updatedAt ?? new Date()), 'P')} {messagesCount} {messagesVariation} diff --git a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx index 2d4b63227eb4b..c88dc9f909367 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx @@ -1,7 +1,7 @@ import { ResponsiveBar } from '@nivo/bar'; import { Box, Flex, Skeleton, Palette, Tooltip } from '@rocket.chat/fuselage'; import colors from '@rocket.chat/fuselage-tokens/colors.json'; -import moment from 'moment'; +import { differenceInDays, addDays, format } from 'date-fns'; import type { ReactElement } from 'react'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -34,13 +34,16 @@ const MessagesSentSection = ({ timezone }: MessagesSentSectionProps): ReactEleme return []; } - const values = Array.from({ length: moment(data.end).diff(data.start, 'days') + 1 }, (_, i) => ({ - date: moment(data.start).add(i, 'days').toISOString(), + const startDate = new Date(data.start); + const endDate = new Date(data.end); + const daysCount = differenceInDays(endDate, startDate) + 1; + const values = Array.from({ length: daysCount }, (_, i) => ({ + date: addDays(startDate, i).toISOString(), newMessages: 0, })); for (const { day, messages } of data.days ?? []) { - const i = moment(day).diff(data.start, 'days'); + const i = differenceInDays(new Date(day), startDate); if (i >= 0) { values[i].newMessages += messages; } @@ -114,7 +117,7 @@ const MessagesSentSection = ({ timezone }: MessagesSentSectionProps): ReactEleme tickPadding: 8, tickRotation: values.length > 31 ? 90 : 0, truncateTickAt: 0, - format: (date): string => moment(date).format('DD/MM'), + format: (date): string => format(new Date(date), 'dd/MM'), }} axisLeft={{ tickSize: 0, diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx index abbd31f2c3e8e..9a2ee626cd20b 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx @@ -1,7 +1,7 @@ import { ResponsiveLine } from '@nivo/line'; import { Box, Flex, Skeleton, Tile } from '@rocket.chat/fuselage'; import colors from '@rocket.chat/fuselage-tokens/colors.json'; -import moment from 'moment'; +import { addDays, startOfDay, differenceInDays, endOfDay, subDays, format } from 'date-fns'; import type { ReactElement } from 'react'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -36,13 +36,14 @@ const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps): ReactElement return []; } + const startDate = new Date(data.start); const createPoint = (i: number): { x: Date; y: number } => ({ - x: moment(data.start).add(i, 'days').startOf('day').toDate(), + x: startOfDay(addDays(startDate, i)), y: 0, }); - const createPoints = (): { x: Date; y: number }[] => - Array.from({ length: moment(data.end).diff(data.start, 'days') }, (_, i) => createPoint(i)); + const daysCount = differenceInDays(new Date(data.end), startDate); + const createPoints = (): { x: Date; y: number }[] => Array.from({ length: daysCount }, (_, i) => createPoint(i)); const dauValuesLocal = createPoints(); const prevDauValue = createPoint(-1); @@ -52,10 +53,11 @@ const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps): ReactElement const prevMauValue = createPoint(-1); const usersListsMap = data.month.reduce<{ [x: number]: string[] }>((map, dayData) => { - const date = utc - ? moment.utc({ year: dayData.year, month: dayData.month - 1, day: dayData.day }).endOf('day') - : moment({ year: dayData.year, month: dayData.month - 1, day: dayData.day }).endOf('day'); - const dateOffset = date.diff(data.start, 'days'); + const d = utc + ? new Date(Date.UTC(dayData.year, dayData.month - 1, dayData.day)) + : new Date(dayData.year, dayData.month - 1, dayData.day); + const date = utc ? new Date(Date.UTC(dayData.year, dayData.month - 1, dayData.day, 23, 59, 59, 999)) : endOfDay(d); + const dateOffset = differenceInDays(date, startDate); if (dateOffset >= 0 && dauValuesLocal[dateOffset]) { map[dateOffset] = dayData.usersList; dauValuesLocal[dateOffset].y = dayData.users; @@ -107,7 +109,7 @@ const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps): ReactElement <> { @@ -218,7 +220,7 @@ const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps): ReactElement tickPadding: 4, tickRotation: 0, tickValues: 'every 3 days', - format: (date): string => moment(date).format('DD/MM'), + format: (date): string => format(new Date(date), 'dd/MM'), }} animate={true} motionConfig='stiff' diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/ContentForDays.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/ContentForDays.tsx index 01c622829e6be..1df3f19f1eeb8 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/users/ContentForDays.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/users/ContentForDays.tsx @@ -1,11 +1,12 @@ import { ResponsiveBar } from '@nivo/bar'; import { Box, Flex, IconButton, Margins, Skeleton } from '@rocket.chat/fuselage'; import colors from '@rocket.chat/fuselage-tokens/colors.json'; -import moment from 'moment'; +import { format, subDays } from 'date-fns'; import type { ReactElement } from 'react'; import { useMemo } from 'react'; import { useWeeklyChatActivity } from './useWeeklyChatActivity'; +import { formatDate } from '../../../../lib/utils/dateFormat'; type ContentForDaysProps = { displacement: number; @@ -23,9 +24,10 @@ const ContentForDays = ({ displacement, onPreviousDateClick, onNextDateClick, ti return null; } - const endOfWeek = moment(data.day); - const startOfWeek = moment(data.day).subtract(6, 'days'); - return `${startOfWeek.format('L')} - ${endOfWeek.format('L')}`; + const dayDate = new Date(data.day); + const endOfWeek = dayDate; + const startOfWeek = subDays(dayDate, 6); + return `${format(startOfWeek, 'P')} - ${format(endOfWeek, 'P')}`; }, [data]); const values = useMemo( @@ -33,10 +35,10 @@ const ContentForDays = ({ displacement, onPreviousDateClick, onNextDateClick, ti data?.month ?.map(({ users, day, month, year }) => ({ users, - day: moment({ year, month: month - 1, day }), + day: new Date(year, month - 1, day).getTime(), })) - ?.sort(({ day: a }, { day: b }) => a.diff(b)) - ?.map(({ users, day }) => ({ users, day: String(day.valueOf()) })) ?? [], + ?.sort((a, b) => a.day - b.day) + ?.map(({ users, day }) => ({ users, day: String(day) })) ?? [], [data], ); @@ -85,7 +87,7 @@ const ContentForDays = ({ displacement, onPreviousDateClick, onNextDateClick, ti tickPadding: 4, tickRotation: 0, tickValues: 'every 3 days', - format: (timestamp): string => moment(parseInt(timestamp, 10)).format('L'), + format: (timestamp): string => formatDate(parseInt(timestamp, 10), 'L'), }} axisLeft={null} animate={true} @@ -98,11 +100,6 @@ const ContentForDays = ({ displacement, onPreviousDateClick, onNextDateClick, ti fill: colors.n600, fontFamily: 'Inter, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo UI", Arial, sans-serif', - fontSize: '10px', - fontStyle: 'normal', - fontWeight: 600, - letterSpacing: '0.2px', - lineHeight: '12px', }, }, }, diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx index 52772d503e708..000f52e057cc8 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx @@ -2,7 +2,7 @@ import { ResponsiveBar } from '@nivo/bar'; import { Box, Button, Chevron, Skeleton, Tooltip } from '@rocket.chat/fuselage'; import { useBreakpoints } from '@rocket.chat/fuselage-hooks'; import colors from '@rocket.chat/fuselage-tokens/colors.json'; -import moment from 'moment'; +import { format } from 'date-fns'; import type { ReactElement } from 'react'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -50,7 +50,7 @@ const ContentForHours = ({ displacement, onPreviousDateClick, onNextDateClick, t - {data ? moment(data.day).format(displacement < 7 ? 'dddd' : 'L') : null} + {data ? format(new Date(data.day), displacement < 7 ? 'EEEE' : 'P') : null}