chore: migrate from momentjs to dayjs (#6724)

Rohit3523 · web-flow · commit 48beb9937574 · 2025-12-03T17:30:50.000-03:00
diff --git a/app/containers/MessageActions/index.tsx b/app/containers/MessageActions/index.tsx
@@ -2,8 +2,8 @@ import React, { forwardRef, useImperativeHandle } from 'react';
 import { Alert, Share } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { connect } from 'react-redux';
-import moment from 'moment';
 
+import dayjs from '../../lib/dayjs';
 import database from '../../lib/database';
 import { getSubscriptionByRoomId } from '../../lib/database/services/Subscription';
 import I18n from '../../i18n';
@@ -154,11 +154,11 @@ const MessageActions = React.memo(
 				if (blockEditInMinutes) {
 					let msgTs;
 					if (message.ts != null) {
-						msgTs = moment(message.ts);
+						msgTs = dayjs(message.ts);
 					}
 					let currentTsDiff = 0;
 					if (msgTs != null) {
-						currentTsDiff = moment().diff(msgTs, 'minutes');
+						currentTsDiff = dayjs().diff(msgTs, 'minutes');
 					}
 					return currentTsDiff < blockEditInMinutes;
 				}
@@ -185,11 +185,11 @@ const MessageActions = React.memo(
 				if (blockDeleteInMinutes != null && blockDeleteInMinutes !== 0) {
 					let msgTs;
 					if (message.ts != null) {
-						msgTs = moment(message.ts);
+						msgTs = dayjs(message.ts);
 					}
 					let currentTsDiff = 0;
 					if (msgTs != null) {
-						currentTsDiff = moment().diff(msgTs, 'minutes');
+						currentTsDiff = dayjs().diff(msgTs, 'minutes');
 					}
 					return currentTsDiff < blockDeleteInMinutes;
 				}
diff --git a/app/containers/MessageComposer/components/Quotes/Quote.tsx b/app/containers/MessageComposer/components/Quotes/Quote.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-import moment from 'moment';
 
+import dayjs from '../../../../lib/dayjs';
 import { useTheme } from '../../../../theme';
 import sharedStyles from '../../../../views/Styles';
 import { useRoomContext } from '../../../../views/RoomView/context';
@@ -25,7 +25,7 @@ export const Quote = ({ messageId }: { messageId: string }) => {
 	if (message) {
 		username = useRealName ? message.u?.name || message.u?.username || '' : message.u?.username || '';
 		msg = message.msg || '';
-		time = message.ts ? moment(message.ts).format('LT') : '';
+		time = message.ts ? dayjs(message.ts).format('LT') : '';
 	}
 
 	if (!message) {
diff --git a/app/containers/MessageSeparator.tsx b/app/containers/MessageSeparator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import moment from 'moment';
 
+import dayjs from '../lib/dayjs';
 import I18n from '../i18n';
 import sharedStyles from '../views/Styles';
 import { themes } from '../lib/constants/colors';
@@ -36,7 +36,7 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?:
 		return null;
 	}
 
-	const date = ts ? moment(ts).format('LL') : null;
+	const date = ts ? dayjs(ts).format('LL') : null;
 	const unreadLine = { backgroundColor: themes[theme].buttonBackgroundDangerDefault };
 	const unreadText = { color: themes[theme].fontDanger };
 	if (ts && unread) {
diff --git a/app/containers/Passcode/utils.ts b/app/containers/Passcode/utils.ts
@@ -1,12 +1,12 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import moment from 'moment';
 
+import dayjs from '../../lib/dayjs';
 import { LOCKED_OUT_TIMER_KEY, TIME_TO_LOCK } from '../../lib/constants/localAuthentication';
 
 export const getLockedUntil = async () => {
 	const t = await AsyncStorage.getItem(LOCKED_OUT_TIMER_KEY);
 	if (t) {
-		return moment(t).add(TIME_TO_LOCK).toDate();
+		return dayjs(t).add(TIME_TO_LOCK, 'millisecond').toDate();
 	}
 	return null;
 };
diff --git a/app/containers/SupportedVersions/useSupportedVersionMessage.ts b/app/containers/SupportedVersions/useSupportedVersionMessage.ts
@@ -1,5 +1,4 @@
-import moment from 'moment';
-
+import dayjs from '../../lib/dayjs';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 
 const applyParams = (message: string, params: Record<string, unknown>) => {
@@ -25,7 +24,7 @@ export const useSupportedVersionMessage = () => {
 		instance_email: email,
 		instance_ws_name: name,
 		instance_domain: server,
-		remaining_days: moment(expiration).diff(new Date(), 'days'),
+		remaining_days: dayjs(expiration).diff(new Date(), 'days'),
 		instance_version: version,
 		...message?.params
 	};
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
@@ -3,8 +3,8 @@ import { StyleSheet, Text, unstable_batchedUpdates, View } from 'react-native';
 import DateTimePicker, { type BaseProps } from '@react-native-community/datetimepicker';
 import Touchable from 'react-native-platform-touchable';
 import { BlockContext } from '@rocket.chat/ui-kit';
-import moment from 'moment';
 
+import dayjs from '../../lib/dayjs';
 import Button from '../Button';
 import { textParser } from './utils';
 import { themes } from '../../lib/constants/colors';
@@ -54,7 +54,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 					onShow(false);
 				}
 			});
-			action({ value: moment(newDate).format('YYYY-MM-DD') });
+			action({ value: dayjs(newDate).format('YYYY-MM-DD') });
 		}
 	};
 
diff --git a/app/containers/message/Components/Attachments/Reply.tsx b/app/containers/message/Components/Attachments/Reply.tsx
@@ -1,5 +1,4 @@
 import { dequal } from 'dequal';
-import moment from 'moment';
 import React, { useContext, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Image } from 'expo-image';
@@ -17,6 +16,7 @@ import { Attachments } from './components';
 import MessageContext from '../../Context';
 import Touchable from '../../Touchable';
 import messageStyles from '../../styles';
+import dayjs from '../../../../lib/dayjs';
 
 const styles = StyleSheet.create({
 	button: {
@@ -103,7 +103,7 @@ const Title = React.memo(
 	({ attachment, timeFormat, theme }: { attachment: IAttachment; timeFormat?: string; theme: TSupportedThemes }) => {
 		'use memo';
 
-		const time = attachment.message_link && attachment.ts ? moment(attachment.ts).format(timeFormat) : null;
+		const time = attachment.message_link && attachment.ts ? dayjs(attachment.ts).format(timeFormat) : null;
 		return (
 			<View style={styles.authorContainer}>
 				{attachment.author_name ? (
diff --git a/app/containers/message/Time.tsx b/app/containers/message/Time.tsx
@@ -1,7 +1,7 @@
-import moment from 'moment';
 import React from 'react';
 import { Text } from 'react-native';
 
+import dayjs from '../../lib/dayjs';
 import { useTheme } from '../../theme';
 import messageStyles from './styles';
 
@@ -15,7 +15,7 @@ const MessageTime = ({ timeFormat, ts }: IMessageTime) => {
 
 	const { colors } = useTheme();
 
-	const time = moment(ts).format(timeFormat);
+	const time = dayjs(ts).format(timeFormat);
 
 	return <Text style={[messageStyles.time, { color: colors.fontSecondaryInfo }]}>{time}</Text>;
 };
diff --git a/app/i18n/dayjs.ts b/app/i18n/dayjs.ts
@@ -15,7 +15,8 @@ const localeKeys: { [key: string]: string } = {
 	sv: 'sv',
 	tr: 'tr',
 	'zh-CN': 'zh-cn',
-	'zh-TW': 'zh-tw'
+	'zh-TW': 'zh-tw',
+	no: 'nb'
 };
 
-export const toMomentLocale = (locale: string): string => localeKeys[locale];
+export const toDayJsLocale = (locale: string): string => localeKeys[locale] || locale;
diff --git a/app/i18n/index.ts b/app/i18n/index.ts
@@ -1,10 +1,9 @@
 import i18n from 'i18n-js';
 import { I18nManager } from 'react-native';
 import * as RNLocalize from 'react-native-localize';
-import moment from 'moment';
-import 'moment/min/locales';
 
-import { toMomentLocale } from './moment';
+import dayjs from '../lib/dayjs/index';
+import { toDayJsLocale } from './dayjs';
 import { isRTL } from './isRTL';
 import englishJson from './locales/en.json';
 
@@ -177,7 +176,7 @@ export const setLanguage = (l: string) => {
 	// TODO: Review this logic
 	// @ts-ignore
 	i18n.isRTL = I18nManager.isRTL;
-	moment.locale(toMomentLocale(locale));
+	dayjs.locale(toDayJsLocale(locale));
 };
 
 i18n.translations = { en: translations.en?.() };
diff --git a/app/lib/dayjs/index.ts b/app/lib/dayjs/index.ts
@@ -0,0 +1,40 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import calendar from 'dayjs/plugin/calendar';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+
+import 'dayjs/locale/en';
+import 'dayjs/locale/ar';
+import 'dayjs/locale/bn';
+import 'dayjs/locale/cs';
+import 'dayjs/locale/de';
+import 'dayjs/locale/es';
+import 'dayjs/locale/fi';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/hi';
+import 'dayjs/locale/hu';
+import 'dayjs/locale/it';
+import 'dayjs/locale/ja';
+import 'dayjs/locale/nl';
+import 'dayjs/locale/nb';
+import 'dayjs/locale/nn';
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/pt';
+import 'dayjs/locale/ru';
+import 'dayjs/locale/sl';
+import 'dayjs/locale/sv';
+import 'dayjs/locale/ta';
+import 'dayjs/locale/te';
+import 'dayjs/locale/tr';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/zh-tw';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(calendar);
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+
+export default dayjs;
diff --git a/app/lib/methods/AudioManager.ts b/app/lib/methods/AudioManager.ts
@@ -1,7 +1,7 @@
 import { type AVPlaybackStatus, Audio } from 'expo-av';
 import { Q } from '@nozbe/watermelondb';
-import moment from 'moment';
 
+import dayjs from '../dayjs';
 import { getMessageById } from '../database/services/Message';
 import database from '../database';
 import { getFilePathAudio } from './getFilePathAudio';
@@ -120,7 +120,7 @@ class AudioManagerClass {
 		const msg = await getMessageById(msgId);
 		if (msg) {
 			const db = database.active;
-			const whereClause: Q.Clause[] = [Q.sortBy('ts', Q.asc), Q.where('ts', Q.gt(moment(msg.ts).valueOf())), Q.take(1)];
+			const whereClause: Q.Clause[] = [Q.sortBy('ts', Q.asc), Q.where('ts', Q.gt(dayjs(msg.ts).valueOf())), Q.take(1)];
 
 			if (msg.tmid) {
 				whereClause.push(Q.where('tmid', msg.tmid || msg.id));
diff --git a/app/lib/methods/checkSupportedVersions.ts b/app/lib/methods/checkSupportedVersions.ts
@@ -1,7 +1,7 @@
-import moment from 'moment';
 import coerce from 'semver/functions/coerce';
 import satisfies from 'semver/functions/satisfies';
 
+import dayjs from '../dayjs';
 import { type ISupportedVersionsData, type TSVDictionary, type TSVMessage, type TSVStatus } from '../../definitions';
 import builtInSupportedVersions from '../../../app-supportedversions.json';
 
@@ -12,11 +12,11 @@ export const getMessage = ({
 	messages?: TSVMessage[];
 	expiration?: string;
 }): TSVMessage | undefined => {
-	if (!messages?.length || !expiration || moment(expiration).diff(new Date(), 'days') < 0) {
+	if (!messages?.length || !expiration || dayjs(expiration).diff(new Date(), 'days') < 0) {
 		return;
 	}
 	const sortedMessages = messages.sort((a, b) => a.remainingDays - b.remainingDays);
-	return sortedMessages.find(({ remainingDays }) => moment(expiration).diff(new Date(), 'hours') <= remainingDays * 24);
+	return sortedMessages.find(({ remainingDays }) => dayjs(expiration).diff(new Date(), 'hours') <= remainingDays * 24);
 };
 
 const getStatus = ({ expiration, message }: { expiration?: string; message?: TSVMessage }): TSVStatus => {
diff --git a/app/lib/methods/getServerInfo.ts b/app/lib/methods/getServerInfo.ts
@@ -1,6 +1,6 @@
 import { KJUR } from 'jsrsasign';
-import moment from 'moment';
 
+import dayjs from '../dayjs';
 import { getSupportedVersionsCloud } from '../services/restApi';
 import {
 	type TCloudInfo,
@@ -81,7 +81,7 @@ export async function getServerInfo(server: string): Promise<TServerInfoResult>
 				const serverRecord = await getServerById(server);
 				if (
 					serverRecord?.supportedVersionsUpdatedAt &&
-					moment(new Date()).diff(serverRecord?.supportedVersionsUpdatedAt, 'hours') <= SV_CLOUD_UPDATE_INTERVAL
+					dayjs(new Date()).diff(serverRecord?.supportedVersionsUpdatedAt, 'hours') <= SV_CLOUD_UPDATE_INTERVAL
 				) {
 					return {
 						...serverInfo,
diff --git a/app/lib/methods/helpers/localAuthentication.ts b/app/lib/methods/helpers/localAuthentication.ts
@@ -2,8 +2,8 @@ import * as LocalAuthentication from 'expo-local-authentication';
 import RNBootSplash from 'react-native-bootsplash';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { sha256 } from 'js-sha256';
-import moment from 'moment';
 
+import dayjs from '../../dayjs';
 import UserPreferences from '../userPreferences';
 import { store } from '../../store/auxStore';
 import database from '../../database';
@@ -146,7 +146,7 @@ export const localAuthenticate = async (server: string): Promise<void> => {
 		// `checkHasPasscode` results newPasscode = true if a passcode has been set
 		if (!result?.newPasscode) {
 			// diff to last authenticated session
-			const diffToLastSession = moment(timesync).diff(serverRecord?.lastLocalAuthenticatedSession, 'seconds');
+			const diffToLastSession = dayjs(timesync).diff(serverRecord?.lastLocalAuthenticatedSession, 'seconds');
 
 			// if it was not possible to get `timesync` from server or the last authenticated session is older than the configured auto lock time, authentication is required
 			if (!timesync || (serverRecord?.autoLockTime && diffToLastSession >= serverRecord.autoLockTime)) {
diff --git a/app/lib/methods/helpers/normalizeMessage.ts b/app/lib/methods/helpers/normalizeMessage.ts
@@ -1,5 +1,4 @@
-import moment from 'moment';
-
+import dayjs from '../../dayjs';
 import parseUrls from './parseUrls';
 import type { IAttachment, IMessage, IThreadResult } from '../../../definitions';
 
@@ -15,7 +14,7 @@ function normalizeAttachments(msg: TMsg) {
 		.map(att => {
 			att.fields = att.fields || [];
 			if (att.ts) {
-				att.ts = moment(att.ts).toDate();
+				att.ts = dayjs(att.ts).toDate();
 			}
 			att = normalizeAttachments(att as TMsg);
 			return att;
diff --git a/app/lib/methods/helpers/room.ts b/app/lib/methods/helpers/room.ts
@@ -1,5 +1,4 @@
-import moment from 'moment';
-
+import dayjs from '../../dayjs';
 import { themes } from '../../constants/colors';
 import I18n from '../../../i18n';
 import { type IAttachment, SubscriptionType, type TSubscriptionModel } from '../../../definitions';
@@ -23,23 +22,23 @@ export const capitalize = (s: string): string => {
 };
 
 export const formatDateAccessibility = (date: string | Date): string =>
-	moment(date).calendar(null, {
+	dayjs(date).calendar(null, {
 		lastDay: `[${I18n.t('Last_updated')}] [${I18n.t('Yesterday')}]`,
 		sameDay: `[${I18n.t('Last_updated_at')}] LT`,
 		lastWeek: `[${I18n.t('Last_updated_on')}] dddd`,
 		sameElse: `[${I18n.t('Last_updated_on')}] MMMM, Do YYYY`
 	});
 
 export const formatDate = (date: string | Date): string =>
-	moment(date).calendar(null, {
+	dayjs(date).calendar(null, {
 		lastDay: `[${I18n.t('Yesterday')}]`,
 		sameDay: 'LT',
 		lastWeek: 'dddd',
 		sameElse: 'L'
 	});
 
 export const formatDateThreads = (date: string | Date): string =>
-	moment(date).calendar(null, {
+	dayjs(date).calendar(null, {
 		sameDay: 'LT',
 		lastDay: `[${I18n.t('Yesterday')}] LT`,
 		lastWeek: 'dddd LT',
diff --git a/app/lib/methods/loadMessagesForRoom.ts b/app/lib/methods/loadMessagesForRoom.ts
@@ -1,5 +1,4 @@
-import moment from 'moment';
-
+import dayjs from '../dayjs';
 import { MessageTypeLoad } from '../constants/messageTypeLoad';
 import { type IMessage, type TMessageModel } from '../../definitions';
 import log from './helpers/log';
@@ -82,7 +81,7 @@ export function loadMessagesForRoom(args: {
 					const loadMoreMessage = {
 						_id: generateLoadMoreId(lastMessage._id as string),
 						rid: lastMessage.rid,
-						ts: moment(lastMessage.ts).subtract(1, 'millisecond').toString(),
+						ts: dayjs(lastMessage.ts).subtract(1, 'millisecond').toString(),
 						t: MessageTypeLoad.MORE,
 						msg: lastMessage.msg
 					} as IMessage;
diff --git a/app/lib/methods/loadNextMessages.ts b/app/lib/methods/loadNextMessages.ts
@@ -1,7 +1,7 @@
 import EJSON from 'ejson';
-import moment from 'moment';
 import orderBy from 'lodash/orderBy';
 
+import dayjs from '../dayjs';
 import log from './helpers/log';
 import { getMessageById } from '../database/services/Message';
 import { MessageTypeLoad } from '../constants/messageTypeLoad';
@@ -31,7 +31,7 @@ export function loadNextMessages(args: ILoadNextMessages): Promise<void> {
 					const loadMoreItem = {
 						_id: generateLoadMoreId(lastMessage._id),
 						rid: lastMessage.rid,
-						ts: moment(lastMessage.ts).add(1, 'millisecond'),
+						ts: dayjs(lastMessage.ts).add(1, 'millisecond'),
 						t: MessageTypeLoad.NEXT_CHUNK
 					};
 					messages.push(loadMoreItem);
diff --git a/app/lib/methods/loadSurroundingMessages.ts b/app/lib/methods/loadSurroundingMessages.ts
diff --git a/app/sagas/login.js b/app/sagas/login.js
diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx
diff --git a/app/views/InviteUsersView/index.tsx b/app/views/InviteUsersView/index.tsx
diff --git a/app/views/ReadReceiptView/index.tsx b/app/views/ReadReceiptView/index.tsx
diff --git a/app/views/RoomInfoView/Timezone.tsx b/app/views/RoomInfoView/Timezone.tsx
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock
