refactor(i18n): Increase the adoption of react-i18next - Phase 1 (#…

…33175)
RocketChat · Sep 13, 2024 · 98b6a20 · 98b6a20
1 parent 811e2cb
commit 98b6a20
Show file tree

Hide file tree

Showing 425 changed files with 1,208 additions and 1,238 deletions.
diff --git a/.yarn/patches/react-i18next-npm-15.0.1-0812bb73aa.patch b/.yarn/patches/react-i18next-npm-15.0.1-0812bb73aa.patch
diff --git a/apps/meteor/app/2fa/server/code/EmailCheck.ts b/apps/meteor/app/2fa/server/code/EmailCheck.ts
@@ -38,7 +38,7 @@ export class EmailCheck implements ICodeCheck {
 	private async send2FAEmail(address: string, random: string, user: IUser): Promise<void> {
 		const language = user.language || settings.get('Language') || 'en';
 
-		const t = (s: string): string => i18n.t(s, { lng: language });
+		const t = i18n.getFixedT(language);
 
 		await Mailer.send({
 			to: address,

diff --git a/apps/meteor/app/2fa/server/functions/resetTOTP.ts b/apps/meteor/app/2fa/server/functions/resetTOTP.ts
@@ -22,7 +22,7 @@ const sendResetNotification = async function (uid: string): Promise<void> {
 		return;
 	}
 
-	const t = (s: string): string => i18n.t(s, { lng: language });
+	const t = i18n.getFixedT(language);
 	const text = `
 	${t('Your_TOTP_has_been_reset')}
 

diff --git a/apps/meteor/app/lib/server/methods/addUsersToRoom.ts b/apps/meteor/app/lib/server/methods/addUsersToRoom.ts
@@ -98,14 +98,11 @@ export const addUsersToRoomMethod = async (userId: string, data: { rid: string;
 					return;
 				}
 				void api.broadcast('notify.ephemeralMessage', userId, data.rid, {
-					msg: i18n.t(
-						'Username_is_already_in_here',
-						{
-							postProcess: 'sprintf',
-							sprintf: [newUser.username],
-						},
-						user?.language,
-					),
+					msg: i18n.t('Username_is_already_in_here', {
+						postProcess: 'sprintf',
+						sprintf: [newUser.username],
+						lng: user?.language,
+					}),
 				});
 			}
 		}),

diff --git a/apps/meteor/app/lib/server/methods/sendMessage.ts b/apps/meteor/app/lib/server/methods/sendMessage.ts
@@ -2,6 +2,7 @@ import { api } from '@rocket.chat/core-services';
 import type { AtLeast, IMessage, IUser } from '@rocket.chat/core-typings';
 import type { ServerMethods } from '@rocket.chat/ddp-client';
 import { Messages, Users } from '@rocket.chat/models';
+import type { TOptions } from 'i18next';
 import { check } from 'meteor/check';
 import { Meteor } from 'meteor/meteor';
 import moment from 'moment';
@@ -98,9 +99,9 @@ export async function executeSendMessage(uid: IUser['_id'], message: AtLeast<IMe
 		SystemLogger.error({ msg: 'Error sending message:', err });
 
 		const errorMessage = typeof err === 'string' ? err : err.error || err.message;
-		const errorContext = err.details ?? {};
+		const errorContext: TOptions = err.details ?? {};
 		void api.broadcast('notify.ephemeralMessage', uid, message.rid, {
-			msg: i18n.t(errorMessage, errorContext, user.language),
+			msg: i18n.t(errorMessage, { ...errorContext, lng: user.language }),
 		});
 
 		if (typeof err === 'string') {

diff --git a/apps/meteor/app/lib/server/startup/mentionUserNotInChannel.ts b/apps/meteor/app/lib/server/startup/mentionUserNotInChannel.ts
@@ -24,7 +24,7 @@ const getBlocks = (mentions: IMessage['mentions'], messageId: string, lng: strin
 			actionId: 'add-users',
 			text: {
 				type: 'plain_text',
-				text: i18n.t('Add_them', undefined, lng),
+				text: i18n.t('Add_them', { lng }),
 			},
 		},
 		dismissBlock: {
@@ -35,7 +35,7 @@ const getBlocks = (mentions: IMessage['mentions'], messageId: string, lng: strin
 			actionId: 'dismiss',
 			text: {
 				type: 'plain_text',
-				text: i18n.t('Do_nothing', undefined, lng),
+				text: i18n.t('Do_nothing', { lng }),
 			},
 		},
 		dmBlock: {
@@ -46,7 +46,7 @@ const getBlocks = (mentions: IMessage['mentions'], messageId: string, lng: strin
 			actionId: 'share-message',
 			text: {
 				type: 'plain_text',
-				text: i18n.t('Let_them_know', undefined, lng),
+				text: i18n.t('Let_them_know', { lng }),
 			},
 		},
 	} as const;
@@ -121,7 +121,7 @@ callbacks.add(
 					type: 'section',
 					text: {
 						type: 'mrkdwn',
-						text: i18n.t(messageLabel, { mentions: mentionsText }, language),
+						text: i18n.t(messageLabel, { mentions: mentionsText, lng: language }),
 					},
 				} as const,
 				Boolean(elements.length) &&

diff --git a/apps/meteor/app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal.tsx b/apps/meteor/app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal.tsx
@@ -1,6 +1,6 @@
 import { Button, Modal } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type PlaceChatOnHoldModalProps = {
 	onOnHoldChat: () => void;
@@ -9,7 +9,7 @@ type PlaceChatOnHoldModalProps = {
 };
 
 const PlaceChatOnHoldModal = ({ onCancel, onOnHoldChat, confirm = onOnHoldChat, ...props }: PlaceChatOnHoldModalProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	return (
 		<Modal {...props} data-qa-id='on-hold-modal'>

diff --git a/apps/meteor/app/livechat/server/api/v1/room.ts b/apps/meteor/app/livechat/server/api/v1/room.ts
@@ -159,7 +159,7 @@ API.v1.addRoute(
 					const visitorEmail = visitor.visitorEmails?.[0]?.address;
 
 					const language = servingAgent.language || rcSettings.get<string>('Language') || 'en';
-					const t = (s: string): string => i18n.t(s, { lng: language });
+					const t = i18n.getFixedT(language);
 					const subject = t('Transcript_of_your_livechat_conversation');
 
 					options.emailTranscript = {

diff --git a/apps/meteor/app/livechat/server/lib/Helper.ts b/apps/meteor/app/livechat/server/lib/Helper.ts
@@ -439,8 +439,8 @@ export const dispatchInquiryQueued = async (inquiry: ILivechatInquiryRecord, age
 			hasMentionToHere: false,
 			message: { _id: '', u: v, msg: '' },
 			// we should use server's language for this type of messages instead of user's
-			notificationMessage: i18n.t('User_started_a_new_conversation', { username: notificationUserName }, language),
-			room: Object.assign(room, { name: i18n.t('New_chat_in_queue', {}, language) }),
+			notificationMessage: i18n.t('User_started_a_new_conversation', { username: notificationUserName, lng: language }),
+			room: Object.assign(room, { name: i18n.t('New_chat_in_queue', { lng: language }) }),
 			mentionIds: [],
 		});
 	}

diff --git a/apps/meteor/app/livechat/server/lib/QueueManager.ts b/apps/meteor/app/livechat/server/lib/QueueManager.ts
@@ -371,8 +371,8 @@ export class QueueManager {
 				hasMentionToHere: false,
 				message: { _id: '', u: v, msg: '' },
 				// we should use server's language for this type of messages instead of user's
-				notificationMessage: i18n.t('User_started_a_new_conversation', { username: notificationUserName }, language),
-				room: { ...room, name: i18n.t('New_chat_in_queue', {}, language) },
+				notificationMessage: i18n.t('User_started_a_new_conversation', { username: notificationUserName, lng: language }),
+				room: { ...room, name: i18n.t('New_chat_in_queue', { lng: language }) },
 				mentionIds: [],
 			});
 		}

diff --git a/apps/meteor/app/ui-message/client/messageBox/AddLinkComposerActionModal.tsx b/apps/meteor/app/ui-message/client/messageBox/AddLinkComposerActionModal.tsx
@@ -1,8 +1,8 @@
 import { Field, FieldGroup, TextInput, FieldLabel, FieldRow, Box } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useEffect } from 'react';
 import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import GenericModal from '../../../../client/components/GenericModal';
 
@@ -13,7 +13,7 @@ type AddLinkComposerActionModalProps = {
 };
 
 const AddLinkComposerActionModal = ({ selectedText, onClose, onConfirm }: AddLinkComposerActionModalProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const textField = useUniqueId();
 	const urlField = useUniqueId();
 

diff --git a/apps/meteor/app/utils/lib/i18n.ts b/apps/meteor/app/utils/lib/i18n.ts
@@ -1,4 +1,5 @@
 import type { RocketchatI18nKeys } from '@rocket.chat/i18n';
+import type { TOptions } from 'i18next';
 import i18next from 'i18next';
 import sprintf from 'i18next-sprintf-postprocessor';
 
@@ -13,7 +14,7 @@ export const addSprinfToI18n = function (t: (typeof i18n)['t']) {
 		}
 
 		if (isObject(replaces[0]) && !Array.isArray(replaces[0])) {
-			return t(key, replaces[0]);
+			return t(key, replaces[0] as TOptions);
 		}
 
 		return t(key, {

diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx b/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx
@@ -1,15 +1,15 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useVoipOutboundStates } from '../../contexts/CallContext';
 import { useDialModal } from '../../hooks/useDialModal';
 
 type NavBarItemOmniChannelCallDialPadProps = ComponentPropsWithoutRef<typeof NavBarItem>;
 
 const NavBarItemOmniChannelCallDialPad = (props: NavBarItemOmniChannelCallDialPadProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	const { openDialModal } = useDialModal();
 

diff --git a/.../meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx b/.../meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx
@@ -1,12 +1,12 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type NavBarItemOmnichannelCallToggleErrorProps = ComponentPropsWithoutRef<typeof NavBarItem>;
 
 const NavBarItemOmnichannelCallToggleError = (props: NavBarItemOmnichannelCallToggleErrorProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	return <NavBarItem icon='phone' danger data-tooltip={t('Error')} disabled {...props} />;
 };
 

diff --git a/...eteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx b/...eteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx
@@ -1,12 +1,12 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type NavBarItemOmnichannelCallToggleLoadingProps = ComponentPropsWithoutRef<typeof NavBarItem>;
 
 const NavBarItemOmnichannelCallToggleLoading = (props: NavBarItemOmnichannelCallToggleLoadingProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	return <NavBarItem icon='phone' data-tooltip={t('Loading')} aria-label={t('VoIP_Toggle')} disabled {...props} />;
 };
 

diff --git a/.../meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx b/.../meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx
@@ -1,14 +1,14 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef } from 'react';
 import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useCallerInfo, useCallRegisterClient, useCallUnregisterClient, useVoipNetworkStatus } from '../../contexts/CallContext';
 
 type NavBarItemOmnichannelCallToggleReadyProps = ComponentPropsWithoutRef<typeof NavBarItem>;
 
 const NavBarItemOmnichannelCallToggleReady = (props: NavBarItemOmnichannelCallToggleReadyProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	const caller = useCallerInfo();
 	const unregister = useCallUnregisterClient();

diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenu.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenu.tsx
@@ -1,17 +1,17 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { GenericMenu, useHandleMenuAction } from '@rocket.chat/ui-client';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps } from 'react';
 import React, { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import UserMenuButton from './UserMenuButton';
 import { useUserMenu } from './hooks/useUserMenu';
 
 type UserMenuProps = { user: IUser } & Omit<ComponentProps<typeof GenericMenu>, 'sections' | 'items' | 'title'>;
 
 const UserMenu = function UserMenu({ user, ...props }: UserMenuProps) {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [isOpen, setIsOpen] = useState(false);
 
 	const sections = useUserMenu(user);

diff --git a/apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx b/apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx
@@ -1,7 +1,7 @@
 import { Avatar } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import {
 	ContextualbarTitle,
@@ -19,7 +19,7 @@ interface IGameCenterContainerProps {
 }
 
 const GameCenterContainer = ({ handleClose, handleBack, game }: IGameCenterContainerProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	return (
 		<>

diff --git a/apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx b/apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx
@@ -1,8 +1,8 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import GenericModal from '../../components/GenericModal';
 import UserAutoCompleteMultipleFederated from '../../components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated';
@@ -19,7 +19,7 @@ interface IGameCenterInvitePlayersModalProps {
 }
 
 const GameCenterInvitePlayersModal = ({ game, onClose }: IGameCenterInvitePlayersModalProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [users, setUsers] = useState<Array<Username>>([]);
 	const { name } = game;
 

diff --git a/apps/meteor/client/components/ActionManagerBusyState.tsx b/apps/meteor/client/components/ActionManagerBusyState.tsx
@@ -1,12 +1,12 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useUiKitActionManager } from '../uikit/hooks/useUiKitActionManager';
 
 const ActionManagerBusyState = () => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const actionManager = useUiKitActionManager();
 	const [busy, setBusy] = useState(false);
 

diff --git a/apps/meteor/client/components/AutoCompleteDepartment.tsx b/apps/meteor/client/components/AutoCompleteDepartment.tsx
@@ -1,8 +1,8 @@
 import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../hooks/useAsyncState';
@@ -28,7 +28,7 @@ const AutoCompleteDepartment = ({
 	showArchived = false,
 	...props
 }: AutoCompleteDepartmentProps): ReactElement | null => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [departmentsFilter, setDepartmentsFilter] = useState<string>('');
 
 	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);

diff --git a/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx b/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx
@@ -1,9 +1,9 @@
 import { CheckOption, PaginatedMultiSelectFiltered } from '@rocket.chat/fuselage';
 import type { PaginatedMultiSelectOption } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps } from 'react';
 import React, { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../hooks/useAsyncState';
@@ -24,7 +24,7 @@ const AutoCompleteDepartmentMultiple = ({
 	enabled = false,
 	onChange = () => undefined,
 }: AutoCompleteDepartmentMultipleProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [departmentsFilter, setDepartmentsFilter] = useState('');
 
 	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);

diff --git a/apps/meteor/client/components/ConfirmOwnerChangeModal.tsx b/apps/meteor/client/components/ConfirmOwnerChangeModal.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import GenericModal from './GenericModal';
 import RawText from './RawText';
@@ -20,7 +20,7 @@ const ConfirmOwnerChangeModal = ({
 	onConfirm,
 	onCancel,
 }: ConfirmOwnerChangeModalProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	let changeOwnerRooms = '';
 	if (shouldChangeOwner.length > 0) {

diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarBack.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarBack.tsx
@@ -1,13 +1,13 @@
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ComponentProps } from 'react';
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import ContextualbarAction from './ContextualbarAction';
 
 type ContextualbarBackProps = Partial<ComponentProps<typeof ContextualbarAction>>;
 
 const ContextualbarBack = (props: ContextualbarBackProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	return <ContextualbarAction {...props} title={t('Back')} name='arrow-back' />;
 };