diff --git a/apps/meteor/app/lib/server/methods/addUsersToRoom.ts b/apps/meteor/app/lib/server/methods/addUsersToRoom.ts index 73fbf6e51a04b..119071e8ece0b 100644 --- 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 index 56009f15fedee..c75f6dbf72e26 100644 --- a/apps/meteor/app/lib/server/methods/sendMessage.ts +++ b/apps/meteor/app/lib/server/methods/sendMessage.ts @@ -1,7 +1,9 @@ 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 type { RocketchatI18nKeys } from '@rocket.chat/i18n'; 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'; @@ -97,10 +99,10 @@ export async function executeSendMessage(uid: IUser['_id'], message: AtLeast void; @@ -9,7 +9,7 @@ type PlaceChatOnHoldModalProps = { }; const PlaceChatOnHoldModal = ({ onCancel, onOnHoldChat, confirm = onOnHoldChat, ...props }: PlaceChatOnHoldModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/app/livechat/server/lib/Helper.ts b/apps/meteor/app/livechat/server/lib/Helper.ts index 1416ed8b028f1..a050e06c19433 100644 --- a/apps/meteor/app/livechat/server/lib/Helper.ts +++ b/apps/meteor/app/livechat/server/lib/Helper.ts @@ -440,8 +440,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 index e1ea79d841633..c6728d470870b 100644 --- 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 index 420bf93df66d5..21e502c90001a 100644 --- 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/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx b/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx index af9b907df12e6..2693060578ed2 100644 --- a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx +++ b/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx @@ -1,7 +1,7 @@ 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'; @@ -9,7 +9,7 @@ import { useDialModal } from '../../hooks/useDialModal'; type NavBarItemOmniChannelCallDialPadProps = ComponentPropsWithoutRef; const NavBarItemOmniChannelCallDialPad = (props: NavBarItemOmniChannelCallDialPadProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { openDialModal } = useDialModal(); diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx b/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx index cf4e7ec240b41..7f2b6adc86919 100644 --- a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx +++ b/apps/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; const NavBarItemOmnichannelCallToggleError = (props: NavBarItemOmnichannelCallToggleErrorProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ; }; diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx b/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx index c4b53acefabbc..149500050402b 100644 --- a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx +++ b/apps/meteor/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; const NavBarItemOmnichannelCallToggleLoading = (props: NavBarItemOmnichannelCallToggleLoadingProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ; }; diff --git a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx b/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx index 8b51fc6c5b579..82f1c28350cd7 100644 --- a/apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx +++ b/apps/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; 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 index 22895d55388f2..149ad0ea585ed 100644 --- a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenu.tsx +++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenu.tsx @@ -1,9 +1,9 @@ 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'; @@ -11,7 +11,7 @@ import { useUserMenu } from './hooks/useUserMenu'; type UserMenuProps = { user: IUser } & Omit, '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 index f589dd21ed502..dbaea02ace4a4 100644 --- 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 index d0dcc6fad4fee..871e82f3ff565 100644 --- 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>([]); const { name } = game; diff --git a/apps/meteor/client/components/ActionManagerBusyState.tsx b/apps/meteor/client/components/ActionManagerBusyState.tsx index 1399c045271f7..932eb08ea5025 100644 --- 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 index 7ff38c9c3ca42..67f96f4a414c0 100644 --- 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(''); const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500); diff --git a/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx b/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx index 99af9a1f6a2c2..c15d480f39001 100644 --- 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 index 349341baf0034..77135fad6230f 100644 --- 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 index c8e17ab88d80c..dcac448b1e922 100644 --- 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>; const ContextualbarBack = (props: ContextualbarBackProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ; }; diff --git a/apps/meteor/client/components/Contextualbar/ContextualbarClose.tsx b/apps/meteor/client/components/Contextualbar/ContextualbarClose.tsx index 1670c9be58958..38db516476e3c 100644 --- a/apps/meteor/client/components/Contextualbar/ContextualbarClose.tsx +++ b/apps/meteor/client/components/Contextualbar/ContextualbarClose.tsx @@ -1,13 +1,13 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import ContextualbarAction from './ContextualbarAction'; type ContextualbarCloseProps = Partial>; const ContextualbarClose = (props: ContextualbarCloseProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ; }; diff --git a/apps/meteor/client/components/FilterByText.tsx b/apps/meteor/client/components/FilterByText.tsx index 5c5a3d599e2f9..25d8e225e3d82 100644 --- a/apps/meteor/client/components/FilterByText.tsx +++ b/apps/meteor/client/components/FilterByText.tsx @@ -1,8 +1,8 @@ import { Box, Icon, TextInput, Margins } from '@rocket.chat/fuselage'; import { useAutoFocus, useMergedRefs } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ChangeEvent, FormEvent, HTMLAttributes } from 'react'; import React, { forwardRef, memo, useCallback, useState } from 'react'; +import { useTranslation } from 'react-i18next'; type FilterByTextProps = { onChange: (filter: string) => void; @@ -13,7 +13,7 @@ const FilterByText = forwardRef(function Fi { placeholder, onChange: setFilter, shouldAutoFocus = false, children, ...props }, ref, ) { - const t = useTranslation(); + const { t } = useTranslation(); const [text, setText] = useState(''); const autoFocusRef = useAutoFocus(shouldAutoFocus); const mergedRefs = useMergedRefs(ref, autoFocusRef); diff --git a/apps/meteor/client/components/FingerprintChangeModal.tsx b/apps/meteor/client/components/FingerprintChangeModal.tsx index db4c33654a926..a45a17db8ccc3 100644 --- a/apps/meteor/client/components/FingerprintChangeModal.tsx +++ b/apps/meteor/client/components/FingerprintChangeModal.tsx @@ -1,7 +1,7 @@ import { Box } 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 GenericModal from './GenericModal'; @@ -12,7 +12,7 @@ type FingerprintChangeModalProps = { }; const FingerprintChangeModal = ({ onConfirm, onCancel, onClose }: FingerprintChangeModalProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/GenericModal/GenericModal.tsx b/apps/meteor/client/components/GenericModal/GenericModal.tsx index 5d025e05827dc..d91e3c0660070 100644 --- a/apps/meteor/client/components/GenericModal/GenericModal.tsx +++ b/apps/meteor/client/components/GenericModal/GenericModal.tsx @@ -1,9 +1,9 @@ import { Button, Modal } from '@rocket.chat/fuselage'; import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks'; import type { Keys as IconName } from '@rocket.chat/icons'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement, ReactNode, ComponentPropsWithoutRef } from 'react'; import React, { useEffect, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import type { RequiredModalProps } from './withDoNotAskAgain'; import { withDoNotAskAgain } from './withDoNotAskAgain'; @@ -75,7 +75,7 @@ const GenericModal = ({ annotation, ...props }: GenericModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const genericModalId = useUniqueId(); const dismissedRef = useRef(true); diff --git a/apps/meteor/client/components/GenericNoResults/GenericNoResults.tsx b/apps/meteor/client/components/GenericNoResults/GenericNoResults.tsx index 3fcfe2b0e0acf..d21023024fb3a 100644 --- a/apps/meteor/client/components/GenericNoResults/GenericNoResults.tsx +++ b/apps/meteor/client/components/GenericNoResults/GenericNoResults.tsx @@ -1,7 +1,7 @@ import { Box, States, StatesIcon, StatesLink, StatesTitle, StatesSubtitle, StatesActions, StatesAction } from '@rocket.chat/fuselage'; import type { Keys as IconName } from '@rocket.chat/icons'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type LinkProps = { linkText: string; linkHref: string } | { linkText?: never; linkHref?: never }; type ButtonProps = { buttonTitle: string; buttonAction: () => void } | { buttonTitle?: never; buttonAction?: never }; @@ -23,7 +23,7 @@ const GenericNoResults = ({ linkHref, linkText, }: GenericNoResultsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/GenericTable/hooks/useItemsPerPageLabel.ts b/apps/meteor/client/components/GenericTable/hooks/useItemsPerPageLabel.ts index 0a8a8deb8262a..4c390041497e0 100644 --- a/apps/meteor/client/components/GenericTable/hooks/useItemsPerPageLabel.ts +++ b/apps/meteor/client/components/GenericTable/hooks/useItemsPerPageLabel.ts @@ -1,7 +1,7 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; export const useItemsPerPageLabel = (): (() => string) => { - const t = useTranslation(); + const { t } = useTranslation(); return useCallback(() => t('Items_per_page:'), [t]); }; diff --git a/apps/meteor/client/components/GenericTable/hooks/useShowingResultsLabel.ts b/apps/meteor/client/components/GenericTable/hooks/useShowingResultsLabel.ts index c610340f28bda..3fc94d7f7de28 100644 --- a/apps/meteor/client/components/GenericTable/hooks/useShowingResultsLabel.ts +++ b/apps/meteor/client/components/GenericTable/hooks/useShowingResultsLabel.ts @@ -1,15 +1,16 @@ import type { Pagination } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; type Props['showingResultsLabel'] = ComponentProps['showingResultsLabel']> = T extends (...args: any[]) => any ? Parameters : never; export const useShowingResultsLabel = (): ((...params: Props) => string) => { - const t = useTranslation(); + const { t } = useTranslation(); return useCallback( - ({ count, current, itemsPerPage }) => t('Showing_results_of', current + 1, Math.min(current + itemsPerPage, count), count), + ({ count, current, itemsPerPage }) => + t('Showing_results_of', { postProcess: 'sprintf', sprintf: [current + 1, Math.min(current + itemsPerPage, count), count] }), [t], ); }; diff --git a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx index 3d68e3f4b6d31..e7ce515ac4963 100644 --- a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx +++ b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx @@ -1,8 +1,8 @@ import { Box, Button, Modal } from '@rocket.chat/fuselage'; import type { Keys as IconName } from '@rocket.chat/icons'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactNode, ReactElement, ComponentProps } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type GenericUpsellModalProps = { children?: ReactNode; @@ -35,7 +35,7 @@ const GenericUpsellModal = ({ annotation, ...props }: GenericUpsellModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/ImageGallery/ImageGallery.tsx b/apps/meteor/client/components/ImageGallery/ImageGallery.tsx index bee91549c6b13..e04bc003cf9b7 100644 --- a/apps/meteor/client/components/ImageGallery/ImageGallery.tsx +++ b/apps/meteor/client/components/ImageGallery/ImageGallery.tsx @@ -1,10 +1,10 @@ import type { IUpload } from '@rocket.chat/core-typings'; import { css } from '@rocket.chat/css-in-js'; import { Box, ButtonGroup, IconButton, Palette, Throbber } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useRef, useState } from 'react'; import { FocusScope } from 'react-aria'; import { createPortal } from 'react-dom'; +import { useTranslation } from 'react-i18next'; import { Keyboard, Navigation, Zoom, A11y } from 'swiper'; import type { SwiperClass, SwiperRef } from 'swiper/react'; import { Swiper, SwiperSlide } from 'swiper/react'; @@ -108,7 +108,7 @@ const swiperStyle = css` `; export const ImageGallery = ({ images, onClose, loadMore }: { images: IUpload[]; onClose: () => void; loadMore?: () => void }) => { - const t = useTranslation(); + const { t } = useTranslation(); const swiperRef = useRef(null); const [, setSwiperInst] = useState(); const [zoomScale, setZoomScale] = useState(1); diff --git a/apps/meteor/client/components/ImageGallery/ImageGalleryError.tsx b/apps/meteor/client/components/ImageGallery/ImageGalleryError.tsx index 97d91de95f62e..8dcc55a93a480 100644 --- a/apps/meteor/client/components/ImageGallery/ImageGalleryError.tsx +++ b/apps/meteor/client/components/ImageGallery/ImageGalleryError.tsx @@ -1,8 +1,8 @@ import { css } from '@rocket.chat/css-in-js'; import { IconButton, ModalBackdrop } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; import { createPortal } from 'react-dom'; +import { useTranslation } from 'react-i18next'; import GenericError from '../GenericError/GenericError'; @@ -14,7 +14,7 @@ const closeButtonStyle = css` `; export const ImageGalleryError = ({ onClose }: { onClose: () => void }) => { - const t = useTranslation(); + const { t } = useTranslation(); return createPortal( diff --git a/apps/meteor/client/components/ImageGallery/ImageGalleryLoading.tsx b/apps/meteor/client/components/ImageGallery/ImageGalleryLoading.tsx index 1c057584bd1f3..588605786664e 100644 --- a/apps/meteor/client/components/ImageGallery/ImageGalleryLoading.tsx +++ b/apps/meteor/client/components/ImageGallery/ImageGalleryLoading.tsx @@ -1,8 +1,8 @@ import { css } from '@rocket.chat/css-in-js'; import { IconButton, ModalBackdrop, Throbber } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; import { createPortal } from 'react-dom'; +import { useTranslation } from 'react-i18next'; const closeButtonStyle = css` position: absolute; @@ -12,7 +12,7 @@ const closeButtonStyle = css` `; export const ImageGalleryLoading = ({ onClose }: { onClose: () => void }) => { - const t = useTranslation(); + const { t } = useTranslation(); return createPortal( diff --git a/apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx b/apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx index cbefeb2c72c1c..6f94be4ebc901 100644 --- a/apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx +++ b/apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx @@ -1,14 +1,14 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Callout } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { usePruneWarningMessage } from '../../hooks/usePruneWarningMessage'; import { withErrorBoundary } from '../withErrorBoundary'; const RetentionPolicyCallout = ({ room }: { room: IRoom }) => { const message = usePruneWarningMessage(room); - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/LocalTime.tsx b/apps/meteor/client/components/LocalTime.tsx index 100ba2ec6a62a..498b2da9711e6 100644 --- a/apps/meteor/client/components/LocalTime.tsx +++ b/apps/meteor/client/components/LocalTime.tsx @@ -1,6 +1,6 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useUTCClock } from '../hooks/useUTCClock'; @@ -10,7 +10,7 @@ type LocalTimeProps = { const LocalTime = ({ utcOffset }: LocalTimeProps): ReactElement => { const time = useUTCClock(utcOffset); - const t = useTranslation(); + const { t } = useTranslation(); return <>{t('Local_Time_time', { time })}; }; diff --git a/apps/meteor/client/components/MarkdownText.tsx b/apps/meteor/client/components/MarkdownText.tsx index 16bd1b71430a8..a116ad83ddd9f 100644 --- a/apps/meteor/client/components/MarkdownText.tsx +++ b/apps/meteor/client/components/MarkdownText.tsx @@ -1,10 +1,10 @@ import { Box } from '@rocket.chat/fuselage'; import { isExternal, getBaseURI } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import dompurify from 'dompurify'; import { marked } from 'marked'; import type { ComponentProps } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { renderMessageEmoji } from '../lib/utils/renderMessageEmoji'; @@ -95,7 +95,7 @@ const MarkdownText = ({ ...props }: MarkdownTextProps) => { const sanitizer = dompurify.sanitize; - const t = useTranslation(); + const { t } = useTranslation(); let markedOptions: marked.MarkedOptions; const schemes = 'http,https,notes,ftp,ftps,tel,mailto,sms,cid'; diff --git a/apps/meteor/client/components/Omnichannel/modals/ReturnChatQueueModal.tsx b/apps/meteor/client/components/Omnichannel/modals/ReturnChatQueueModal.tsx index 04fcb29eed01d..b19ccfee1769c 100644 --- a/apps/meteor/client/components/Omnichannel/modals/ReturnChatQueueModal.tsx +++ b/apps/meteor/client/components/Omnichannel/modals/ReturnChatQueueModal.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 ReturnChatQueueModalProps = { onMoveChat: () => void; @@ -8,7 +8,7 @@ type ReturnChatQueueModalProps = { }; const ReturnChatQueueModal = ({ onCancel, onMoveChat, ...props }: ReturnChatQueueModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/Omnichannel/modals/TranscriptModal.tsx b/apps/meteor/client/components/Omnichannel/modals/TranscriptModal.tsx index 67deb558c1edd..de13ee3aa9a4c 100644 --- a/apps/meteor/client/components/Omnichannel/modals/TranscriptModal.tsx +++ b/apps/meteor/client/components/Omnichannel/modals/TranscriptModal.tsx @@ -1,8 +1,8 @@ import type { IOmnichannelRoom } from '@rocket.chat/core-typings'; import { Field, Button, TextInput, Modal, Box, FieldGroup, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useCallback, useEffect } from 'react'; import { useForm } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; type TranscriptModalProps = { email: string; @@ -14,7 +14,7 @@ type TranscriptModalProps = { }; const TranscriptModal = ({ email: emailDefault = '', room, onRequest, onSend, onCancel, onDiscard, ...props }: TranscriptModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { register, diff --git a/apps/meteor/client/components/Sidebar/Header.tsx b/apps/meteor/client/components/Sidebar/Header.tsx index e4bf5a5e7041f..dcbf7f1cb505f 100644 --- a/apps/meteor/client/components/Sidebar/Header.tsx +++ b/apps/meteor/client/components/Sidebar/Header.tsx @@ -1,7 +1,7 @@ import { Box, IconButton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactNode } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type HeaderProps = { children?: ReactNode; @@ -10,7 +10,7 @@ type HeaderProps = { }; const Header = ({ title, onClose, children, ...props }: HeaderProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/Sidebar/SidebarItemsAssembler.tsx b/apps/meteor/client/components/Sidebar/SidebarItemsAssembler.tsx index 45eb6094572a0..b588e223d922e 100644 --- a/apps/meteor/client/components/Sidebar/SidebarItemsAssembler.tsx +++ b/apps/meteor/client/components/Sidebar/SidebarItemsAssembler.tsx @@ -1,6 +1,6 @@ import { Divider } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { Fragment, memo } from 'react'; +import { useTranslation } from 'react-i18next'; import type { SidebarItem } from '../../lib/createSidebarItems'; import { isSidebarItem } from '../../lib/createSidebarItems'; @@ -12,7 +12,7 @@ type SidebarItemsAssemblerProps = { }; const SidebarItemsAssembler = ({ items, currentPath }: SidebarItemsAssemblerProps) => { - const t = useTranslation(); + const { t, i18n } = useTranslation(); return ( <> @@ -25,7 +25,7 @@ const SidebarItemsAssembler = ({ items, currentPath }: SidebarItemsAssemblerProp icon={props.icon} label={t((props.i18nLabel || props.name) as Parameters[0])} currentPath={currentPath} - tag={props.tag && t.has(props.tag) ? t(props.tag) : props.tag} + tag={props.tag && i18n.exists(props.tag) ? t(props.tag) : props.tag} externalUrl={props.externalUrl} badge={props.badge} /> diff --git a/apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.tsx b/apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.tsx index cd0c25f03d86f..1eefc50baabd9 100644 --- a/apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.tsx +++ b/apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.tsx @@ -1,6 +1,6 @@ import { Box, IconButton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import SidebarTogglerBadge from './SidebarTogglerBadge'; @@ -10,7 +10,7 @@ type SideBarTogglerButtonProps = { }; const SideBarTogglerButton = ({ badge, onClick }: SideBarTogglerButtonProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/TextCopy.tsx b/apps/meteor/client/components/TextCopy.tsx index 467e954ddd657..f9e2ffc622844 100644 --- a/apps/meteor/client/components/TextCopy.tsx +++ b/apps/meteor/client/components/TextCopy.tsx @@ -1,7 +1,7 @@ import { Box, Button, Scrollable } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import useClipboardWithToast from '../hooks/useClipboardWithToast'; @@ -17,7 +17,7 @@ type TextCopyProps = { } & ComponentProps; const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }: TextCopyProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { copy } = useClipboardWithToast(text); diff --git a/apps/meteor/client/components/TwoFactorModal/TwoFactorPasswordModal.tsx b/apps/meteor/client/components/TwoFactorModal/TwoFactorPasswordModal.tsx index 4c91e274de68c..4867d171aee88 100644 --- a/apps/meteor/client/components/TwoFactorModal/TwoFactorPasswordModal.tsx +++ b/apps/meteor/client/components/TwoFactorModal/TwoFactorPasswordModal.tsx @@ -1,8 +1,8 @@ import { Box, PasswordInput, FieldGroup, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage'; import { useAutoFocus, useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, ChangeEvent, Ref, SyntheticEvent } from 'react'; import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../GenericModal'; import type { OnConfirm } from './TwoFactorModal'; @@ -15,7 +15,7 @@ type TwoFactorPasswordModalProps = { }; const TwoFactorPasswordModal = ({ onConfirm, onClose, invalidAttempt }: TwoFactorPasswordModalProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const [code, setCode] = useState(''); const ref = useAutoFocus(); diff --git a/apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx b/apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx index 6f36c9c8ce26c..d6f167be8588d 100644 --- a/apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx +++ b/apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx @@ -1,8 +1,8 @@ import { Box, TextInput, Field, FieldGroup, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage'; import { useAutoFocus, useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, ChangeEvent, SyntheticEvent } from 'react'; import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../GenericModal'; import type { OnConfirm } from './TwoFactorModal'; @@ -15,7 +15,7 @@ type TwoFactorTotpModalProps = { }; const TwoFactorTotpModal = ({ onConfirm, onClose, invalidAttempt }: TwoFactorTotpModalProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const [code, setCode] = useState(''); const ref = useAutoFocus(); diff --git a/apps/meteor/client/components/UrlChangeModal.tsx b/apps/meteor/client/components/UrlChangeModal.tsx index 13d0523c92aac..dbc152c7fbff2 100644 --- a/apps/meteor/client/components/UrlChangeModal.tsx +++ b/apps/meteor/client/components/UrlChangeModal.tsx @@ -1,7 +1,7 @@ import { Box } 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 GenericModal from './GenericModal'; @@ -13,14 +13,17 @@ type UrlChangeModalProps = { }; const UrlChangeModal = ({ onConfirm, siteUrl, currentUrl, onClose }: UrlChangeModalProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return (

diff --git a/apps/meteor/client/components/UserCard/UserCard.tsx b/apps/meteor/client/components/UserCard/UserCard.tsx index bf143229cf651..98e1cce2ab785 100644 --- a/apps/meteor/client/components/UserCard/UserCard.tsx +++ b/apps/meteor/client/components/UserCard/UserCard.tsx @@ -1,9 +1,9 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Button, IconButton } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactNode, ComponentProps } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useEmbeddedLayout } from '../../hooks/useEmbeddedLayout'; import MarkdownText from '../MarkdownText'; @@ -52,7 +52,7 @@ const UserCard = ({ nickname, ...props }: UserCardProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const isLayoutEmbedded = useEmbeddedLayout(); return ( diff --git a/apps/meteor/client/components/UserInfo/UserInfo.tsx b/apps/meteor/client/components/UserInfo/UserInfo.tsx index a7f32f82f4546..ac879d21738bf 100644 --- a/apps/meteor/client/components/UserInfo/UserInfo.tsx +++ b/apps/meteor/client/components/UserInfo/UserInfo.tsx @@ -1,9 +1,9 @@ import type { IUser, Serialized } from '@rocket.chat/core-typings'; import { Box, Margins, Tag } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useTimeAgo } from '../../hooks/useTimeAgo'; import { useUserCustomFields } from '../../hooks/useUserCustomFields'; @@ -72,7 +72,7 @@ const UserInfo = ({ reason, ...props }: UserInfoProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const timeAgo = useTimeAgo(); const userDisplayName = useUserDisplayName({ name, username }); const userCustomFields = useUserCustomFields(customFields); diff --git a/apps/meteor/client/components/WarningModal.tsx b/apps/meteor/client/components/WarningModal.tsx index 00ae92e1d3bdc..db0697f78c0d9 100644 --- a/apps/meteor/client/components/WarningModal.tsx +++ b/apps/meteor/client/components/WarningModal.tsx @@ -1,7 +1,7 @@ import { Button, Modal } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type WarningModalProps = { text: ReactNode; @@ -13,7 +13,7 @@ type WarningModalProps = { }; const WarningModal = ({ text, confirmText, close, cancel, cancelText, confirm, ...props }: WarningModalProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/dashboards/PeriodSelector.tsx b/apps/meteor/client/components/dashboards/PeriodSelector.tsx index 6977e3334f4fb..32c50112af3f0 100644 --- a/apps/meteor/client/components/dashboards/PeriodSelector.tsx +++ b/apps/meteor/client/components/dashboards/PeriodSelector.tsx @@ -1,7 +1,7 @@ import { Select } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import type { Period } from './periods'; import { getPeriod } from './periods'; @@ -14,7 +14,7 @@ type PeriodSelectorProps = { }; const PeriodSelector = ({ periods, value, name, onChange }: PeriodSelectorProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const options = useMemo<[string, string][]>(() => periods.map((period) => [period, t(...getPeriod(period).label)]), [periods, t]); diff --git a/apps/meteor/client/components/dashboards/periods.ts b/apps/meteor/client/components/dashboards/periods.ts index 784ba9c8f6a62..6da6ab9e9bd02 100644 --- a/apps/meteor/client/components/dashboards/periods.ts +++ b/apps/meteor/client/components/dashboards/periods.ts @@ -1,10 +1,7 @@ import type { TranslationKey } from '@rocket.chat/ui-contexts'; import moment from 'moment'; -const label = ( - translationKey: TranslationKey, - ...replacements: unknown[] -): readonly [translationKey: TranslationKey, ...replacements: unknown[]] => [translationKey, ...replacements]; +const label = (translationKey: TranslationKey): readonly [translationKey: TranslationKey] => [translationKey]; const lastNDays = ( diff --git a/apps/meteor/client/components/dashboards/usePeriodLabel.ts b/apps/meteor/client/components/dashboards/usePeriodLabel.ts index 8a8845703a492..624a57ee49698 100644 --- a/apps/meteor/client/components/dashboards/usePeriodLabel.ts +++ b/apps/meteor/client/components/dashboards/usePeriodLabel.ts @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import type { Period } from './periods'; import { getPeriod } from './periods'; export const usePeriodLabel = (period: Period['key']): string => { - const t = useTranslation(); + const { t } = useTranslation(); return useMemo(() => t(...getPeriod(period).label), [period, t]); }; diff --git a/apps/meteor/client/components/deviceManagement/DeviceManagementTable/DeviceManagementTable.tsx b/apps/meteor/client/components/deviceManagement/DeviceManagementTable/DeviceManagementTable.tsx index 9bc4f11fd3cdc..be07673e6aa6e 100644 --- a/apps/meteor/client/components/deviceManagement/DeviceManagementTable/DeviceManagementTable.tsx +++ b/apps/meteor/client/components/deviceManagement/DeviceManagementTable/DeviceManagementTable.tsx @@ -1,9 +1,9 @@ import type { DeviceManagementSession, DeviceManagementPopulatedSession, Serialized } from '@rocket.chat/core-typings'; import { Box, Pagination, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage'; import type { PaginatedResult } from '@rocket.chat/rest-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { AsyncStatePhase } from '../../../lib/asyncState'; import GenericNoResults from '../../GenericNoResults/GenericNoResults'; @@ -37,7 +37,7 @@ const DeviceManagementTable = ): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); if (!data && phase === AsyncStatePhase.REJECTED) { return ( diff --git a/apps/meteor/client/components/deviceManagement/LoggedOutBanner.tsx b/apps/meteor/client/components/deviceManagement/LoggedOutBanner.tsx index fc1c8c72f65be..3dbc25180a074 100644 --- a/apps/meteor/client/components/deviceManagement/LoggedOutBanner.tsx +++ b/apps/meteor/client/components/deviceManagement/LoggedOutBanner.tsx @@ -1,10 +1,10 @@ import { Banner, Box, Icon } 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'; const LoggedOutBanner = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( }> diff --git a/apps/meteor/client/components/message/IgnoredContent.tsx b/apps/meteor/client/components/message/IgnoredContent.tsx index b2dd7e7266678..93fa4d391fdcb 100644 --- a/apps/meteor/client/components/message/IgnoredContent.tsx +++ b/apps/meteor/client/components/message/IgnoredContent.tsx @@ -1,14 +1,14 @@ import { Box, Icon, MessageBody } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; type IgnoredContentProps = { onShowMessageIgnored: () => void; }; const IgnoredContent = ({ onShowMessageIgnored }: IgnoredContentProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const showMessageIgnored = (event: React.SyntheticEvent): void => { event.stopPropagation(); diff --git a/apps/meteor/client/components/message/MessageHeader.tsx b/apps/meteor/client/components/message/MessageHeader.tsx index 487c390a973f3..21a4d8484f8f1 100644 --- a/apps/meteor/client/components/message/MessageHeader.tsx +++ b/apps/meteor/client/components/message/MessageHeader.tsx @@ -7,9 +7,9 @@ import { MessageStatusPrivateIndicator, MessageNameContainer, } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { KeyboardEvent, ReactElement } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { getUserDisplayName } from '../../../lib/getUserDisplayName'; import { useFormatDateAndTime } from '../../hooks/useFormatDateAndTime'; @@ -27,7 +27,7 @@ type MessageHeaderProps = { }; const MessageHeader = ({ message }: MessageHeaderProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const formatTime = useFormatTime(); const formatDateAndTime = useFormatDateAndTime(); diff --git a/apps/meteor/client/components/message/ReadReceiptIndicator.tsx b/apps/meteor/client/components/message/ReadReceiptIndicator.tsx index ac8ae925fbe59..9ed659b2801f6 100644 --- a/apps/meteor/client/components/message/ReadReceiptIndicator.tsx +++ b/apps/meteor/client/components/message/ReadReceiptIndicator.tsx @@ -1,8 +1,8 @@ import type { IMessage } from '@rocket.chat/core-typings'; import { Box, Icon } 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'; type ReadReceiptIndicatorProps = { mid: IMessage['_id']; @@ -10,7 +10,7 @@ type ReadReceiptIndicatorProps = { }; const ReadReceiptIndicator = ({ mid, unread }: ReadReceiptIndicatorProps): ReactElement | null => { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); const chat = useChat(); diff --git a/apps/meteor/client/components/message/content/DiscussionMetrics.tsx b/apps/meteor/client/components/message/content/DiscussionMetrics.tsx index a14c75761de5a..3d66580c02708 100644 --- a/apps/meteor/client/components/message/content/DiscussionMetrics.tsx +++ b/apps/meteor/client/components/message/content/DiscussionMetrics.tsx @@ -6,9 +6,9 @@ import { MessageMetricsItemLabel, MessageMetricsReply, } 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 { useTimeAgo } from '../../../hooks/useTimeAgo'; import { useGoToRoom } from '../../../views/room/hooks/useGoToRoom'; @@ -21,7 +21,7 @@ type DiscussionMetricsProps = { }; const DiscussionMetrics = ({ lm, count, rid, drid }: DiscussionMetricsProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const format = useTimeAgo(); const goToRoom = useGoToRoom(); diff --git a/apps/meteor/client/components/message/content/Reactions.tsx b/apps/meteor/client/components/message/content/Reactions.tsx index c71afcf3feb1a..d16f6aefb22cb 100644 --- a/apps/meteor/client/components/message/content/Reactions.tsx +++ b/apps/meteor/client/components/message/content/Reactions.tsx @@ -1,9 +1,9 @@ import { useToolbar } from '@react-aria/toolbar'; import type { IMessage } from '@rocket.chat/core-typings'; import { MessageReactions, MessageReactionAction } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { HTMLAttributes, KeyboardEvent, ReactElement } from 'react'; import React, { useContext, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { MessageListContext, useOpenEmojiPicker, useUserHasReacted } from '../list/MessageListContext'; import Reaction from './reactions/Reaction'; @@ -14,7 +14,7 @@ type ReactionsProps = { } & HTMLAttributes; const Reactions = ({ message, ...props }: ReactionsProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const ref = useRef(null); const hasReacted = useUserHasReacted(message); const openEmojiPicker = useOpenEmojiPicker(message); diff --git a/apps/meteor/client/components/message/content/actions/MessageAction.tsx b/apps/meteor/client/components/message/content/actions/MessageAction.tsx index 7a787cdd75088..c5b4081dfc5e0 100644 --- a/apps/meteor/client/components/message/content/actions/MessageAction.tsx +++ b/apps/meteor/client/components/message/content/actions/MessageAction.tsx @@ -1,9 +1,9 @@ import { Button } from '@rocket.chat/fuselage'; import type { Keys as IconName } from '@rocket.chat/icons'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; const resolveLegacyIcon = (legacyIcon: IconName | `icon-${IconName | 'videocam'}`): IconName => { if (legacyIcon === 'icon-videocam') { @@ -23,7 +23,7 @@ type MessageActionProps = { }; const MessageAction = ({ icon, methodId, i18nLabel, label, runAction, danger }: MessageActionProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const resolvedIcon = resolveLegacyIcon(icon); diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentDownloadBase.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentDownloadBase.tsx index 284cb0cecbf20..175c41b0f76be 100644 --- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentDownloadBase.tsx +++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentDownloadBase.tsx @@ -1,13 +1,13 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import Action from '../../Action'; type AttachmentDownloadBaseProps = Omit, 'icon'> & { title?: string | undefined; href: string }; const AttachmentDownloadBase = ({ title, href, disabled, ...props }: AttachmentDownloadBaseProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( & { load: () => void }; const Load = ({ load, ...props }: LoadProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const clickable = css` cursor: pointer; background: ${Palette.surface['surface-tint']}; diff --git a/apps/meteor/client/components/message/content/attachments/structure/image/Retry.tsx b/apps/meteor/client/components/message/content/attachments/structure/image/Retry.tsx index 6654800f9e137..fa959a1dd2769 100644 --- a/apps/meteor/client/components/message/content/attachments/structure/image/Retry.tsx +++ b/apps/meteor/client/components/message/content/attachments/structure/image/Retry.tsx @@ -1,14 +1,14 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Icon, Palette } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import ImageBox from './ImageBox'; type RetryProps = { retry: () => void }; const Retry = ({ retry }: RetryProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const clickable = css` cursor: pointer; background: ${Palette.surface['surface-tint']}; diff --git a/apps/meteor/client/components/message/content/collapsible/CollapsibleContent.tsx b/apps/meteor/client/components/message/content/collapsible/CollapsibleContent.tsx index af449db9a41ce..14697087294e5 100644 --- a/apps/meteor/client/components/message/content/collapsible/CollapsibleContent.tsx +++ b/apps/meteor/client/components/message/content/collapsible/CollapsibleContent.tsx @@ -1,13 +1,13 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import Action from '../Action'; type CollapsibleContentProps = Omit, 'icon'> & { collapsed?: boolean }; const CollapsibleContent = ({ collapsed = false, ...props }: CollapsibleContentProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ; }; diff --git a/apps/meteor/client/components/message/content/location/MapViewFallback.tsx b/apps/meteor/client/components/message/content/location/MapViewFallback.tsx index 3e89cb03cec74..23c0e98320ff2 100644 --- a/apps/meteor/client/components/message/content/location/MapViewFallback.tsx +++ b/apps/meteor/client/components/message/content/location/MapViewFallback.tsx @@ -1,14 +1,14 @@ import { Box, Icon } from '@rocket.chat/fuselage'; import { ExternalLink } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type MapViewFallbackProps = { linkUrl: string; }; const MapViewFallback = ({ linkUrl }: MapViewFallbackProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/message/content/location/MapViewImage.tsx b/apps/meteor/client/components/message/content/location/MapViewImage.tsx index 4cf33040938d4..1f94006bd0db4 100644 --- a/apps/meteor/client/components/message/content/location/MapViewImage.tsx +++ b/apps/meteor/client/components/message/content/location/MapViewImage.tsx @@ -1,6 +1,6 @@ import { ExternalLink } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type MapViewImageProps = { linkUrl: string; @@ -8,7 +8,7 @@ type MapViewImageProps = { }; const MapViewImage = ({ linkUrl, imageUrl }: MapViewImageProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/message/content/reactions/ReactionTooltip.tsx b/apps/meteor/client/components/message/content/reactions/ReactionTooltip.tsx index a71f50a953b61..0bc8975c80f8e 100644 --- a/apps/meteor/client/components/message/content/reactions/ReactionTooltip.tsx +++ b/apps/meteor/client/components/message/content/reactions/ReactionTooltip.tsx @@ -1,8 +1,8 @@ import { Skeleton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useGetMessageByID } from '../../../../views/room/contextualBar/Threads/hooks/useGetMessageByID'; import MarkdownText from '../../../MarkdownText'; @@ -37,7 +37,7 @@ const getTranslationKey = (users: string[], mine: boolean): TranslationKey => { }; const ReactionTooltip = ({ emojiName, usernames, mine, messageId, showRealName, username }: ReactionTooltipProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const key = getTranslationKey(usernames, mine); diff --git a/apps/meteor/client/components/message/content/urlPreviews/OEmbedCollapsible.tsx b/apps/meteor/client/components/message/content/urlPreviews/OEmbedCollapsible.tsx index 50f978e243b33..8761b60cc68f2 100644 --- a/apps/meteor/client/components/message/content/urlPreviews/OEmbedCollapsible.tsx +++ b/apps/meteor/client/components/message/content/urlPreviews/OEmbedCollapsible.tsx @@ -1,7 +1,7 @@ import { MessageGenericPreview } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import MessageCollapsible from '../../MessageCollapsible'; import OEmbedPreviewContent from './OEmbedPreviewContent'; @@ -10,7 +10,7 @@ import type { OEmbedPreviewMetadata } from './OEmbedPreviewMetadata'; type OEmbedCollapsibleProps = { children?: ReactNode } & OEmbedPreviewMetadata; const OEmbedCollapsible = ({ children, ...props }: OEmbedCollapsibleProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/message/header/MessageRoles.tsx b/apps/meteor/client/components/message/header/MessageRoles.tsx index 83526f349469f..26942e5d04f67 100644 --- a/apps/meteor/client/components/message/header/MessageRoles.tsx +++ b/apps/meteor/client/components/message/header/MessageRoles.tsx @@ -1,7 +1,7 @@ import { MessageRole, MessageRoles as FuselageMessageRoles } 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'; type MessageRolesProps = { roles: Array; @@ -9,7 +9,7 @@ type MessageRolesProps = { }; const MessageRoles = ({ roles, isBot }: MessageRolesProps): ReactElement | null => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/components/message/notification/MessageNotification.tsx b/apps/meteor/client/components/message/notification/MessageNotification.tsx index b6d8ac0073477..7dd75ca5ed317 100644 --- a/apps/meteor/client/components/message/notification/MessageNotification.tsx +++ b/apps/meteor/client/components/message/notification/MessageNotification.tsx @@ -1,9 +1,9 @@ import type { Palette } from '@rocket.chat/fuselage'; import { Box } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type MessageNotificationProps = { label: TranslationKey; @@ -11,7 +11,7 @@ type MessageNotificationProps = { }; const MessageNotification = ({ label, bg }: MessageNotificationProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ; }; diff --git a/apps/meteor/client/components/message/toolbar/MessageActionMenu.tsx b/apps/meteor/client/components/message/toolbar/MessageActionMenu.tsx index 155599c5b51da..5bf1d8846498f 100644 --- a/apps/meteor/client/components/message/toolbar/MessageActionMenu.tsx +++ b/apps/meteor/client/components/message/toolbar/MessageActionMenu.tsx @@ -1,8 +1,8 @@ import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import { GenericMenu, type GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { MouseEvent, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import type { MessageActionConditionProps, MessageActionConfig } from '../../../../app/ui-utils/client/lib/MessageAction'; @@ -24,7 +24,7 @@ type MessageActionMenuProps = { }; const MessageActionMenu = ({ options, onChangeMenuVisibility, context, isMessageEncrypted }: MessageActionMenuProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const id = useUniqueId(); const groupOptions = options .map((option) => ({ diff --git a/apps/meteor/client/components/message/toolbar/MessageToolbarStarsActionMenu.tsx b/apps/meteor/client/components/message/toolbar/MessageToolbarStarsActionMenu.tsx index 7c88d89ac2057..44f9bc558ddde 100644 --- a/apps/meteor/client/components/message/toolbar/MessageToolbarStarsActionMenu.tsx +++ b/apps/meteor/client/components/message/toolbar/MessageToolbarStarsActionMenu.tsx @@ -1,8 +1,8 @@ import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import { GenericMenu, type GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { MouseEvent, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import type { MessageActionConditionProps, MessageActionConfig } from '../../../../app/ui-utils/client/lib/MessageAction'; @@ -29,7 +29,7 @@ const MessageToolbarStarsActionMenu = ({ context, isMessageEncrypted, }: MessageActionMenuProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const id = useUniqueId(); const groupOptions = options.reduce((acc, option) => { diff --git a/apps/meteor/client/components/message/variants/SystemMessage.tsx b/apps/meteor/client/components/message/variants/SystemMessage.tsx index eeba342c3f31e..df0d62292422a 100644 --- a/apps/meteor/client/components/message/variants/SystemMessage.tsx +++ b/apps/meteor/client/components/message/variants/SystemMessage.tsx @@ -13,9 +13,9 @@ import { } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement, KeyboardEvent } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { MessageTypes } from '../../../../app/ui-utils/client'; import { getUserDisplayName } from '../../../../lib/getUserDisplayName'; @@ -40,7 +40,7 @@ type SystemMessageProps = { } & ComponentProps; const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const formatTime = useFormatTime(); const formatDateAndTime = useFormatDateAndTime(); const { triggerProps, openUserCard } = useUserCard(); diff --git a/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx b/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx index c423d09a95275..f7fa072a7406e 100644 --- a/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx +++ b/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx @@ -13,9 +13,9 @@ import { MessageStatusIndicatorItem, } from '@rocket.chat/fuselage'; import { MessageAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { MessageTypes } from '../../../../app/ui-utils/client'; import { @@ -42,7 +42,7 @@ const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }: const parentMessage = useParentMessage(message.tmid); const translated = useShowTranslated(message); - const t = useTranslation(); + const { t } = useTranslation(); const isSelecting = useIsSelecting(); const toggleSelected = useToggleSelect(message._id); diff --git a/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx index 33bce63745e26..3d468f57f4640 100644 --- a/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx +++ b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx @@ -2,9 +2,9 @@ import type { IMessage } from '@rocket.chat/core-typings'; import { isQuoteAttachment, isE2EEMessage } from '@rocket.chat/core-typings'; import { PreviewMarkup } from '@rocket.chat/gazzodown'; import type { Root } from '@rocket.chat/message-parser'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import GazzodownText from '../../../GazzodownText'; @@ -13,7 +13,7 @@ type ThreadMessagePreviewBodyProps = { }; const ThreadMessagePreviewBody = ({ message }: ThreadMessagePreviewBodyProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const isEncryptedMessage = isE2EEMessage(message); const getMessage = () => { diff --git a/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx b/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx index 615fee8714aa9..3d6f4be8c0fc8 100644 --- a/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx +++ b/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx @@ -1,14 +1,14 @@ import type { IVoipRoom } from '@rocket.chat/core-typings'; import { Avatar, Box, Tag } 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 { getUserAvatarURL } from '../../../../app/utils/client'; import { parseOutboundPhoneNumber } from '../../../lib/voip/parseOutboundPhoneNumber'; export const VoipRoomForeword = ({ room }: { room: IVoipRoom }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const avatarUrl = getUserAvatarURL(room.name) as string; diff --git a/apps/meteor/client/hooks/useDecryptedMessage.ts b/apps/meteor/client/hooks/useDecryptedMessage.ts index 181d97b197c76..f98012b11f2b3 100644 --- a/apps/meteor/client/hooks/useDecryptedMessage.ts +++ b/apps/meteor/client/hooks/useDecryptedMessage.ts @@ -1,13 +1,13 @@ import type { IMessage } from '@rocket.chat/core-typings'; import { isE2EEMessage } from '@rocket.chat/core-typings'; import { useSafely } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { useState, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import { e2e } from '../../app/e2e/client/rocketchat.e2e'; export const useDecryptedMessage = (message: IMessage): string => { - const t = useTranslation(); + const { t } = useTranslation(); const [decryptedMessage, setDecryptedMessage] = useSafely(useState(t('E2E_message_encrypted_placeholder'))); useEffect(() => { diff --git a/apps/meteor/client/hooks/useFormatDuration.ts b/apps/meteor/client/hooks/useFormatDuration.ts index 61215074dfbdb..807190c63f5e4 100644 --- a/apps/meteor/client/hooks/useFormatDuration.ts +++ b/apps/meteor/client/hooks/useFormatDuration.ts @@ -1,8 +1,8 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; export const useFormatDuration = (): ((duration: number) => string) => { - const t = useTranslation(); + const { t } = useTranslation(); return useCallback( (duration) => { diff --git a/apps/meteor/client/hooks/useHighlightedCode.ts b/apps/meteor/client/hooks/useHighlightedCode.ts index 4e3405ca30342..e059bf3f11817 100644 --- a/apps/meteor/client/hooks/useHighlightedCode.ts +++ b/apps/meteor/client/hooks/useHighlightedCode.ts @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import hljs, { register } from '../../app/markdown/lib/hljs'; export function useHighlightedCode(language: string, text: string): string { - const t = useTranslation(); + const { t } = useTranslation(); const { isLoading } = useQuery(['register-highlight-language', language], async () => { try { await register(language); diff --git a/apps/meteor/client/omnichannel/additionalForms/BusinessHoursMultiple.tsx b/apps/meteor/client/omnichannel/additionalForms/BusinessHoursMultiple.tsx index a158a13f97112..640dbd3752880 100644 --- a/apps/meteor/client/omnichannel/additionalForms/BusinessHoursMultiple.tsx +++ b/apps/meteor/client/omnichannel/additionalForms/BusinessHoursMultiple.tsx @@ -1,15 +1,15 @@ import { Field, FieldLabel, FieldRow, FieldError, TextInput, ToggleSwitch } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React from 'react'; import { Controller, useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import AutoCompleteDepartmentMultiple from '../../components/AutoCompleteDepartmentMultiple'; import { useHasLicenseModule } from '../../hooks/useHasLicenseModule'; const BusinessHoursMultiple = ({ className }: { className?: ComponentProps['className'] }) => { - const t = useTranslation(); + const { t } = useTranslation(); const { control, formState: { errors }, diff --git a/apps/meteor/client/omnichannel/additionalForms/CustomFieldsAdditionalForm.tsx b/apps/meteor/client/omnichannel/additionalForms/CustomFieldsAdditionalForm.tsx index d6c78c3c043c9..8ee9cf6ddbf9a 100644 --- a/apps/meteor/client/omnichannel/additionalForms/CustomFieldsAdditionalForm.tsx +++ b/apps/meteor/client/omnichannel/additionalForms/CustomFieldsAdditionalForm.tsx @@ -1,10 +1,10 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { Field, FieldLabel, FieldRow, FieldError, FieldHint, ToggleSwitch, TextInput, Select } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { useMemo } from 'react'; import { useFormContext, Controller } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { useHasLicenseModule } from '../../hooks/useHasLicenseModule'; @@ -17,7 +17,7 @@ const checkIsOptionsValid = (value: string) => { }; const CustomFieldsAdditionalForm = ({ className }: { className?: ComponentProps['className'] }) => { - const t = useTranslation(); + const { t } = useTranslation(); const { control, watch, diff --git a/apps/meteor/client/omnichannel/additionalForms/DepartmentForwarding.tsx b/apps/meteor/client/omnichannel/additionalForms/DepartmentForwarding.tsx index 47ee87f7ee2a8..e65e4da01b964 100644 --- a/apps/meteor/client/omnichannel/additionalForms/DepartmentForwarding.tsx +++ b/apps/meteor/client/omnichannel/additionalForms/DepartmentForwarding.tsx @@ -2,8 +2,8 @@ import { Field, FieldLabel, FieldRow, FieldHint, Box, PaginatedMultiSelectFilter import type { PaginatedMultiSelectOption } from '@rocket.chat/fuselage'; import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useDepartmentsList } from '../../components/Omnichannel/hooks/useDepartmentsList'; import { useRecordList } from '../../hooks/lists/useRecordList'; @@ -18,7 +18,7 @@ type DepartmentForwardingProps = { }; export const DepartmentForwarding = ({ departmentId, value = [], handler, label }: DepartmentForwardingProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const [departmentsFilter, setDepartmentsFilter] = useState(''); const hasLicense = useHasLicenseModule('livechat-enterprise'); diff --git a/apps/meteor/client/omnichannel/additionalForms/MaxChatsPerAgent.tsx b/apps/meteor/client/omnichannel/additionalForms/MaxChatsPerAgent.tsx index 75a2656dc4ea6..dda85c9ff08bf 100644 --- a/apps/meteor/client/omnichannel/additionalForms/MaxChatsPerAgent.tsx +++ b/apps/meteor/client/omnichannel/additionalForms/MaxChatsPerAgent.tsx @@ -1,14 +1,14 @@ import { NumberInput, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React from 'react'; import { useFormContext, Controller } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { useHasLicenseModule } from '../../hooks/useHasLicenseModule'; const MaxChatsPerAgent = ({ className }: { className?: ComponentProps['className'] }) => { - const t = useTranslation(); + const { t } = useTranslation(); const { control } = useFormContext(); const hasLicense = useHasLicenseModule('livechat-enterprise'); diff --git a/apps/meteor/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.tsx b/apps/meteor/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.tsx index 8d68f0ec29f35..b628d2622649d 100644 --- a/apps/meteor/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.tsx +++ b/apps/meteor/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.tsx @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { InfoPanelLabel, InfoPanelText } from '../../components/InfoPanel'; import { useHasLicenseModule } from '../../hooks/useHasLicenseModule'; const MaxChatsPerAgentDisplay = ({ maxNumberSimultaneousChat = 0 }) => { - const t = useTranslation(); + const { t } = useTranslation(); const hasLicense = useHasLicenseModule('livechat-enterprise'); if (!hasLicense) { diff --git a/apps/meteor/client/omnichannel/additionalForms/PrioritiesSelect.tsx b/apps/meteor/client/omnichannel/additionalForms/PrioritiesSelect.tsx index da157e06b3f06..3ad0b25b10d61 100644 --- a/apps/meteor/client/omnichannel/additionalForms/PrioritiesSelect.tsx +++ b/apps/meteor/client/omnichannel/additionalForms/PrioritiesSelect.tsx @@ -3,9 +3,9 @@ import { LivechatPriorityWeight } from '@rocket.chat/core-typings'; import type { SelectOption } from '@rocket.chat/fuselage'; import { Options, Box, Option, Field, FieldLabel, FieldRow, SelectLegacy } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { useCallback, forwardRef, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useHasLicenseModule } from '../../hooks/useHasLicenseModule'; import { PriorityIcon } from '../priorities/PriorityIcon'; @@ -18,7 +18,7 @@ type PrioritiesSelectProps = { }; export const PrioritiesSelect = ({ value = '', label, options, onChange }: PrioritiesSelectProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const hasLicense = useHasLicenseModule('livechat-enterprise'); const [sorting] = useState>({}); diff --git a/apps/meteor/client/omnichannel/cannedResponses/CannedResponseEditWithDepartmentData.tsx b/apps/meteor/client/omnichannel/cannedResponses/CannedResponseEditWithDepartmentData.tsx index 90dd6bd4ed325..6f57a29e116f3 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/CannedResponseEditWithDepartmentData.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/CannedResponseEditWithDepartmentData.tsx @@ -1,7 +1,7 @@ import type { IOmnichannelCannedResponse, Serialized } from '@rocket.chat/core-typings'; import { Callout } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { FormSkeleton } from '../../components/Skeleton'; import { AsyncStatePhase } from '../../hooks/useAsyncState'; @@ -12,7 +12,7 @@ const CannedResponseEditWithDepartmentData = ({ cannedResponseData }: { cannedRe const departmentId = useMemo(() => cannedResponseData?.departmentId, [cannedResponseData]) as string; const { value: departmentData, phase: state, error } = useEndpointData('/v1/livechat/department/:_id', { keys: { _id: departmentId } }); - const t = useTranslation(); + const { t } = useTranslation(); if (state === AsyncStatePhase.LOADING) { return ; diff --git a/apps/meteor/client/omnichannel/cannedResponses/CannedResponseFilter.tsx b/apps/meteor/client/omnichannel/cannedResponses/CannedResponseFilter.tsx index 4746e7df6bea3..bb869189e1ba5 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/CannedResponseFilter.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/CannedResponseFilter.tsx @@ -1,8 +1,8 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { Box, Icon, TextInput, Select } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ChangeEvent } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import AutoCompleteAgent from '../../components/AutoCompleteAgent'; @@ -18,7 +18,7 @@ type CannedResponsesFilterProps = { }; const CannedResponsesFilter = ({ createdBy, setCreatedBy, sharing, setSharing, text, setText }: CannedResponsesFilterProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const sharingList: SelectOption[] = [ ['', t('All')], diff --git a/apps/meteor/client/omnichannel/cannedResponses/components/CannedResponsesComposer/InsertPlaceholderDropdown.tsx b/apps/meteor/client/omnichannel/cannedResponses/components/CannedResponsesComposer/InsertPlaceholderDropdown.tsx index 54ce88cccb7eb..7e59aaa7cf8ee 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/components/CannedResponsesComposer/InsertPlaceholderDropdown.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/components/CannedResponsesComposer/InsertPlaceholderDropdown.tsx @@ -1,8 +1,8 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Divider } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { Dispatch, RefObject, SetStateAction } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; type InsertPlaceholderDropdownProps = { onChange: any; @@ -11,7 +11,7 @@ type InsertPlaceholderDropdownProps = { }; const InsertPlaceholderDropdown = ({ onChange, textAreaRef, setVisible }: InsertPlaceholderDropdownProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const clickable = css` cursor: pointer; diff --git a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.tsx b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.tsx index 6bef3f10efdc1..e4ed5f58ef8c1 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.tsx @@ -1,8 +1,8 @@ import type { ILivechatDepartment, IOmnichannelCannedResponse } from '@rocket.chat/core-typings'; import { Box, Button, ButtonGroup, Tag } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { MouseEventHandler } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { Contextualbar, @@ -37,7 +37,7 @@ const CannedResponse = ({ onClickEdit, onClickUse, }: CannedResponseProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const scope = useScopeDict(dataScope, departmentName); return ( diff --git a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx index cd9907f271a50..5734cf2e93bf2 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx @@ -1,9 +1,9 @@ import type { ILivechatDepartment, IOmnichannelCannedResponse } from '@rocket.chat/core-typings'; import { Box, Button, ButtonGroup, ContextualbarEmptyContent, Icon, Margins, Select, TextInput } from '@rocket.chat/fuselage'; import { useAutoFocus, useResizeObserver } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { Dispatch, FormEventHandler, MouseEvent, ReactElement, SetStateAction } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { Virtuoso } from 'react-virtuoso'; import { @@ -54,7 +54,7 @@ const CannedResponseList = ({ onClickUse, reload, }: CannedResponseListProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const inputRef = useAutoFocus(true); const { context: cannedId } = useRoomToolbox(); diff --git a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.tsx b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.tsx index 224e0c5dff559..29b4e4326dd11 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.tsx @@ -1,9 +1,9 @@ import type { ILivechatDepartment, IOmnichannelCannedResponse } from '@rocket.chat/core-typings'; import { css } from '@rocket.chat/css-in-js'; import { Box, Button, Icon, Tag } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { MouseEvent } from 'react'; import React, { memo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useScopeDict } from '../../../hooks/useScopeDict'; @@ -15,7 +15,7 @@ type ItemProps = { }; const Item = ({ data, allowUse, onClickItem, onClickUse }: ItemProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const scope = useScopeDict(data.scope, data.departmentName); diff --git a/apps/meteor/client/omnichannel/components/RoomActivityIcon/index.tsx b/apps/meteor/client/omnichannel/components/RoomActivityIcon/index.tsx index 749f40d28a604..df449a21f64ed 100644 --- a/apps/meteor/client/omnichannel/components/RoomActivityIcon/index.tsx +++ b/apps/meteor/client/omnichannel/components/RoomActivityIcon/index.tsx @@ -1,8 +1,8 @@ import type { IOmnichannelRoom } from '@rocket.chat/core-typings'; import { Icon } 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 { useIsRoomOverMacLimit } from '../../../hooks/omnichannel/useIsRoomOverMacLimit'; @@ -11,7 +11,7 @@ type RoomActivityIconProps = { }; export const RoomActivityIcon = ({ room }: RoomActivityIconProps): ReactElement | null => { - const t = useTranslation(); + const { t } = useTranslation(); const isRoomOverMacLimit = useIsRoomOverMacLimit(room); return isRoomOverMacLimit ? ( diff --git a/apps/meteor/client/omnichannel/hooks/useScopeDict.ts b/apps/meteor/client/omnichannel/hooks/useScopeDict.ts index da8fd60b73606..ffab5d55aaf0d 100644 --- a/apps/meteor/client/omnichannel/hooks/useScopeDict.ts +++ b/apps/meteor/client/omnichannel/hooks/useScopeDict.ts @@ -1,8 +1,8 @@ import type { ILivechatDepartment, IOmnichannelCannedResponse } from '@rocket.chat/core-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation } from 'react-i18next'; export const useScopeDict = (scope: IOmnichannelCannedResponse['scope'], departmentName: ILivechatDepartment['name']): string => { - const t = useTranslation(); + const { t } = useTranslation(); const dict: Record = { global: t('Public'), diff --git a/apps/meteor/client/omnichannel/monitors/MonitorsPage.tsx b/apps/meteor/client/omnichannel/monitors/MonitorsPage.tsx index dffbde494e7a2..cbf2e6ec88fff 100644 --- a/apps/meteor/client/omnichannel/monitors/MonitorsPage.tsx +++ b/apps/meteor/client/omnichannel/monitors/MonitorsPage.tsx @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Page, PageHeader, PageContent } from '../../components/Page'; import MonitorsTable from './MonitorsTable'; const MonitorsPage = () => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/omnichannel/priorities/PrioritiesResetModal.tsx b/apps/meteor/client/omnichannel/priorities/PrioritiesResetModal.tsx index a85dd72c868d6..5d8c55d5330cd 100644 --- a/apps/meteor/client/omnichannel/priorities/PrioritiesResetModal.tsx +++ b/apps/meteor/client/omnichannel/priorities/PrioritiesResetModal.tsx @@ -1,6 +1,6 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../components/GenericModal'; @@ -10,7 +10,7 @@ type PrioritiesResetModalProps = { }; export const PrioritiesResetModal = ({ onCancel, onReset }: PrioritiesResetModalProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); const headers = ( <> diff --git a/apps/meteor/client/omnichannel/priorities/PriorityEditFormWithData.tsx b/apps/meteor/client/omnichannel/priorities/PriorityEditFormWithData.tsx index fec79d762bcd8..b0232c6076a60 100644 --- a/apps/meteor/client/omnichannel/priorities/PriorityEditFormWithData.tsx +++ b/apps/meteor/client/omnichannel/priorities/PriorityEditFormWithData.tsx @@ -1,7 +1,7 @@ import { Callout } 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 { FormSkeleton } from '../../components/Skeleton'; import { usePriorityInfo } from '../../views/omnichannel/directory/hooks/usePriorityInfo'; @@ -13,7 +13,7 @@ type PriorityEditFormWithDataProps = Omit & { }; function PriorityEditFormWithData({ priorityId, ...props }: PriorityEditFormWithDataProps): ReactElement { - const t = useTranslation(); + const { t } = useTranslation(); const { data, isInitialLoading, isError } = usePriorityInfo(priorityId); if (isInitialLoading) { diff --git a/apps/meteor/client/omnichannel/priorities/PriorityIcon.tsx b/apps/meteor/client/omnichannel/priorities/PriorityIcon.tsx index 7f6a486436a3c..8aac2a73f85c7 100644 --- a/apps/meteor/client/omnichannel/priorities/PriorityIcon.tsx +++ b/apps/meteor/client/omnichannel/priorities/PriorityIcon.tsx @@ -2,9 +2,9 @@ import { LivechatPriorityWeight } from '@rocket.chat/core-typings'; import { Box, Icon, Palette, StatusBullet } from '@rocket.chat/fuselage'; import type { Keys } from '@rocket.chat/icons'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useOmnichannelPriorities } from '../hooks/useOmnichannelPriorities'; @@ -37,7 +37,7 @@ const PRIORITY_ICONS: Record = { }; export const PriorityIcon = ({ level, size = 20, showUnprioritized = false, ...props }: PriorityIconProps): ReactElement | null => { - const t = useTranslation(); + const { t } = useTranslation(); const { iconName, color } = PRIORITY_ICONS[level] || {}; const { data: priorities } = useOmnichannelPriorities(); diff --git a/apps/meteor/client/omnichannel/priorities/PriorityList.tsx b/apps/meteor/client/omnichannel/priorities/PriorityList.tsx index e31fc3a44a5aa..16091476d10c9 100644 --- a/apps/meteor/client/omnichannel/priorities/PriorityList.tsx +++ b/apps/meteor/client/omnichannel/priorities/PriorityList.tsx @@ -1,6 +1,6 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Contextualbar, @@ -21,7 +21,7 @@ type PriorityListProps = { }; const PriorityList = ({ priorityId, onClose, onSave }: PriorityListProps): ReactElement | null => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx b/apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx index 90b8387582344..2feb7ca01439e 100644 --- a/apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx +++ b/apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx @@ -1,6 +1,6 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericTable, @@ -22,7 +22,7 @@ type AgentsTableProps = { }; export const AgentsTable = memo(({ data, sortBy, sortDirection, setSort }: AgentsTableProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const onHeaderClick = useMutableCallback((id) => { setSort(id, sortDirection === 'asc' ? 'desc' : 'asc'); diff --git a/apps/meteor/client/omnichannel/reports/components/ReportCardEmptyState.tsx b/apps/meteor/client/omnichannel/reports/components/ReportCardEmptyState.tsx index e0253f11665c8..2df9831407485 100644 --- a/apps/meteor/client/omnichannel/reports/components/ReportCardEmptyState.tsx +++ b/apps/meteor/client/omnichannel/reports/components/ReportCardEmptyState.tsx @@ -1,7 +1,7 @@ import { States, StatesIcon, StatesTitle, StatesSubtitle } from '@rocket.chat/fuselage'; import type { Keys } from '@rocket.chat/icons'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type CardEmpryStateProps = { icon?: Keys; @@ -9,7 +9,7 @@ type CardEmpryStateProps = { }; export const ReportCardEmptyState = ({ icon, subtitle }: CardEmpryStateProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/omnichannel/reports/components/ReportCardErrorState.tsx b/apps/meteor/client/omnichannel/reports/components/ReportCardErrorState.tsx index 023a4b5c918ba..b8168e366299c 100644 --- a/apps/meteor/client/omnichannel/reports/components/ReportCardErrorState.tsx +++ b/apps/meteor/client/omnichannel/reports/components/ReportCardErrorState.tsx @@ -1,14 +1,14 @@ import { States, StatesAction, StatesActions, StatesIcon, StatesTitle } 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'; type ReportCardErrorStateProps = { onRetry?: () => void; }; export const ReportCardErrorState = ({ onRetry }: ReportCardErrorStateProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/omnichannel/reports/hooks/useDefaultDownload.tsx b/apps/meteor/client/omnichannel/reports/hooks/useDefaultDownload.tsx index d0cf335c09d9a..f185e347e8d5d 100644 --- a/apps/meteor/client/omnichannel/reports/hooks/useDefaultDownload.tsx +++ b/apps/meteor/client/omnichannel/reports/hooks/useDefaultDownload.tsx @@ -1,5 +1,5 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import type { Period } from '../../../components/dashboards/periods'; import { formatAttachmentName } from '../utils/formatAttachmentName'; @@ -13,7 +13,7 @@ type DefaultDownloadHookProps = { }; export const useDefaultDownload = ({ columnName, title, period, data }: DefaultDownloadHookProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return useMemo(() => { const { start, end } = formatPeriodRange(period); diff --git a/apps/meteor/client/omnichannel/reports/sections/AgentsSection.tsx b/apps/meteor/client/omnichannel/reports/sections/AgentsSection.tsx index 692bd1c330321..11dbecccfab76 100644 --- a/apps/meteor/client/omnichannel/reports/sections/AgentsSection.tsx +++ b/apps/meteor/client/omnichannel/reports/sections/AgentsSection.tsx @@ -1,7 +1,7 @@ import { Box } from '@rocket.chat/fuselage'; import { useResizeObserver } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { AgentsTable, BarChart, ReportCard } from '../components'; import { useAgentsSection } from '../hooks'; @@ -11,7 +11,7 @@ const BREAKPOINT = 768; export const AgentsSection = () => { const { data, sortBy, sortDirection, setSort, ...config } = useAgentsSection(); - const t = useTranslation(); + const { t } = useTranslation(); const { ref, contentBoxSize: { inlineSize: cardWidth = 200 } = {} } = useResizeObserver(); const width = cardWidth * 0.9; diff --git a/apps/meteor/client/omnichannel/tags/AutoCompleteTagsMultiple.tsx b/apps/meteor/client/omnichannel/tags/AutoCompleteTagsMultiple.tsx index 9f0a210868686..4b6d6d3955239 100644 --- a/apps/meteor/client/omnichannel/tags/AutoCompleteTagsMultiple.tsx +++ b/apps/meteor/client/omnichannel/tags/AutoCompleteTagsMultiple.tsx @@ -1,8 +1,8 @@ import type { PaginatedMultiSelectOption } from '@rocket.chat/fuselage'; import { PaginatedMultiSelectFiltered } from '@rocket.chat/fuselage'; import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useRecordList } from '../../hooks/lists/useRecordList'; import { AsyncStatePhase } from '../../hooks/useAsyncState'; @@ -23,7 +23,7 @@ const AutoCompleteTagsMultiple = ({ department, viewAll = false, }: AutoCompleteTagsMultipleProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const [tagsFilter, setTagsFilter] = useState(''); const debouncedTagsFilter = useDebouncedValue(tagsFilter, 500); diff --git a/apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx b/apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx index 6779fb8d6c823..791c2189ec6bb 100644 --- a/apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx +++ b/apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx @@ -1,12 +1,12 @@ import { useMergedRefs } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { HTMLAttributes, Ref } from 'react'; import React, { forwardRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useSidebarListNavigation } from './useSidebarListNavigation'; const RoomListWrapper = forwardRef(function RoomListWrapper(props: HTMLAttributes, ref: Ref) { - const t = useTranslation(); + const { t } = useTranslation(); const { sidebarListRef } = useSidebarListNavigation(); const mergedRefs = useMergedRefs(ref, sidebarListRef); diff --git a/apps/meteor/client/sidebar/footer/SidebarFooterWatermark.tsx b/apps/meteor/client/sidebar/footer/SidebarFooterWatermark.tsx index bf7736b5899a4..1f66217d76e57 100644 --- a/apps/meteor/client/sidebar/footer/SidebarFooterWatermark.tsx +++ b/apps/meteor/client/sidebar/footer/SidebarFooterWatermark.tsx @@ -1,12 +1,12 @@ import { Box } 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 { useLicense, useLicenseName } from '../../hooks/useLicense'; export const SidebarFooterWatermark = (): ReactElement | null => { - const t = useTranslation(); + const { t } = useTranslation(); const response = useLicense(); diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx index 119476ecd89a1..ba7bbd977e034 100644 --- a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx +++ b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx @@ -2,9 +2,9 @@ import type { IVoipRoom, ICallerInfo, VoIpCallerInfo } from '@rocket.chat/core-t import { VoipClientEvents } from '@rocket.chat/core-typings'; import { css } from '@rocket.chat/css-in-js'; import { Box, Button, ButtonGroup, SidebarFooter, Menu, IconButton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, MouseEvent, ReactNode } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import type { CallActionsType } from '../../../contexts/CallContext'; import type { VoipFooterMenuOptions } from '../../../hooks/useVoipFooterMenu'; @@ -50,7 +50,7 @@ export const VoipFooter = ({ options, }: VoipFooterPropsType): ReactElement => { const contactLabel = useOmnichannelContactLabel(caller); - const t = useTranslation(); + const { t } = useTranslation(); const cssClickable = callerState === 'IN_CALL' || callerState === 'ON_HOLD' diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListEmptyPlaceholder.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListEmptyPlaceholder.tsx index 8f0a262226797..43e6be7c583d2 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListEmptyPlaceholder.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListEmptyPlaceholder.tsx @@ -1,11 +1,11 @@ import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericNoResults from '../../../components/GenericNoResults'; const FederatedRoomListEmptyPlaceholder = () => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx index f3307436bc079..fd37aac816f45 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx @@ -1,9 +1,9 @@ import { States, StatesIcon, StatesTitle, StatesSubtitle, StatesActions, StatesAction, Icon } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { QueryErrorResetBoundary } from '@tanstack/react-query'; import type { ReactElement, ReactNode } from 'react'; import React from 'react'; import { ErrorBoundary } from 'react-error-boundary'; +import { useTranslation } from 'react-i18next'; type FederatedRoomListErrorBoundaryProps = { children?: ReactNode; @@ -11,7 +11,7 @@ type FederatedRoomListErrorBoundaryProps = { }; const FederatedRoomListErrorBoundary = ({ children, resetKeys }: FederatedRoomListErrorBoundaryProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( {({ reset }): ReactElement => ( diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListItem.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListItem.tsx index 01cb22c2e1c5d..c096c74c08a41 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListItem.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListItem.tsx @@ -2,8 +2,8 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Button, Icon } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import type { IFederationPublicRooms } from '@rocket.chat/rest-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type FederatedRoomListItemProps = IFederationPublicRooms & { disabled: boolean; @@ -23,7 +23,7 @@ const FederatedRoomListItem = ({ canJoin, disabled, }: FederatedRoomListItemProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const nameId = useUniqueId(); return ( diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.tsx index 741eadf7bc7e5..0108958e3e647 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearch.tsx @@ -1,7 +1,7 @@ import { Modal, Skeleton } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import MatrixFederationSearchModalContent from './MatrixFederationSearchModalContent'; import { useMatrixServerList } from './useMatrixServerList'; @@ -12,7 +12,7 @@ type MatrixFederationSearchProps = { }; const MatrixFederationSearch = ({ onClose, defaultSelectedServer }: MatrixFederationSearchProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { data, isLoading } = useMatrixServerList(); const titleId = useUniqueId(); diff --git a/apps/meteor/client/sidebar/header/UserMenu.tsx b/apps/meteor/client/sidebar/header/UserMenu.tsx index b106caa20b16b..7d964c2122bc9 100644 --- a/apps/meteor/client/sidebar/header/UserMenu.tsx +++ b/apps/meteor/client/sidebar/header/UserMenu.tsx @@ -7,15 +7,15 @@ import { useHandleMenuAction, type GenericMenuItemProps, } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useState, memo } from 'react'; +import { useTranslation } from 'react-i18next'; import UserAvatarWithStatus from './UserAvatarWithStatus'; import UserAvatarWithStatusUnstable from './UserAvatarWithStatusUnstable'; import { useUserMenu } from './hooks/useUserMenu'; const UserMenu = ({ user }: { user: IUser }) => { - const t = useTranslation(); + const { t } = useTranslation(); const [isOpen, setIsOpen] = useState(false); const sections = useUserMenu(user); diff --git a/apps/meteor/client/sidebar/header/actions/Administration.tsx b/apps/meteor/client/sidebar/header/actions/Administration.tsx index a0016db7e75c7..14c9f2cc83c5f 100644 --- a/apps/meteor/client/sidebar/header/actions/Administration.tsx +++ b/apps/meteor/client/sidebar/header/actions/Administration.tsx @@ -1,15 +1,15 @@ import { Sidebar } from '@rocket.chat/fuselage'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { HTMLAttributes } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useAdministrationMenu } from './hooks/useAdministrationMenu'; type AdministrationProps = Omit, 'is'>; const Administration = (props: AdministrationProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const sections = useAdministrationMenu(); diff --git a/apps/meteor/client/sidebar/header/actions/CreateRoom.tsx b/apps/meteor/client/sidebar/header/actions/CreateRoom.tsx index 3392db4ed917b..3a59b0adea431 100644 --- a/apps/meteor/client/sidebar/header/actions/CreateRoom.tsx +++ b/apps/meteor/client/sidebar/header/actions/CreateRoom.tsx @@ -1,15 +1,15 @@ import { Sidebar } from '@rocket.chat/fuselage'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { HTMLAttributes } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useCreateRoom } from './hooks/useCreateRoomMenu'; type CreateRoomProps = Omit, 'is'>; const CreateRoom = (props: CreateRoomProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const sections = useCreateRoom(); diff --git a/apps/meteor/client/sidebar/header/actions/Sort.tsx b/apps/meteor/client/sidebar/header/actions/Sort.tsx index 1fe4b947c6612..e4d1d66cf3af1 100644 --- a/apps/meteor/client/sidebar/header/actions/Sort.tsx +++ b/apps/meteor/client/sidebar/header/actions/Sort.tsx @@ -1,15 +1,15 @@ import { Sidebar } from '@rocket.chat/fuselage'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { HTMLAttributes } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useSortMenu } from './hooks/useSortMenu'; type SortProps = Omit, 'is'>; const Sort = (props: SortProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const sections = useSortMenu(); diff --git a/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationMenu.tsx b/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationMenu.ts similarity index 89% rename from apps/meteor/client/sidebar/header/actions/hooks/useAdministrationMenu.tsx rename to apps/meteor/client/sidebar/header/actions/hooks/useAdministrationMenu.ts index cf71cf4223b9b..23f71d67ebc57 100644 --- a/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationMenu.tsx +++ b/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationMenu.ts @@ -1,12 +1,12 @@ import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation } from 'react-i18next'; import { useAdministrationItems } from './useAdministrationItems'; import { useAppsItems } from './useAppsItems'; import { useAuditItems } from './useAuditItems'; export const useAdministrationMenu = () => { - const t = useTranslation(); + const { t } = useTranslation(); const administrationItems = useAdministrationItems(); const appItems = useAppsItems(); diff --git a/apps/meteor/client/sidebar/header/actions/hooks/useCreateRoomMenu.tsx b/apps/meteor/client/sidebar/header/actions/hooks/useCreateRoomMenu.tsx index f220267fac05e..6a0c58b36311e 100644 --- a/apps/meteor/client/sidebar/header/actions/hooks/useCreateRoomMenu.tsx +++ b/apps/meteor/client/sidebar/header/actions/hooks/useCreateRoomMenu.tsx @@ -2,7 +2,7 @@ import { useAtLeastOnePermission, useSetting, useTranslation } from '@rocket.cha import { useIsEnterprise } from '../../../../hooks/useIsEnterprise'; import { useCreateRoomItems } from './useCreateRoomItems'; -import { useMatrixFederationItems } from './useMatrixFederationItems.tsx'; +import { useMatrixFederationItems } from './useMatrixFederationItems'; const CREATE_ROOM_PERMISSIONS = ['create-c', 'create-p', 'create-d', 'start-discussion', 'start-discussion-other-user']; diff --git a/apps/meteor/client/sidebar/header/actions/hooks/useMatrixFederationItems.tsx.tsx b/apps/meteor/client/sidebar/header/actions/hooks/useMatrixFederationItems.ts similarity index 89% rename from apps/meteor/client/sidebar/header/actions/hooks/useMatrixFederationItems.tsx.tsx rename to apps/meteor/client/sidebar/header/actions/hooks/useMatrixFederationItems.ts index 7e628378749d1..cd0abc9bdfb20 100644 --- a/apps/meteor/client/sidebar/header/actions/hooks/useMatrixFederationItems.tsx.tsx +++ b/apps/meteor/client/sidebar/header/actions/hooks/useMatrixFederationItems.ts @@ -1,5 +1,5 @@ import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation } from 'react-i18next'; import MatrixFederationSearch from '../../MatrixFederationSearch'; import { useCreateRoomModal } from '../../hooks/useCreateRoomModal'; @@ -9,7 +9,7 @@ export const useMatrixFederationItems = ({ }: { isMatrixEnabled: string | number | boolean | null | undefined; }): GenericMenuItemProps[] => { - const t = useTranslation(); + const { t } = useTranslation(); const searchFederatedRooms = useCreateRoomModal(MatrixFederationSearch); diff --git a/apps/meteor/client/sidebar/header/actions/hooks/useSortMenu.tsx b/apps/meteor/client/sidebar/header/actions/hooks/useSortMenu.tsx index bea1d999997e9..af6a73ce6eabb 100644 --- a/apps/meteor/client/sidebar/header/actions/hooks/useSortMenu.tsx +++ b/apps/meteor/client/sidebar/header/actions/hooks/useSortMenu.tsx @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation } from 'react-i18next'; import { useGroupingListItems } from './useGroupingListItems'; import { useSortModeItems } from './useSortModeItems'; import { useViewModeItems } from './useViewModeItems'; export const useSortMenu = () => { - const t = useTranslation(); + const { t } = useTranslation(); const viewModeItems = useViewModeItems(); const sortModeItems = useSortModeItems(); diff --git a/apps/meteor/client/sidebar/sections/OverMacLimitSection.tsx b/apps/meteor/client/sidebar/sections/OverMacLimitSection.tsx index 53cbd0340339d..c2578d076f1ad 100644 --- a/apps/meteor/client/sidebar/sections/OverMacLimitSection.tsx +++ b/apps/meteor/client/sidebar/sections/OverMacLimitSection.tsx @@ -1,10 +1,10 @@ import { Icon, SidebarBanner } 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'; export const OverMacLimitSection = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const handleClick = () => { window.open('https://rocket.chat/pricing', '_blank'); diff --git a/apps/meteor/client/sidebar/sections/StatusDisabledSection.tsx b/apps/meteor/client/sidebar/sections/StatusDisabledSection.tsx index fb12c3e6fc3b7..c8f56ffe54580 100644 --- a/apps/meteor/client/sidebar/sections/StatusDisabledSection.tsx +++ b/apps/meteor/client/sidebar/sections/StatusDisabledSection.tsx @@ -1,11 +1,11 @@ import { SidebarBanner } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useStatusDisabledModal } from '../../views/admin/customUserStatus/hooks/useStatusDisabledModal'; const StatusDisabledSection = ({ onDismiss }: { onDismiss: () => void }) => { - const t = useTranslation(); + const { t } = useTranslation(); const handleStatusDisabledModal = useStatusDisabledModal(); return ( diff --git a/apps/meteor/client/sidebar/sections/actions/OmnichannelCallDialPad.tsx b/apps/meteor/client/sidebar/sections/actions/OmnichannelCallDialPad.tsx index 2cd263630da7e..e0fa30ca23454 100644 --- a/apps/meteor/client/sidebar/sections/actions/OmnichannelCallDialPad.tsx +++ b/apps/meteor/client/sidebar/sections/actions/OmnichannelCallDialPad.tsx @@ -1,13 +1,13 @@ import { Sidebar } 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 { useVoipOutboundStates } from '../../../contexts/CallContext'; import { useDialModal } from '../../../hooks/useDialModal'; export const OmniChannelCallDialPad = ({ ...props }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { openDialModal } = useDialModal(); diff --git a/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx b/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx index 77efcd5057e11..dd5186aeb4790 100644 --- a/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx +++ b/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx @@ -1,9 +1,9 @@ import { Sidebar } 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'; export const OmnichannelCallToggleError = ({ ...props }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ; }; diff --git a/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleLoading.tsx b/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleLoading.tsx index 673a3225482c3..8318e91999002 100644 --- a/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleLoading.tsx +++ b/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleLoading.tsx @@ -1,9 +1,9 @@ import { Sidebar } 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'; export const OmnichannelCallToggleLoading = ({ ...props }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ; }; diff --git a/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleReady.tsx b/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleReady.tsx index 497e0143bfaa6..8205d0287768b 100644 --- a/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleReady.tsx +++ b/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleReady.tsx @@ -1,12 +1,12 @@ import { Sidebar } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import { useCallerInfo, useCallRegisterClient, useCallUnregisterClient, useVoipNetworkStatus } from '../../../contexts/CallContext'; export const OmnichannelCallToggleReady = ({ ...props }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const caller = useCallerInfo(); const unregister = useCallUnregisterClient(); diff --git a/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx b/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx index 5f6592210d657..89a4aeacef40a 100644 --- a/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx +++ b/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx @@ -3,8 +3,9 @@ import type { ISubscription, IRoom } from '@rocket.chat/core-typings'; import { Box, SidebarV2GroupTitle } from '@rocket.chat/fuselage'; import { useResizeObserver } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useUserPreference, useUserId, useTranslation } from '@rocket.chat/ui-contexts'; +import { useUserPreference, useUserId } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { GroupedVirtuoso } from 'react-virtuoso'; import { VirtuosoScrollbars } from '../../components/CustomScrollbars'; @@ -39,7 +40,7 @@ const getRoomsByGroup = (rooms: (ISubscription & IRoom)[]) => { }; const RoomList = () => { - const t = useTranslation(); + const { t } = useTranslation(); const isAnonymous = !useUserId(); const roomsList = useRoomList(); const avatarTemplate = useAvatarTemplate(); diff --git a/apps/meteor/client/sidebarv2/RoomList/RoomListRow.tsx b/apps/meteor/client/sidebarv2/RoomList/RoomListRow.tsx index b520033056f34..810368220ba96 100644 --- a/apps/meteor/client/sidebarv2/RoomList/RoomListRow.tsx +++ b/apps/meteor/client/sidebarv2/RoomList/RoomListRow.tsx @@ -1,5 +1,5 @@ import type { IRoom, ISubscription } from '@rocket.chat/core-typings'; -import type { useTranslation } from '@rocket.chat/ui-contexts'; +import type { TFunction } from 'i18next'; import React, { memo, useMemo } from 'react'; import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '../../contexts/VideoConfContext'; @@ -10,7 +10,7 @@ import SidebarItemTemplateWithData from './SidebarItemTemplateWithData'; type RoomListRowProps = { data: { extended: boolean; - t: ReturnType; + t: TFunction; SidebarItemTemplate: ReturnType; AvatarTemplate: ReturnType; openedRoom: string; diff --git a/apps/meteor/client/sidebarv2/RoomList/RoomListWrapper.tsx b/apps/meteor/client/sidebarv2/RoomList/RoomListWrapper.tsx index b4d4b4a44c985..09e80f12765cf 100644 --- a/apps/meteor/client/sidebarv2/RoomList/RoomListWrapper.tsx +++ b/apps/meteor/client/sidebarv2/RoomList/RoomListWrapper.tsx @@ -1,14 +1,14 @@ import { useMergedRefs } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ForwardedRef, HTMLAttributes } from 'react'; import React, { forwardRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useSidebarListNavigation } from './useSidebarListNavigation'; type RoomListWrapperProps = HTMLAttributes; const RoomListWrapper = forwardRef(function RoomListWrapper(props: RoomListWrapperProps, ref: ForwardedRef) { - const t = useTranslation(); + const { t } = useTranslation(); const { sidebarListRef } = useSidebarListNavigation(); const mergedRefs = useMergedRefs(ref, sidebarListRef); diff --git a/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx b/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx index e1f66ba93b4e5..b286a95d451de 100644 --- a/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx +++ b/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx @@ -1,8 +1,8 @@ import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings'; import { isDirectMessageRoom, isMultipleDirectMessageRoom, isOmnichannelRoom, isVideoConfMessage } from '@rocket.chat/core-typings'; import { SidebarV2Action, SidebarV2Actions, SidebarV2ItemBadge, SidebarV2ItemIcon } from '@rocket.chat/fuselage'; -import type { useTranslation } from '@rocket.chat/ui-contexts'; import { useLayout } from '@rocket.chat/ui-contexts'; +import type { TFunction } from 'i18next'; import type { AllHTMLAttributes, ComponentType, ReactElement, ReactNode } from 'react'; import React, { memo, useMemo } from 'react'; @@ -15,7 +15,7 @@ import { OmnichannelBadges } from '../badges/OmnichannelBadges'; import type { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import { normalizeSidebarMessage } from './normalizeSidebarMessage'; -export const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: ReturnType): string | undefined => { +export const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: TFunction): string | undefined => { if (!lastMessage) { return t('No_messages_yet'); } @@ -34,13 +34,7 @@ export const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: Re return `${lastMessage.u.name || lastMessage.u.username}: ${normalizeSidebarMessage(lastMessage, t)}`; }; -export const getBadgeTitle = ( - userMentions: number, - threadUnread: number, - groupMentions: number, - unread: number, - t: ReturnType, -) => { +export const getBadgeTitle = (userMentions: number, threadUnread: number, groupMentions: number, unread: number, t: TFunction) => { const title = [] as string[]; if (userMentions) { title.push(t('mentions_counter', { count: userMentions })); @@ -60,7 +54,7 @@ export const getBadgeTitle = ( type RoomListRowProps = { extended: boolean; - t: ReturnType; + t: TFunction; SidebarItemTemplate: ComponentType< { icon: ReactNode; diff --git a/apps/meteor/client/sidebarv2/RoomList/normalizeSidebarMessage.ts b/apps/meteor/client/sidebarv2/RoomList/normalizeSidebarMessage.ts index 9a506b861e567..7de2dd9d122da 100644 --- a/apps/meteor/client/sidebarv2/RoomList/normalizeSidebarMessage.ts +++ b/apps/meteor/client/sidebarv2/RoomList/normalizeSidebarMessage.ts @@ -1,11 +1,11 @@ import type { IMessage } from '@rocket.chat/core-typings'; import { escapeHTML } from '@rocket.chat/string-helpers'; -import type { useTranslation } from '@rocket.chat/ui-contexts'; import emojione from 'emojione'; +import type { TFunction } from 'i18next'; import { filterMarkdown } from '../../../app/markdown/lib/markdown'; -export const normalizeSidebarMessage = (message: IMessage, t: ReturnType): string | undefined => { +export const normalizeSidebarMessage = (message: IMessage, t: TFunction): string | undefined => { if (message.msg) { return escapeHTML(filterMarkdown(emojione.shortnameToUnicode(message.msg))); } diff --git a/apps/meteor/client/sidebarv2/footer/SidebarFooterWatermark.tsx b/apps/meteor/client/sidebarv2/footer/SidebarFooterWatermark.tsx index bf7736b5899a4..1f66217d76e57 100644 --- a/apps/meteor/client/sidebarv2/footer/SidebarFooterWatermark.tsx +++ b/apps/meteor/client/sidebarv2/footer/SidebarFooterWatermark.tsx @@ -1,12 +1,12 @@ import { Box } 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 { useLicense, useLicenseName } from '../../hooks/useLicense'; export const SidebarFooterWatermark = (): ReactElement | null => { - const t = useTranslation(); + const { t } = useTranslation(); const response = useLicense(); diff --git a/apps/meteor/client/sidebarv2/footer/voip/VoipFooter.tsx b/apps/meteor/client/sidebarv2/footer/voip/VoipFooter.tsx index 6e67baefdec87..9344ba33c9ad8 100644 --- a/apps/meteor/client/sidebarv2/footer/voip/VoipFooter.tsx +++ b/apps/meteor/client/sidebarv2/footer/voip/VoipFooter.tsx @@ -2,9 +2,9 @@ import type { IVoipRoom, ICallerInfo, VoIpCallerInfo } from '@rocket.chat/core-t import { VoipClientEvents } from '@rocket.chat/core-typings'; import { css } from '@rocket.chat/css-in-js'; import { Box, Button, ButtonGroup, SidebarFooter, Menu, IconButton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, MouseEvent, ReactNode } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import type { CallActionsType } from '../../../contexts/CallContext'; import type { VoipFooterMenuOptions } from '../../../hooks/useVoipFooterMenu'; @@ -50,7 +50,7 @@ const VoipFooter = ({ options, }: VoipFooterProps): ReactElement => { const contactLabel = useOmnichannelContactLabel(caller); - const t = useTranslation(); + const { t } = useTranslation(); const cssClickable = callerState === 'IN_CALL' || callerState === 'ON_HOLD' diff --git a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListEmptyPlaceholder.tsx b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListEmptyPlaceholder.tsx index 8f0a262226797..43e6be7c583d2 100644 --- a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListEmptyPlaceholder.tsx +++ b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListEmptyPlaceholder.tsx @@ -1,11 +1,11 @@ import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericNoResults from '../../../components/GenericNoResults'; const FederatedRoomListEmptyPlaceholder = () => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx index 6931c98f219e7..1608058528bcb 100644 --- a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx +++ b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx @@ -1,9 +1,9 @@ import { States, StatesIcon, StatesTitle, StatesSubtitle, StatesActions, StatesAction, Icon } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { QueryErrorResetBoundary } from '@tanstack/react-query'; import type { ReactNode } from 'react'; import React from 'react'; import { ErrorBoundary } from 'react-error-boundary'; +import { useTranslation } from 'react-i18next'; type FederatedRoomListErrorBoundaryProps = { children?: ReactNode; @@ -11,7 +11,7 @@ type FederatedRoomListErrorBoundaryProps = { }; const FederatedRoomListErrorBoundary = ({ children, resetKeys }: FederatedRoomListErrorBoundaryProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListItem.tsx b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListItem.tsx index dfaa79ed44deb..002c8a5ac9da0 100644 --- a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListItem.tsx +++ b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomListItem.tsx @@ -1,8 +1,8 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Button, Icon } from '@rocket.chat/fuselage'; import type { IFederationPublicRooms } from '@rocket.chat/rest-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type FederatedRoomListItemProps = IFederationPublicRooms & { disabled: boolean; @@ -22,7 +22,7 @@ const FederatedRoomListItem = ({ canJoin, disabled, }: FederatedRoomListItemProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/MatrixFederationSearch.tsx b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/MatrixFederationSearch.tsx index f3dc779d28c1a..9ea119aabb18c 100644 --- a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/MatrixFederationSearch.tsx +++ b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/MatrixFederationSearch.tsx @@ -1,6 +1,6 @@ import { Modal, Skeleton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import MatrixFederationSearchModalContent from './MatrixFederationSearchModalContent'; import { useMatrixServerList } from './useMatrixServerList'; @@ -11,7 +11,7 @@ type MatrixFederationSearchProps = { }; const MatrixFederationSearch = ({ onClose, defaultSelectedServer }: MatrixFederationSearchProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { data, isLoading } = useMatrixServerList(); return ( diff --git a/apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx b/apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx index f12de10f19f94..5c56b44554b8f 100644 --- a/apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx +++ b/apps/meteor/client/sidebarv2/header/actions/CreateRoom.tsx @@ -1,15 +1,15 @@ import { SidebarV2Action } from '@rocket.chat/fuselage'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { HTMLAttributes } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useCreateRoom } from './hooks/useCreateRoomMenu'; type CreateRoomProps = Omit, 'is'>; const CreateRoom = (props: CreateRoomProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const sections = useCreateRoom(); diff --git a/apps/meteor/client/sidebarv2/header/actions/Sort.tsx b/apps/meteor/client/sidebarv2/header/actions/Sort.tsx index d5394c28c6e61..dcfa84dd71bc8 100644 --- a/apps/meteor/client/sidebarv2/header/actions/Sort.tsx +++ b/apps/meteor/client/sidebarv2/header/actions/Sort.tsx @@ -1,15 +1,15 @@ import { SidebarV2Action } from '@rocket.chat/fuselage'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { HTMLAttributes } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useSortMenu } from './hooks/useSortMenu'; type SortProps = Omit, 'is'>; const Sort = (props: SortProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const sections = useSortMenu(); diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts b/apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts index 7e628378749d1..cd0abc9bdfb20 100644 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts +++ b/apps/meteor/client/sidebarv2/header/actions/hooks/useMatrixFederationItems.ts @@ -1,5 +1,5 @@ import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation } from 'react-i18next'; import MatrixFederationSearch from '../../MatrixFederationSearch'; import { useCreateRoomModal } from '../../hooks/useCreateRoomModal'; @@ -9,7 +9,7 @@ export const useMatrixFederationItems = ({ }: { isMatrixEnabled: string | number | boolean | null | undefined; }): GenericMenuItemProps[] => { - const t = useTranslation(); + const { t } = useTranslation(); const searchFederatedRooms = useCreateRoomModal(MatrixFederationSearch); diff --git a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortMenu.tsx b/apps/meteor/client/sidebarv2/header/actions/hooks/useSortMenu.tsx index bea1d999997e9..af6a73ce6eabb 100644 --- a/apps/meteor/client/sidebarv2/header/actions/hooks/useSortMenu.tsx +++ b/apps/meteor/client/sidebarv2/header/actions/hooks/useSortMenu.tsx @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation } from 'react-i18next'; import { useGroupingListItems } from './useGroupingListItems'; import { useSortModeItems } from './useSortModeItems'; import { useViewModeItems } from './useViewModeItems'; export const useSortMenu = () => { - const t = useTranslation(); + const { t } = useTranslation(); const viewModeItems = useViewModeItems(); const sortModeItems = useSortModeItems(); diff --git a/apps/meteor/client/sidebarv2/sections/StatusDisabledSection.tsx b/apps/meteor/client/sidebarv2/sections/StatusDisabledSection.tsx index a0f3245e88356..9994a0e66e771 100644 --- a/apps/meteor/client/sidebarv2/sections/StatusDisabledSection.tsx +++ b/apps/meteor/client/sidebarv2/sections/StatusDisabledSection.tsx @@ -1,13 +1,13 @@ import { SidebarV2Banner } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useStatusDisabledModal } from '../../views/admin/customUserStatus/hooks/useStatusDisabledModal'; type StatusDisabledSectionProps = { onDismiss: () => void }; const StatusDisabledSection = ({ onDismiss }: StatusDisabledSectionProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const handleStatusDisabledModal = useStatusDisabledModal(); return ( diff --git a/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountPage.tsx b/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountPage.tsx index 30979e2a81d82..d1af15f597115 100644 --- a/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountPage.tsx +++ b/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountPage.tsx @@ -1,12 +1,12 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Page, PageHeader, PageContent } from '../../../components/Page'; import DeviceManagementAccountTable from './DeviceManagementAccountTable'; const DeviceManagementAccountPage = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx b/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx index e2532d0c6623c..76556a238bac7 100644 --- a/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx +++ b/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx @@ -1,8 +1,8 @@ import { Box, Button } from '@rocket.chat/fuselage'; import { useMediaQuery } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericTableCell, GenericTableRow } from '../../../../components/GenericTable'; import DeviceIcon from '../../../../components/deviceManagement/DeviceIcon'; @@ -26,7 +26,7 @@ const DeviceManagementAccountRow = ({ loginAt, onReload, }: DevicesRowProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const formatDateAndTime = useFormatDateAndTime(); const mediaQuery = useMediaQuery('(min-width: 1024px)'); diff --git a/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx b/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx index 5039521fa6226..411f9ad02e6f8 100644 --- a/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx +++ b/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx @@ -1,7 +1,7 @@ import { useMediaQuery } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericTableHeaderCell } from '../../../../components/GenericTable'; import { usePagination } from '../../../../components/GenericTable/hooks/usePagination'; @@ -17,7 +17,7 @@ const sortMapping = { }; const DeviceManagementAccountTable = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = usePagination(); const { sortBy, sortDirection, setSort } = useSort<'client' | 'os' | 'loginAt'>('loginAt'); diff --git a/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx b/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx index 2f58ed305be49..ca6872b0165aa 100644 --- a/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx +++ b/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx @@ -1,12 +1,12 @@ import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; import { useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; export const PreferencesGeneral = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { register } = useFormContext(); const omnichannelHideAfterClosing = useUniqueId(); diff --git a/apps/meteor/client/views/account/preferences/MyDataModal.tsx b/apps/meteor/client/views/account/preferences/MyDataModal.tsx index 8889a1a44a53a..75b1e67b324e2 100644 --- a/apps/meteor/client/views/account/preferences/MyDataModal.tsx +++ b/apps/meteor/client/views/account/preferences/MyDataModal.tsx @@ -1,7 +1,7 @@ import { Button, Box, Modal } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactNode } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type MyDataModalProps = { onCancel: () => void; @@ -10,7 +10,7 @@ type MyDataModalProps = { }; const MyDataModal = ({ onCancel, title, text, ...props }: MyDataModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx index 85bfc9072b127..e987f78266b62 100644 --- a/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx +++ b/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx @@ -1,11 +1,11 @@ import { Accordion, Field, FieldGroup, FieldLabel, FieldRow, FieldHint, TextAreaInput } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; import { useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; const PreferencesHighlightsSection = () => { - const t = useTranslation(); + const { t } = useTranslation(); const { register } = useFormContext(); const highlightsId = useUniqueId(); diff --git a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx index b8b4366cf4ff6..c7e5bdf5aeceb 100644 --- a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx +++ b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx @@ -1,12 +1,12 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { FieldRow, FieldLink, FieldHint, FieldLabel, Accordion, Field, Select, FieldGroup, ToggleSwitch } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; const PreferencesMessagesSection = () => { - const t = useTranslation(); + const { t } = useTranslation(); const { control } = useFormContext(); const alsoSendThreadMessageToChannelOptions = useMemo( diff --git a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx index 02a04d0b2c592..edfece178e527 100644 --- a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx +++ b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx @@ -1,11 +1,11 @@ import { Accordion, Field, FieldLabel, FieldRow, NumberInput, FieldGroup, ToggleSwitch } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; import { Controller, useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; const PreferencesUserPresenceSection = () => { - const t = useTranslation(); + const { t } = useTranslation(); const { register, control } = useFormContext(); const enableAutoAwayId = useUniqueId(); diff --git a/apps/meteor/client/views/account/profile/ActionConfirmModal.tsx b/apps/meteor/client/views/account/profile/ActionConfirmModal.tsx index 01c9e1b77fb6f..d9e25d6d625ea 100644 --- a/apps/meteor/client/views/account/profile/ActionConfirmModal.tsx +++ b/apps/meteor/client/views/account/profile/ActionConfirmModal.tsx @@ -1,6 +1,6 @@ import { Box, PasswordInput, TextInput, FieldGroup, Field, FieldRow, FieldError } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useState, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../../components/GenericModal'; @@ -11,7 +11,7 @@ type ActionConfirmModalProps = { }; const ActionConfirmModal = ({ isPassword, onConfirm, onCancel }: ActionConfirmModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const [inputText, setInputText] = useState(''); const [inputError, setInputError] = useState(); diff --git a/apps/meteor/client/views/account/security/BackupCodesModal.tsx b/apps/meteor/client/views/account/security/BackupCodesModal.tsx index eb97fb10cd7f6..de3457902b7a8 100644 --- a/apps/meteor/client/views/account/security/BackupCodesModal.tsx +++ b/apps/meteor/client/views/account/security/BackupCodesModal.tsx @@ -1,6 +1,6 @@ import { Box, Button, Modal } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import TextCopy from '../../../components/TextCopy'; @@ -10,7 +10,7 @@ type BackupCodesModalProps = { }; const BackupCodesModal = ({ codes, onClose, ...props }: BackupCodesModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const codesText = useMemo(() => codes.join(' '), [codes]); diff --git a/apps/meteor/client/views/account/tokens/AccountTokensPage.tsx b/apps/meteor/client/views/account/tokens/AccountTokensPage.tsx index 9885b0bd3b862..abf45ebedcb9f 100644 --- a/apps/meteor/client/views/account/tokens/AccountTokensPage.tsx +++ b/apps/meteor/client/views/account/tokens/AccountTokensPage.tsx @@ -1,12 +1,12 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Page, PageHeader, PageContent } from '../../../components/Page'; import AccountTokensTable from './AccountTokensTable'; const AccountTokensPage = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx b/apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx index 5158d31d2470d..e4e9db4a8fadb 100644 --- a/apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx +++ b/apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx @@ -1,7 +1,7 @@ import type { IPersonalAccessToken, Serialized } from '@rocket.chat/core-typings'; import { ButtonGroup, IconButton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime'; @@ -13,7 +13,7 @@ type AccountTokensRowProps = { } & Serialized>; const AccountTokensRow = ({ bypassTwoFactor, createdAt, isMedium, lastTokenPart, name, onRegenerate, onRemove }: AccountTokensRowProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const formatDateAndTime = useFormatDateAndTime(); const handleRegenerate = useCallback(() => onRegenerate(name), [name, onRegenerate]); const handleRemove = useCallback(() => onRemove(name), [name, onRemove]); diff --git a/apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx b/apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx index 1824a9ee6ab4a..f6f52507d33a2 100644 --- a/apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx +++ b/apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx @@ -1,7 +1,7 @@ import { Box, Button, ButtonGroup, Margins, TextInput, Field, FieldLabel, FieldRow, FieldError, IconButton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, ChangeEvent } from 'react'; import React, { useCallback, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar'; import { useEndpointUpload } from '../../../hooks/useEndpointUpload'; @@ -13,7 +13,7 @@ type AddCustomEmojiProps = { }; const AddCustomEmoji = ({ close, onChange, ...props }: AddCustomEmojiProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const [name, setName] = useState(''); const [aliases, setAliases] = useState(''); const [emojiFile, setEmojiFile] = useState(); diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserActiveConnections.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserActiveConnections.tsx index 776e04fe1f69e..fa97324a57228 100644 --- a/apps/meteor/client/views/admin/customUserStatus/CustomUserActiveConnections.tsx +++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserActiveConnections.tsx @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericResourceUsage, GenericResourceUsageSkeleton } from '../../../components/GenericResourceUsage'; import { useActiveConnections } from '../../hooks/useActiveConnections'; const CustomUserActiveConnections = () => { - const t = useTranslation(); + const { t } = useTranslation(); const result = useActiveConnections(); diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx index 510d2d9303f45..b54c2181d76f5 100644 --- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx +++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx @@ -1,12 +1,12 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../../components/GenericModal'; type CustomUserStatusDisabledModalProps = { isAdmin: boolean; onConfirm: () => void; onClose: () => void }; const CustomUserStatusDisabledModal = ({ isAdmin, onConfirm, onClose }: CustomUserStatusDisabledModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return isAdmin ? ( => '_user' in session; const DeviceManagementAdminTable = ({ reloadRef }: { reloadRef: MutableRefObject<() => void> }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const [text, setText] = useState(''); const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = usePagination(); const { sortBy, sortDirection, setSort } = useSort<'client' | 'os' | 'username' | 'loginAt'>('username'); diff --git a/apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfoWithData.tsx b/apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfoWithData.tsx index 5f78269fca573..f884b27e0cb11 100644 --- a/apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfoWithData.tsx +++ b/apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfoWithData.tsx @@ -1,8 +1,8 @@ import type { Serialized, DeviceManagementPopulatedSession } from '@rocket.chat/core-typings'; import { Box, States, StatesIcon, StatesTitle, StatesSubtitle } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { Contextualbar, @@ -27,7 +27,7 @@ const convertSessionFromAPI = ({ }); const DeviceInfoWithData = ({ deviceId, onReload }: { deviceId: string; onReload: () => void }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { value: data, diff --git a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardErrorBoundary.tsx b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardErrorBoundary.tsx index f95e2b009a262..0f20e716b3b16 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardErrorBoundary.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardErrorBoundary.tsx @@ -1,16 +1,16 @@ import { States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { QueryErrorResetBoundary } from '@tanstack/react-query'; import type { ReactElement, ReactNode } from 'react'; import React, { useState } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; +import { useTranslation } from 'react-i18next'; type EngagementDashboardCardErrorBoundaryProps = { children?: ReactNode; }; const EngagementDashboardCardErrorBoundary = ({ children }: EngagementDashboardCardErrorBoundaryProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const [error, setError] = useState(); const isError = (error: unknown): error is Error => error instanceof Error; diff --git a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx index 78f1585f0f4bc..95de437462a54 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx @@ -1,7 +1,7 @@ import { Box, Select, Tabs } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useCallback, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { Page, PageHeader, PageScrollableContent } from '../../../components/Page'; import ChannelsTab from './channels/ChannelsTab'; @@ -14,7 +14,7 @@ type EngagementDashboardPageProps = { }; const EngagementDashboardPage = ({ tab = 'users', onSelectTab }: EngagementDashboardPageProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const timezoneOptions = useMemo<[timezone: 'utc' | 'local', label: string][]>( () => [ diff --git a/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx b/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx index a92b2c6d32952..a4216aeb48bee 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx @@ -1,8 +1,8 @@ import { Icon, Margins, Pagination, Skeleton, Table, TableBody, TableCell, TableHead, TableRow, Tile } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement } from 'react'; import React, { useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton'; import PeriodSelector from '../../../../components/dashboards/PeriodSelector'; @@ -14,7 +14,7 @@ import { useChannelsList } from './useChannelsList'; const ChannelsOverview = (): ReactElement => { const [period, periodSelectorProps] = usePeriodSelectorState('last 7 days', 'last 30 days', 'last 90 days'); - const t = useTranslation(); + const { t } = useTranslation(); const [current, setCurrent] = useState(0); const [itemsPerPage, setItemsPerPage] = useState<25 | 50 | 100>(25); @@ -121,7 +121,7 @@ const ChannelsOverview = (): ReactElement => { itemsPerPage={itemsPerPage} itemsPerPageLabel={(): string => t('Items_per_page:')} showingResultsLabel={({ count, current, itemsPerPage }): string => - t('Showing_results_of', current + 1, Math.min(current + itemsPerPage, count), count) + t('Showing_results_of', { postProcess: 'sprintf', sprintf: [current + 1, Math.min(current + itemsPerPage, count), count] }) } count={data?.total || 0} onSetItemsPerPage={setItemsPerPage} diff --git a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx index 0d9f7c2e77dbc..88fad25990d06 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx @@ -14,9 +14,9 @@ import { TableBody, TableCell, } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton'; import PeriodSelector from '../../../../components/dashboards/PeriodSelector'; @@ -34,7 +34,7 @@ const colors = { const MessagesPerChannelSection = (): ReactElement => { const [period, periodSelectorProps] = usePeriodSelectorState('last 7 days', 'last 30 days', 'last 90 days'); - const t = useTranslation(); + const { t } = useTranslation(); const { data: messageOriginsData } = useMessageOrigins({ period }); const { data: topFivePopularChannelsData } = useTopFivePopularChannels({ period }); diff --git a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx index 7cf46ebc476ac..5eca6c046568d 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx @@ -1,10 +1,10 @@ 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 { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton'; import PeriodSelector from '../../../../components/dashboards/PeriodSelector'; @@ -18,7 +18,7 @@ const MessagesSentSection = (): ReactElement => { const [period, periodSelectorProps] = usePeriodSelectorState('last 7 days', 'last 30 days', 'last 90 days'); const periodLabel = usePeriodLabel(period); - const t = useTranslation(); + const { t } = useTranslation(); const { data } = useMessagesSent({ period }); diff --git a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.tsx b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.tsx index 1e12d982d8b65..616e63a04351f 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.tsx @@ -1,13 +1,13 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import EngagementDashboardCard from '../EngagementDashboardCard'; import MessagesPerChannelSection from './MessagesPerChannelSection'; import MessagesSentSection from './MessagesSentSection'; const MessagesTab = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( <> diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx index 80359837b6276..7ac1b7c912898 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx @@ -1,10 +1,10 @@ import { ResponsiveLine } from '@nivo/line'; import { Box, Flex, Skeleton, Tile } from '@rocket.chat/fuselage'; import colors from '@rocket.chat/fuselage-tokens/colors.json'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton'; import CounterSet from '../../../../components/dataView/CounterSet'; @@ -101,7 +101,7 @@ const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps): ReactElement }, [data, utc]); const formatDate = useFormatDate(); - const t = useTranslation(); + const { t } = useTranslation(); return ( <> diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/BusiestChatTimesSection.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/BusiestChatTimesSection.tsx index f70acde3a8e42..4af3d8f9200aa 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/users/BusiestChatTimesSection.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/users/BusiestChatTimesSection.tsx @@ -1,7 +1,7 @@ import { Select } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import EngagementDashboardCardFilter from '../EngagementDashboardCardFilter'; import ContentForDays from './ContentForDays'; @@ -14,7 +14,7 @@ type BusiestChatTimesSectionProps = { }; const BusiestChatTimesSection = ({ timezone }: BusiestChatTimesSectionProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const [timeUnit, setTimeUnit] = useState('hours'); const timeUnitOptions = useMemo<[timeUnit: TimeUnit, label: string][]>( diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx index 2114bd9208d9a..83753769cc918 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx @@ -2,10 +2,10 @@ 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 { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useHourlyChatActivity } from './useHourlyChatActivity'; @@ -20,7 +20,7 @@ const ContentForHours = ({ displacement, onPreviousDateClick, onNextDateClick, t const utc = timezone === 'utc'; const { data } = useHourlyChatActivity({ displacement, utc }); - const t = useTranslation(); + const { t } = useTranslation(); const isLgScreen = useBreakpoints().includes('lg'); const values = useMemo(() => { diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/NewUsersSection.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/NewUsersSection.tsx index 36f9c3de2cc27..0498d0451ab94 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/users/NewUsersSection.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/users/NewUsersSection.tsx @@ -2,10 +2,10 @@ import { ResponsiveBar } from '@nivo/bar'; import { Box, Flex, Skeleton, Tooltip } from '@rocket.chat/fuselage'; import { useResizeObserver } from '@rocket.chat/fuselage-hooks'; import colors from '@rocket.chat/fuselage-tokens/colors.json'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton'; import PeriodSelector from '../../../../components/dashboards/PeriodSelector'; @@ -29,7 +29,7 @@ const NewUsersSection = ({ timezone }: NewUsersSectionProps): ReactElement => { const utc = timezone === 'utc'; const { data } = useNewUsers({ period, utc }); - const t = useTranslation(); + const { t } = useTranslation(); const formatDate = useFormatDate(); diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx index 007e75f95474f..c5f7d20441299 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx @@ -1,10 +1,10 @@ import { ResponsiveHeatMapCanvas } from '@nivo/heatmap'; import { Box, Flex, Skeleton, Tooltip } from '@rocket.chat/fuselage'; import colors from '@rocket.chat/fuselage-tokens/colors.json'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement } from 'react'; import React, { useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton'; import PeriodSelector from '../../../../components/dashboards/PeriodSelector'; @@ -23,7 +23,7 @@ const UsersByTimeOfTheDaySection = ({ timezone }: UsersByTimeOfTheDaySectionProp const { data, isLoading } = useUsersByTimeOfTheDay({ period, utc }); - const t = useTranslation(); + const { t } = useTranslation(); const [dates, values] = useMemo(() => { if (!data || isLoading) { diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.tsx index b79d0b9c9a699..238cc0e40d290 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.tsx @@ -1,8 +1,8 @@ import { Box, Flex } from '@rocket.chat/fuselage'; import { useBreakpoints } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import EngagementDashboardCard from '../EngagementDashboardCard'; import ActiveUsersSection from './ActiveUsersSection'; @@ -15,7 +15,7 @@ type UsersTabProps = { }; const UsersTab = ({ timezone }: UsersTabProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const isXxlScreen = useBreakpoints().includes('xxl'); diff --git a/apps/meteor/client/views/admin/federationDashboard/FederationDashboardPage.tsx b/apps/meteor/client/views/admin/federationDashboard/FederationDashboardPage.tsx index 126a385e6cebf..14dc96283f86b 100644 --- a/apps/meteor/client/views/admin/federationDashboard/FederationDashboardPage.tsx +++ b/apps/meteor/client/views/admin/federationDashboard/FederationDashboardPage.tsx @@ -1,14 +1,14 @@ import { Box } 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 { Page, PageHeader, PageScrollableContentWithShadow } from '../../../components/Page'; import OverviewSection from './OverviewSection'; import ServersSection from './ServersSection'; function FederationDashboardPage(): ReactElement { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/admin/import/PrepareChannels.tsx b/apps/meteor/client/views/admin/import/PrepareChannels.tsx index 494f1f2b9b781..0a01934297a25 100644 --- a/apps/meteor/client/views/admin/import/PrepareChannels.tsx +++ b/apps/meteor/client/views/admin/import/PrepareChannels.tsx @@ -1,7 +1,7 @@ import { CheckBox, Table, Tag, Pagination, TableHead, TableRow, TableCell, TableBody } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { Dispatch, SetStateAction, ChangeEvent } from 'react'; import React, { useState, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import type { ChannelDescriptor } from './ChannelDescriptor'; @@ -13,11 +13,12 @@ type PrepareChannelsProps = { // TODO: review inner logic const PrepareChannels = ({ channels, channelsCount, setChannels }: PrepareChannelsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const [current, setCurrent] = useState(0); const [itemsPerPage, setItemsPerPage] = useState<25 | 50 | 100>(25); const showingResultsLabel = useCallback( - ({ count, current, itemsPerPage }) => t('Showing_results_of', current + 1, Math.min(current + itemsPerPage, count), count), + ({ count, current, itemsPerPage }) => + t('Showing_results_of', { postProcess: 'sprintf', sprintf: [current + 1, Math.min(current + itemsPerPage, count), count] }), [t], ); const itemsPerPageLabel = useCallback(() => t('Items_per_page:'), [t]); diff --git a/apps/meteor/client/views/admin/import/PrepareUsers.tsx b/apps/meteor/client/views/admin/import/PrepareUsers.tsx index 72e5d66127cfb..5ee9cb36be787 100644 --- a/apps/meteor/client/views/admin/import/PrepareUsers.tsx +++ b/apps/meteor/client/views/admin/import/PrepareUsers.tsx @@ -1,7 +1,7 @@ import { CheckBox, Table, Tag, Pagination, TableHead, TableRow, TableCell, TableBody } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { Dispatch, SetStateAction, ChangeEvent } from 'react'; import React, { useState, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import type { UserDescriptor } from './UserDescriptor'; @@ -13,11 +13,12 @@ type PrepareUsersProps = { // TODO: review inner logic const PrepareUsers = ({ usersCount, users, setUsers }: PrepareUsersProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const [current, setCurrent] = useState(0); const [itemsPerPage, setItemsPerPage] = useState<25 | 50 | 100>(25); const showingResultsLabel = useCallback( - ({ count, current, itemsPerPage }) => t('Showing_results_of', current + 1, Math.min(current + itemsPerPage, count), count), + ({ count, current, itemsPerPage }) => + t('Showing_results_of', { postProcess: 'sprintf', sprintf: [current + 1, Math.min(current + itemsPerPage, count), count] }), [t], ); const itemsPerPageLabel = useCallback(() => t('Items_per_page:'), [t]); diff --git a/apps/meteor/client/views/admin/integrations/NewBot.tsx b/apps/meteor/client/views/admin/integrations/NewBot.tsx index bd4bdbac1303e..65c44aca65bce 100644 --- a/apps/meteor/client/views/admin/integrations/NewBot.tsx +++ b/apps/meteor/client/views/admin/integrations/NewBot.tsx @@ -1,9 +1,9 @@ import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; const NewBot = () => { - const t = useTranslation(); + const { t } = useTranslation(); return ; }; diff --git a/apps/meteor/client/views/admin/integrations/NewZapier.tsx b/apps/meteor/client/views/admin/integrations/NewZapier.tsx index 8313ee4a5029d..e2f5c1d597a89 100644 --- a/apps/meteor/client/views/admin/integrations/NewZapier.tsx +++ b/apps/meteor/client/views/admin/integrations/NewZapier.tsx @@ -1,6 +1,6 @@ import { Box, Skeleton, Margins, Callout } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; const blogSpotStyleScriptImport = (src: string) => new Promise((resolve) => { @@ -16,7 +16,7 @@ const blogSpotStyleScriptImport = (src: string) => }); const NewZapier = ({ ...props }) => { - const t = useTranslation(); + const { t } = useTranslation(); const [script, setScript] = useState(); useEffect(() => { diff --git a/apps/meteor/client/views/admin/integrations/outgoing/OutgoingWebhookForm.tsx b/apps/meteor/client/views/admin/integrations/outgoing/OutgoingWebhookForm.tsx index e8843fbe753e4..8abd6c82356f6 100644 --- a/apps/meteor/client/views/admin/integrations/outgoing/OutgoingWebhookForm.tsx +++ b/apps/meteor/client/views/admin/integrations/outgoing/OutgoingWebhookForm.tsx @@ -18,9 +18,9 @@ import { } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; import { useFormContext, Controller } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { outgoingEvents } from '../../../../../app/integrations/lib/outgoingEvents'; import { useHighlightedCode } from '../../../../hooks/useHighlightedCode'; @@ -52,7 +52,7 @@ type EditOutgoingWebhookPayload = Pick< >; const OutgoingWebhookForm = () => { - const t = useTranslation(); + const { t } = useTranslation(); const { control, @@ -179,7 +179,10 @@ const OutgoingWebhookForm = () => { @@ -223,7 +226,10 @@ const OutgoingWebhookForm = () => { diff --git a/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryContent.tsx b/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryContent.tsx index 7d0ce037c700a..a0ad98a8efb9b 100644 --- a/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryContent.tsx +++ b/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryContent.tsx @@ -1,12 +1,12 @@ import type { IIntegrationHistory, Serialized } from '@rocket.chat/core-typings'; import { Skeleton, Box, Accordion } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import HistoryItem from './HistoryItem'; const HistoryContent = ({ data, isLoading }: { data: Serialized[]; isLoading: boolean }) => { - const t = useTranslation(); + const { t } = useTranslation(); if (isLoading) { return ( diff --git a/apps/meteor/client/views/admin/moderation/MessageContextFooter.tsx b/apps/meteor/client/views/admin/moderation/MessageContextFooter.tsx index 878b4d84f5072..a78627685cc0b 100644 --- a/apps/meteor/client/views/admin/moderation/MessageContextFooter.tsx +++ b/apps/meteor/client/views/admin/moderation/MessageContextFooter.tsx @@ -1,7 +1,7 @@ import { Button, ButtonGroup, Box } from '@rocket.chat/fuselage'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import useDeactivateUserAction from './hooks/useDeactivateUserAction'; import useDeleteMessagesAction from './hooks/useDeleteMessagesAction'; @@ -11,7 +11,7 @@ import useResetAvatarAction from './hooks/useResetAvatarAction'; type MessageContextFooterProps = { userId: string; deleted: boolean }; const MessageContextFooter = ({ userId, deleted }: MessageContextFooterProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const dismissUserAction = useDismissUserAction(userId); const deleteMessagesAction = useDeleteMessagesAction(userId); diff --git a/apps/meteor/client/views/admin/moderation/ModerationConsoleActions.tsx b/apps/meteor/client/views/admin/moderation/ModerationConsoleActions.tsx index 85d081e652da8..7051a737b8368 100644 --- a/apps/meteor/client/views/admin/moderation/ModerationConsoleActions.tsx +++ b/apps/meteor/client/views/admin/moderation/ModerationConsoleActions.tsx @@ -1,7 +1,7 @@ // import { Menu, Option } from '@rocket.chat/fuselage'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import type { ModerationConsoleRowProps } from './ModerationConsoleTableRow'; import useDeactivateUserAction from './hooks/useDeactivateUserAction'; @@ -10,7 +10,7 @@ import useDismissUserAction from './hooks/useDismissUserAction'; import useResetAvatarAction from './hooks/useResetAvatarAction'; const ModerationConsoleActions = ({ report, onClick }: Omit): JSX.Element => { - const t = useTranslation(); + const { t } = useTranslation(); const { userId: uid, isUserDeleted } = report; return ( diff --git a/apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUserActions.tsx b/apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUserActions.tsx index 13da70b48da28..21128ff72fd3f 100644 --- a/apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUserActions.tsx +++ b/apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUserActions.tsx @@ -1,6 +1,6 @@ import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import useDeactivateUserAction from '../hooks/useDeactivateUserAction'; import useDismissUserAction from '../hooks/useDismissUserAction'; @@ -8,7 +8,7 @@ import useResetAvatarAction from '../hooks/useResetAvatarAction'; import type { ModConsoleUserRowProps } from './ModConsoleUserTableRow'; const ModConsoleUserActions = ({ report, onClick }: Omit) => { - const t = useTranslation(); + const { t } = useTranslation(); const { reportedUser: { _id: uid }, } = report; diff --git a/apps/meteor/client/views/admin/moderation/UserReports/UserContextFooter.tsx b/apps/meteor/client/views/admin/moderation/UserReports/UserContextFooter.tsx index c437746ad8ef5..496ff07e4524e 100644 --- a/apps/meteor/client/views/admin/moderation/UserReports/UserContextFooter.tsx +++ b/apps/meteor/client/views/admin/moderation/UserReports/UserContextFooter.tsx @@ -1,7 +1,7 @@ import { Button, ButtonGroup, Box } from '@rocket.chat/fuselage'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import useDeactivateUserAction from '../hooks/useDeactivateUserAction'; import useDismissUserAction from '../hooks/useDismissUserAction'; @@ -10,7 +10,7 @@ import useResetAvatarAction from '../hooks/useResetAvatarAction'; type UserContextFooterProps = { userId: string; deleted: boolean }; const UserContextFooter = ({ userId, deleted }: UserContextFooterProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const dismissUserAction = useDismissUserAction(userId, true); const deactivateUserAction = useDeactivateUserAction(userId, true); diff --git a/apps/meteor/client/views/admin/moderation/helpers/DateRangePicker.tsx b/apps/meteor/client/views/admin/moderation/helpers/DateRangePicker.tsx index 74d3f206c8caa..9da6a25ff863d 100644 --- a/apps/meteor/client/views/admin/moderation/helpers/DateRangePicker.tsx +++ b/apps/meteor/client/views/admin/moderation/helpers/DateRangePicker.tsx @@ -1,8 +1,8 @@ import { Select, Box, type SelectOption } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import moment, { type Moment } from 'moment'; import React, { useMemo, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; type DateRangePickerProps = { onChange(range: { start: string; end: string }): void; @@ -23,7 +23,7 @@ const getWeekRange = (daysToSubtractFromStart: number, daysToSubtractFromEnd: nu }); const DateRangePicker = ({ onChange }: DateRangePickerProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const handleRange = useMutableCallback((range) => { onChange(range); diff --git a/apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx b/apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx index 5414e3d06aa54..aaad5d0c4ebd3 100644 --- a/apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx +++ b/apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx @@ -1,5 +1,5 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import FilterByText from '../../../../components/FilterByText'; import DateRangePicker from './DateRangePicker'; @@ -10,7 +10,7 @@ type ModerationFilterProps = { }; const ModerationFilter = ({ setText, setDateRange }: ModerationFilterProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/admin/moderation/helpers/ReportReasonCollapsible.tsx b/apps/meteor/client/views/admin/moderation/helpers/ReportReasonCollapsible.tsx index c22062228839e..13c26dc622230 100644 --- a/apps/meteor/client/views/admin/moderation/helpers/ReportReasonCollapsible.tsx +++ b/apps/meteor/client/views/admin/moderation/helpers/ReportReasonCollapsible.tsx @@ -1,12 +1,12 @@ import { Box, Button } from '@rocket.chat/fuselage'; import { useToggle } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; import type { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; const ReportReasonCollapsible = ({ children }: { children: ReactNode }) => { const [isOpen, setIsOpen] = useToggle(false); - const t = useTranslation(); + const { t } = useTranslation(); const toggle = () => setIsOpen((prev) => !prev); diff --git a/apps/meteor/client/views/admin/permissions/CustomRoleUpsellModal.tsx b/apps/meteor/client/views/admin/permissions/CustomRoleUpsellModal.tsx index 6d03af10c8b4b..ad782e021720c 100644 --- a/apps/meteor/client/views/admin/permissions/CustomRoleUpsellModal.tsx +++ b/apps/meteor/client/views/admin/permissions/CustomRoleUpsellModal.tsx @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericUpsellModal from '../../../components/GenericUpsellModal'; import { useUpsellActions } from '../../../components/GenericUpsellModal/hooks'; const CustomRoleUpsellModal = ({ onClose }: { onClose: () => void }) => { - const t = useTranslation(); + const { t } = useTranslation(); const { handleManageSubscription } = useUpsellActions(); return ( diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx index 300d80f4f51cc..7ddd6ca9ab45a 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx @@ -1,16 +1,17 @@ import type { IRole, IPermission } from '@rocket.chat/core-typings'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import type { TFunction } from 'i18next'; import type { ReactElement } from 'react'; import React, { useState, memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { CONSTANTS } from '../../../../../app/authorization/lib'; import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; import { useChangeRole } from '../hooks/useChangeRole'; import RoleCell from './RoleCell'; -const getName = (t: ReturnType, permission: IPermission): string => { +const getName = (t: TFunction, permission: IPermission): string => { if (permission.level === CONSTANTS.SETTINGS_LEVEL) { let path = ''; if (permission.group) { @@ -33,7 +34,7 @@ type PermissionRowProps = { }; const PermissionRow = ({ permission, roleList, onGrant, onRemove }: PermissionRowProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { _id, roles } = permission; const [hovered, setHovered] = useState(false); const changeRole = useChangeRole({ onGrant, onRemove, permissionId: _id }); diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx index 2926ef82124eb..52f3a53704932 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx @@ -1,11 +1,11 @@ import { TextInput } from '@rocket.chat/fuselage'; import { useMutableCallback, useDebouncedValue } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useState, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; const PermissionsTableFilter = ({ onChange }: { onChange: (debouncedFilter: string) => void }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const [filter, setFilter] = useState(''); const debouncedFilter = useDebouncedValue(filter, 500); diff --git a/apps/meteor/client/views/admin/permissions/RoleForm.tsx b/apps/meteor/client/views/admin/permissions/RoleForm.tsx index 17b1381f1af27..bba5dfe95e389 100644 --- a/apps/meteor/client/views/admin/permissions/RoleForm.tsx +++ b/apps/meteor/client/views/admin/permissions/RoleForm.tsx @@ -1,9 +1,9 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { Field, FieldLabel, FieldRow, FieldError, FieldHint, TextInput, Select, ToggleSwitch } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; import { useFormContext, Controller } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; type RoleFormProps = { className?: string; @@ -13,7 +13,7 @@ type RoleFormProps = { }; const RoleForm = ({ className, editing = false, isProtected = false, isDisabled = false }: RoleFormProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { register, control, diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx index 4e860ca8f7596..f05c708fd0fbd 100644 --- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx +++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx @@ -2,9 +2,9 @@ import type { IUserInRole } from '@rocket.chat/core-typings'; import { Box, IconButton } from '@rocket.chat/fuselage'; import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { getUserEmailAddress } from '../../../../../../lib/getUserEmailAddress'; import { GenericTableRow, GenericTableCell } from '../../../../../components/GenericTable'; @@ -15,7 +15,7 @@ type UsersInRoleTableRowProps = { }; const UsersInRoleTableRow = ({ user, onRemove }: UsersInRoleTableRowProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { _id, name, username, avatarETag } = user; const email = getUserEmailAddress(user); diff --git a/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx b/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx index 5d84c451df9a3..2ec88c90031bc 100644 --- a/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx +++ b/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx @@ -1,9 +1,9 @@ import { Box, Icon, TextInput } from '@rocket.chat/fuselage'; import type { OptionProp } from '@rocket.chat/ui-client'; import { MultiSelectCustom } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useCallback, useMemo, useState } from 'react'; import type { Dispatch, ReactElement, SetStateAction } from 'react'; +import { useTranslation } from 'react-i18next'; const initialRoomTypeFilterStructure = [ { @@ -44,7 +44,7 @@ const initialRoomTypeFilterStructure = [ ] as OptionProp[]; const RoomsTableFilters = ({ setFilters }: { setFilters: Dispatch> }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const [text, setText] = useState(''); const [roomTypeSelectedOptions, setRoomTypeSelectedOptions] = useState([]); diff --git a/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.tsx b/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.tsx index c4cf47c109fcb..a6dff7cc80479 100644 --- a/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.tsx @@ -1,11 +1,11 @@ import type { Button } from '@rocket.chat/fuselage'; import { IconButton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; function ResetSettingButton(props: ComponentProps): ReactElement { - const t = useTranslation(); + const { t } = useTranslation(); return ; } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirrorBox.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirrorBox.tsx index fd96d715a837b..ad62903b1cc16 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirrorBox.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirrorBox.tsx @@ -1,12 +1,12 @@ import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage'; import { useToggle } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; import React from 'react'; import { createPortal } from 'react-dom'; +import { useTranslation } from 'react-i18next'; const CodeMirrorBox = ({ label, children }: { label: ReactNode; children: ReactElement }) => { - const t = useTranslation(); + const { t } = useTranslation(); const [fullScreen, toggleFullScreen] = useToggle(false); if (fullScreen) { diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx index dab9e63f7435c..bfb10a54cbf9b 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx @@ -1,8 +1,8 @@ import { FieldLabel, FieldRow, FieldHint, Flex, InputBox, Margins, TextInput, Select, Field } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import ResetSettingButton from '../ResetSettingButton'; import type { SettingInputProps } from './types'; @@ -29,7 +29,7 @@ function ColorSettingInput({ onChangeEditor, onResetButtonClick, }: ColorSettingInputProps): ReactElement { - const t = useTranslation(); + const { t } = useTranslation(); const handleChange = useCallback( (event) => { diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx index a484dc1133f0f..b844f496b5ba2 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx @@ -1,8 +1,8 @@ import { FieldLabel, MultiSelectFiltered, MultiSelect, Field, FieldRow } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import ResetSettingButton from '../ResetSettingButton'; import type { SettingInputProps } from './types'; @@ -26,7 +26,7 @@ function MultiSelectSettingInput({ onResetButtonClick, autocomplete, }: MultiSelectSettingInputProps): ReactElement { - const t = useTranslation(); + const { t } = useTranslation(); const handleChange = (value: string[]): void => { onChangeValue?.(value); diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.tsx index 2ace88fda2cb6..0364dcb11a4e8 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.tsx @@ -1,8 +1,8 @@ import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import ResetSettingButton from '../ResetSettingButton'; import type { SettingInputProps } from './types'; @@ -25,7 +25,7 @@ function SelectSettingInput({ onChangeValue, onResetButtonClick, }: SelectSettingInputProps): ReactElement { - const t = useTranslation(); + const { t } = useTranslation(); const handleChange = (value: string): void => { onChangeValue?.(value); diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.spec.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.spec.tsx index 975a3171cbbf6..e16bbd18a6aa2 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.spec.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.spec.tsx @@ -1,3 +1,4 @@ +import { mockAppRoot } from '@rocket.chat/mock-providers'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; @@ -52,7 +53,7 @@ describe('TimespanSettingInput component', () => { placeholder='Enter timespan' onChangeValue={onChangeValueMock} />, - { legacyRoot: true }, + { wrapper: mockAppRoot().build(), legacyRoot: true }, ); const numberInput = screen.getByRole('spinbutton'); @@ -74,7 +75,7 @@ describe('TimespanSettingInput component', () => { placeholder='Enter timespan' onChangeValue={onChangeValueMock} />, - { legacyRoot: true }, + { wrapper: mockAppRoot().build(), legacyRoot: true }, ); const selectInput = screen.getByRole('button', { name: 'hours' }); @@ -99,7 +100,7 @@ describe('TimespanSettingInput component', () => { placeholder='Enter timespan' onChangeValue={onChangeValueMock} />, - { legacyRoot: true }, + { wrapper: mockAppRoot().build(), legacyRoot: true }, ); const selectInput = screen.getByRole('button', { name: 'days' }); @@ -124,7 +125,7 @@ describe('TimespanSettingInput component', () => { placeholder='Enter timespan' onChangeValue={onChangeValueMock} />, - { legacyRoot: true }, + { wrapper: mockAppRoot().build(), legacyRoot: true }, ); const selectInput = screen.getByRole('button', { name: 'hours' }); @@ -150,7 +151,7 @@ describe('TimespanSettingInput component', () => { hasResetButton onResetButtonClick={onResetButtonClickMock} />, - { legacyRoot: true }, + { wrapper: mockAppRoot().build(), legacyRoot: true }, ); const resetButton = screen.getByTitle('Reset'); diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx index b15a353995c9c..3a7a62f13eed6 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx @@ -1,7 +1,7 @@ import { Field, FieldLabel, FieldRow, InputBox, Select } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { FormEventHandler, ReactElement } from 'react'; import React, { useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { TIMEUNIT, timeUnitToMs, msToTimeUnit } from '../../../../../lib/convertTimeUnit'; import ResetSettingButton from '../ResetSettingButton'; @@ -49,7 +49,7 @@ function TimespanSettingInput({ onResetButtonClick, packageValue, }: TimespanSettingInputProps): ReactElement { - const t = useTranslation(); + const { t, i18n } = useTranslation(); const [timeUnit, setTimeUnit] = useState(getHighestTimeUnit(Number(value))); const [internalValue, setInternalValue] = useState(msToTimeUnit(timeUnit, Number(value))); @@ -71,7 +71,7 @@ function TimespanSettingInput({ }; const timeUnitOptions = useMemo(() => { - return Object.entries(TIMEUNIT).map(([label, value]) => [value, t.has(label) ? t(label) : label]); // todo translate + return Object.entries(TIMEUNIT).map(([label, value]) => [value, i18n.exists(label) ? t(label) : label]); // todo translate }, [t]); const handleResetButtonClick = () => { diff --git a/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx index d26d80e88637c..de575dbad3021 100644 --- a/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx +++ b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx @@ -2,9 +2,9 @@ import { isSetting, isSettingColor } from '@rocket.chat/core-typings'; import { Accordion, Box, Button, FieldGroup } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useEditableSettings, useEditableSettingsDispatch } from '../../EditableSettingsContext'; import Setting from '../Setting'; @@ -20,7 +20,7 @@ type SettingsSectionProps = { }; function SettingsSection({ groupId, hasReset = true, sectionName, currentTab, solo, help, children }: SettingsSectionProps): ReactElement { - const t = useTranslation(); + const { t } = useTranslation(); const editableSettings = useEditableSettings( useMemo( diff --git a/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/CreateOAuthModal.tsx b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/CreateOAuthModal.tsx index 4c7360d8f6005..98357b149383e 100644 --- a/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/CreateOAuthModal.tsx +++ b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/CreateOAuthModal.tsx @@ -1,7 +1,7 @@ import { TextInput, Field, FieldLabel, FieldRow, FieldError, Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, FormEvent, SyntheticEvent } from 'react'; import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../../../../components/GenericModal'; @@ -13,7 +13,7 @@ type CreateOAuthModalProps = { const CreateOAuthModal = ({ onConfirm, onClose }: CreateOAuthModalProps): ReactElement => { const [text, setText] = useState(''); const [error, setError] = useState(''); - const t = useTranslation(); + const { t } = useTranslation(); const handleConfirm = (e: SyntheticEvent): void => { e.preventDefault(); diff --git a/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx index 782bf34122bcb..1a3c122502cff 100644 --- a/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx +++ b/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx @@ -1,8 +1,8 @@ import { Tabs, TabsItem } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { memo, useState, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useEditableSettingsGroupSections } from '../../EditableSettingsContext'; import GenericGroupPage from './GenericGroupPage'; @@ -16,7 +16,7 @@ type TabbedGroupPageProps = { }; function TabbedGroupPage({ _id, tabs, i18nLabel, onClickBack, ...props }: TabbedGroupPageProps) { - const t = useTranslation(); + const { t } = useTranslation(); const [currentTab, setCurrentTab] = useState(tabs[0]); const handleTabClick = useMemo(() => (tab: string) => (): void => setCurrentTab(tab), [setCurrentTab]); diff --git a/apps/meteor/client/views/admin/users/AdminUserFormWithData.tsx b/apps/meteor/client/views/admin/users/AdminUserFormWithData.tsx index db51f1401f328..749b75903827b 100644 --- a/apps/meteor/client/views/admin/users/AdminUserFormWithData.tsx +++ b/apps/meteor/client/views/admin/users/AdminUserFormWithData.tsx @@ -1,9 +1,9 @@ import type { IRole, IUser } from '@rocket.chat/core-typings'; import { Box, Callout } from '@rocket.chat/fuselage'; import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { FormSkeleton } from '../../../components/Skeleton'; import { useUserInfoQuery } from '../../../hooks/useUserInfoQuery'; @@ -18,7 +18,7 @@ type AdminUserFormWithDataProps = { }; const AdminUserFormWithData = ({ uid, onReload, context, roleData, roleError }: AdminUserFormWithDataProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { data, isLoading, isError, refetch } = useUserInfoQuery({ userId: uid }); const handleReload = useEffectEvent(() => { diff --git a/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordRadios.tsx b/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordRadios.tsx index bc773428608a2..5d9c72f515cb2 100644 --- a/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordRadios.tsx +++ b/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordRadios.tsx @@ -1,9 +1,9 @@ import { Box, FieldHint, FieldLabel, FieldRow, RadioButton } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; import type { Control, UseFormSetValue } from 'react-hook-form'; import { Controller } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import type { UserFormProps } from './AdminUserForm'; @@ -22,7 +22,7 @@ const AdminUserSetRandomPasswordRadios = ({ setRandomPasswordId, setValue, }: AdminUserSetRandomPasswordProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const setPasswordManuallyId = useUniqueId(); diff --git a/apps/meteor/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.tsx b/apps/meteor/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.tsx index 4aadae11946e3..07db15e848737 100644 --- a/apps/meteor/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.tsx +++ b/apps/meteor/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.tsx @@ -1,6 +1,6 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericResourceUsage } from '../../../../components/GenericResourceUsage'; @@ -10,7 +10,7 @@ type SeatsCapUsageProps = { }; const SeatsCapUsage = ({ limit, members }: SeatsCapUsageProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const percentage = Math.max(0, Math.min((100 / limit) * members, 100)); const seatsLeft = Math.max(0, limit - members); diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx index 65faed40e2d72..47c08815c6f84 100644 --- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx +++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx @@ -3,9 +3,9 @@ import type { IRole, IUser, Serialized } from '@rocket.chat/core-typings'; import { Box, Button, Menu, Option } from '@rocket.chat/fuselage'; import type { DefaultUserInfo } from '@rocket.chat/rest-typings'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { Roles } from '../../../../../app/models/client/models/Roles'; import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; @@ -40,7 +40,7 @@ const UsersTableRow = ({ onClick, onReload, }: UsersTableRowProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { _id, emails, username = '', name = '', roles, status, active, avatarETag, lastLogin, type, freeSwitchExtension } = user; const registrationStatusText = useMemo(() => { diff --git a/apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx b/apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx index efd1846c09d34..836f5bbf1d22a 100644 --- a/apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx +++ b/apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx @@ -1,11 +1,11 @@ import { Box, Icon, Skeleton, Scrollable } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useStatistics } from '../../hooks/useStatistics'; const AnalyticsReports = () => { - const t = useTranslation(); + const { t } = useTranslation(); const { data, isLoading, isSuccess, isError } = useStatistics(); diff --git a/apps/meteor/client/views/admin/viewLogs/ViewLogsPage.tsx b/apps/meteor/client/views/admin/viewLogs/ViewLogsPage.tsx index 8d81186792359..818713898b200 100644 --- a/apps/meteor/client/views/admin/viewLogs/ViewLogsPage.tsx +++ b/apps/meteor/client/views/admin/viewLogs/ViewLogsPage.tsx @@ -1,14 +1,14 @@ import { Margins, Tabs } 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 { Page, PageHeader, PageContent } from '../../../components/Page'; import AnalyticsReports from './AnalyticsReports'; import ServerLogs from './ServerLogs'; const ViewLogsPage = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const [tab, setTab] = useState('Logs'); return ( diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/InstancesModal.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/InstancesModal.tsx index e0b22e35f5f18..1394d7497ebd0 100644 --- a/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/InstancesModal.tsx +++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/InstancesModal.tsx @@ -1,7 +1,7 @@ import { Accordion } from '@rocket.chat/fuselage'; import type { IInstance } from '@rocket.chat/rest-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../../../../../components/GenericModal'; import { useFormatDateAndTime } from '../../../../../../hooks/useFormatDateAndTime'; @@ -14,7 +14,7 @@ type InstancesModalProps = { }; const InstancesModal = ({ instances = [], onClose }: InstancesModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const formatDateAndTime = useFormatDateAndTime(); return ( diff --git a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx index 4b3ffd819f810..b608df3ed5c5e 100644 --- a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx +++ b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx @@ -1,8 +1,8 @@ import type { IStats } from '@rocket.chat/core-typings'; import { Card } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import WorkspaceCardSection from '../components/WorkspaceCardSection'; import WorkspaceCardTextSeparator from '../components/WorkspaceCardTextSeparator'; @@ -12,7 +12,7 @@ type MessagesRoomsCardProps = { }; const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/admin/workspace/WorkspacePage.tsx b/apps/meteor/client/views/admin/workspace/WorkspacePage.tsx index d45c01153318b..b3288c1b99c52 100644 --- a/apps/meteor/client/views/admin/workspace/WorkspacePage.tsx +++ b/apps/meteor/client/views/admin/workspace/WorkspacePage.tsx @@ -1,8 +1,8 @@ import type { IWorkspaceInfo, IStats } from '@rocket.chat/core-typings'; import { Box, Button, ButtonGroup, Callout, CardGrid } from '@rocket.chat/fuselage'; import type { IInstance } from '@rocket.chat/rest-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { Page, PageHeader, PageScrollableContentWithShadow } from '../../../components/Page'; import { useIsEnterprise } from '../../../hooks/useIsEnterprise'; @@ -30,7 +30,7 @@ const WorkspacePage = ({ onClickRefreshButton, onClickDownloadInfo, }: WorkspaceStatusPageProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { data } = useIsEnterprise(); diff --git a/apps/meteor/client/views/audit/AuditLogPage.tsx b/apps/meteor/client/views/audit/AuditLogPage.tsx index 10b9d439ff09c..95fbc39abca88 100644 --- a/apps/meteor/client/views/audit/AuditLogPage.tsx +++ b/apps/meteor/client/views/audit/AuditLogPage.tsx @@ -1,12 +1,12 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Page, PageHeader, PageContent } from '../../components/Page'; import AuditLogTable from './components/AuditLogTable'; const AuditLogPage = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/audit/AuditPage.tsx b/apps/meteor/client/views/audit/AuditPage.tsx index ca379883224eb..3dce9be56a8ed 100644 --- a/apps/meteor/client/views/audit/AuditPage.tsx +++ b/apps/meteor/client/views/audit/AuditPage.tsx @@ -1,7 +1,7 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Box, Callout, Margins, States, StatesIcon, StatesSubtitle, StatesTitle, Tabs } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { Page, PageHeader, PageScrollableContentWithShadow } from '../../components/Page'; import MessageListSkeleton from '../../components/message/list/MessageListSkeleton'; @@ -15,7 +15,7 @@ const AuditPage = () => { const [type, setType] = useAuditTab(); const [selectedRoom, setSelectedRoom] = useState(); const auditMutation = useAuditMutation(type); - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/audit/components/AuditFiltersDisplay.tsx b/apps/meteor/client/views/audit/components/AuditFiltersDisplay.tsx index 276d8c355c9b0..39d50edea62ad 100644 --- a/apps/meteor/client/views/audit/components/AuditFiltersDisplay.tsx +++ b/apps/meteor/client/views/audit/components/AuditFiltersDisplay.tsx @@ -1,8 +1,8 @@ import type { IRoom, 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 from 'react'; +import { useTranslation } from 'react-i18next'; import { useFormatDate } from '../../../hooks/useFormatDate'; @@ -16,7 +16,7 @@ type AuditFiltersDisplayProps = { const AuditFiltersDisplay = ({ users, room, startDate, endDate, filters }: AuditFiltersDisplayProps): ReactElement => { const formatDate = useFormatDate(); - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/audit/components/AuditForm.tsx b/apps/meteor/client/views/audit/components/AuditForm.tsx index 5f45ddc2b5fe0..dffaf959f3cd8 100644 --- a/apps/meteor/client/views/audit/components/AuditForm.tsx +++ b/apps/meteor/client/views/audit/components/AuditForm.tsx @@ -1,8 +1,8 @@ import type { IAuditLog, IRoom } from '@rocket.chat/core-typings'; import { Box, Field, FieldLabel, FieldRow, FieldError, TextInput, Button, ButtonGroup } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; import { useController } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import type { AuditFields } from '../hooks/useAuditForm'; import { useAuditForm } from '../hooks/useAuditForm'; @@ -20,7 +20,7 @@ type AuditFormProps = { }; const AuditForm = ({ type, onSubmit, setSelectedRoom }: AuditFormProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const form = useAuditForm(); const { control, handleSubmit, register } = form; diff --git a/apps/meteor/client/views/audit/components/AuditLogEntry.tsx b/apps/meteor/client/views/audit/components/AuditLogEntry.tsx index 8e3f9788880bc..c6c4e204a6824 100644 --- a/apps/meteor/client/views/audit/components/AuditLogEntry.tsx +++ b/apps/meteor/client/views/audit/components/AuditLogEntry.tsx @@ -2,9 +2,9 @@ import type { IAuditLog } from '@rocket.chat/core-typings'; import { Box } from '@rocket.chat/fuselage'; import { useMediaQuery } from '@rocket.chat/fuselage-hooks'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { memo, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericTableRow, GenericTableCell } from '../../../components/GenericTable'; import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime'; @@ -14,7 +14,7 @@ type AuditLogEntryProps = { value: IAuditLog }; const AuditLogEntry = ({ value: { u, results, ts, _id, fields } }: AuditLogEntryProps): ReactElement => { const formatDateAndTime = useFormatDateAndTime(); - const t = useTranslation(); + const { t } = useTranslation(); const { username, name, avatarETag } = u; diff --git a/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx b/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx index c0399d4023490..7eecf145865df 100644 --- a/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx +++ b/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx @@ -1,9 +1,9 @@ import { Box, InputBox, Menu, Margins, Option } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement, ComponentProps, SetStateAction } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import type { DateRange } from '../../utils/dateRange'; @@ -138,7 +138,7 @@ const DateRangePicker = ({ value, onChange, ...props }: DateRangePickerProps): R const minEndDate = startDate; const maxEndDate = useMemo(() => formatToDateInput(new Date()), []); - const t = useTranslation(); + const { t } = useTranslation(); const presets = useMemo( () => diff --git a/apps/meteor/client/views/audit/components/tabs/DirectTab.tsx b/apps/meteor/client/views/audit/components/tabs/DirectTab.tsx index 2a79b3b5270f3..ce2b7e044d3a3 100644 --- a/apps/meteor/client/views/audit/components/tabs/DirectTab.tsx +++ b/apps/meteor/client/views/audit/components/tabs/DirectTab.tsx @@ -1,9 +1,9 @@ import { Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; import type { UseFormReturn } from 'react-hook-form'; import { useController } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import UserAutoCompleteMultiple from '../../../../components/UserAutoCompleteMultiple'; import type { AuditFields } from '../../hooks/useAuditForm'; @@ -13,7 +13,7 @@ type DirectTabProps = { }; const DirectTab = ({ form: { control } }: DirectTabProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { field: usersField, fieldState: usersFieldState } = useController({ name: 'users', diff --git a/apps/meteor/client/views/audit/components/tabs/OmnichannelTab.tsx b/apps/meteor/client/views/audit/components/tabs/OmnichannelTab.tsx index 00d0da8f3e31f..c756b372488c2 100644 --- a/apps/meteor/client/views/audit/components/tabs/OmnichannelTab.tsx +++ b/apps/meteor/client/views/audit/components/tabs/OmnichannelTab.tsx @@ -1,9 +1,9 @@ import { Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; import type { UseFormReturn } from 'react-hook-form'; import { useController } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import AutoCompleteAgent from '../../../../components/AutoCompleteAgent'; import type { AuditFields } from '../../hooks/useAuditForm'; @@ -14,7 +14,7 @@ type OmnichannelTabProps = { }; const OmnichannelTab = ({ form: { control } }: OmnichannelTabProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { field: visitorField, fieldState: visitorFieldState } = useController({ name: 'visitor', diff --git a/apps/meteor/client/views/audit/components/tabs/RoomsTab.tsx b/apps/meteor/client/views/audit/components/tabs/RoomsTab.tsx index 069a907749ac2..d58cc3ccb70d0 100644 --- a/apps/meteor/client/views/audit/components/tabs/RoomsTab.tsx +++ b/apps/meteor/client/views/audit/components/tabs/RoomsTab.tsx @@ -1,9 +1,9 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Field, FieldLabel, FieldRow, FieldError, Icon } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; import type { UseFormReturn } from 'react-hook-form'; import { useController } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import RoomAutoComplete from '../../../../components/RoomAutoComplete'; import type { AuditFields } from '../../hooks/useAuditForm'; @@ -14,7 +14,7 @@ type RoomsTabProps = { }; const RoomsTab = ({ form: { control }, setSelectedRoom }: RoomsTabProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { field: ridField, fieldState: ridFieldState } = useController({ name: 'rid', control, rules: { required: true } }); diff --git a/apps/meteor/client/views/audit/components/tabs/UsersTab.tsx b/apps/meteor/client/views/audit/components/tabs/UsersTab.tsx index 50b372ad32919..652f7a739a66b 100644 --- a/apps/meteor/client/views/audit/components/tabs/UsersTab.tsx +++ b/apps/meteor/client/views/audit/components/tabs/UsersTab.tsx @@ -1,9 +1,9 @@ import { Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; import type { UseFormReturn } from 'react-hook-form'; import { useController } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import UserAutoCompleteMultiple from '../../../../components/UserAutoCompleteMultiple'; import type { AuditFields } from '../../hooks/useAuditForm'; @@ -13,7 +13,7 @@ type UsersTabProps = { }; const UsersTab = ({ form: { control } }: UsersTabProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { field: usersField, fieldState: usersFieldState } = useController({ name: 'users', diff --git a/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx b/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx index a8da354cbbfb9..d3b1e7b342cfd 100644 --- a/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx +++ b/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx @@ -2,9 +2,9 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Box, Throbber } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { MessageComposerAction } from '@rocket.chat/ui-composer'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useEffect, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { AudioRecorder } from '../../../../app/ui/client/lib/recorderjs/AudioRecorder'; import type { ChatAPI } from '../../../lib/chats/ChatAPI'; @@ -19,7 +19,7 @@ type AudioMessageRecorderProps = { }; const AudioMessageRecorder = ({ rid, chatContext, isMicrophoneDenied }: AudioMessageRecorderProps): ReactElement | null => { - const t = useTranslation(); + const { t } = useTranslation(); const [state, setState] = useState<'loading' | 'recording'>('recording'); const [time, setTime] = useState('00:00'); diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx index 2ee6ebb3f2c36..10f0ed5655846 100644 --- a/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx +++ b/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx @@ -1,9 +1,9 @@ import { css } from '@rocket.chat/css-in-js'; import { Box } from '@rocket.chat/fuselage'; import { EmojiPickerLoadMore, EmojiPickerNotFound, EmojiPickerCategoryWrapper } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { MouseEvent, MutableRefObject } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { CUSTOM_CATEGORY } from '../../../../app/emoji/client'; import type { EmojiByCategory, EmojiCategoryPosition } from '../../../../app/emoji/client'; @@ -26,7 +26,7 @@ const EmojiCategoryRow = ({ handleLoadMore, handleSelectEmoji, }: EmojiCategoryRowProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const categoryRowStyle = css` button { diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiPickerCategoryItem.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiPickerCategoryItem.tsx index 701a3eb3872e3..3a8dc80be6de9 100644 --- a/apps/meteor/client/views/composer/EmojiPicker/EmojiPickerCategoryItem.tsx +++ b/apps/meteor/client/views/composer/EmojiPicker/EmojiPickerCategoryItem.tsx @@ -1,7 +1,7 @@ import { IconButton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { AllHTMLAttributes } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import type { EmojiCategory } from '../../../../app/emoji/client'; @@ -47,7 +47,7 @@ const mapCategoryIcon = (category: string) => { }; const EmojiPickerCategoryItem = ({ category, index, active, handleGoToCategory, ...props }: EmojiPickerCategoryItemProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const icon = mapCategoryIcon(category.key); diff --git a/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx b/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx index a42e1b0580b34..152d13bae5dea 100644 --- a/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx +++ b/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx @@ -1,7 +1,7 @@ import { EmojiPickerNotFound } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { MouseEvent } from 'react'; import React, { useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import type { VirtuosoGridHandle } from 'react-virtuoso'; import { VirtuosoGrid } from 'react-virtuoso'; @@ -21,7 +21,7 @@ type SearchingResultProps = { }; const SearchingResult = ({ searchResults, handleSelectEmoji }: SearchingResultProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const ref = useRef(null); if (searchResults.length === 0) { diff --git a/apps/meteor/client/views/directory/RoomTags.tsx b/apps/meteor/client/views/directory/RoomTags.tsx index 780b554bd8fb2..d73c12f2cb629 100644 --- a/apps/meteor/client/views/directory/RoomTags.tsx +++ b/apps/meteor/client/views/directory/RoomTags.tsx @@ -1,11 +1,11 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Box, Margins, Tag } 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'; const RoomTags = ({ room }: { room: IRoom }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/e2e/EnterE2EPasswordModal.tsx b/apps/meteor/client/views/e2e/EnterE2EPasswordModal.tsx index 711b5a6d21a1e..5b5e426518474 100644 --- a/apps/meteor/client/views/e2e/EnterE2EPasswordModal.tsx +++ b/apps/meteor/client/views/e2e/EnterE2EPasswordModal.tsx @@ -1,8 +1,8 @@ import { Box, PasswordInput, Field, FieldGroup, FieldRow, FieldError } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useState, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../components/GenericModal'; @@ -15,7 +15,7 @@ const EnterE2EPasswordModal = ({ onClose: () => void; onCancel: () => void; }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const [password, setPassword] = useState(''); const [passwordError, setPasswordError] = useState(); diff --git a/apps/meteor/client/views/e2e/SaveE2EPasswordModal.tsx b/apps/meteor/client/views/e2e/SaveE2EPasswordModal.tsx index b16837bc3d177..a777ca5b4d990 100644 --- a/apps/meteor/client/views/e2e/SaveE2EPasswordModal.tsx +++ b/apps/meteor/client/views/e2e/SaveE2EPasswordModal.tsx @@ -1,9 +1,9 @@ import { Box, CodeSnippet } from '@rocket.chat/fuselage'; import { useClipboard } from '@rocket.chat/fuselage-hooks'; import { ExternalLink } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../components/GenericModal'; @@ -17,7 +17,7 @@ type SaveE2EPasswordModalProps = { const DOCS_URL = 'https://go.rocket.chat/i/e2ee-guide'; const SaveE2EPasswordModal = ({ randomPassword, onClose, onCancel, onConfirm }: SaveE2EPasswordModalProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { copy, hasCopied } = useClipboard(randomPassword); return ( diff --git a/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx b/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx index bd3b46c6adbd7..345d8914fd7b7 100644 --- a/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx +++ b/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx @@ -1,7 +1,7 @@ import type { Card } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericCard, GenericCardButton } from '../../../components/GenericCard'; import { useExternalLink } from '../../../hooks/useExternalLink'; @@ -11,7 +11,7 @@ const LINUX_APP_URL = 'https://go.rocket.chat/i/hp-desktop-app-linux'; const MAC_APP_URL = 'https://go.rocket.chat/i/hp-desktop-app-mac'; const DesktopAppsCard = (props: Omit, 'type'>): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const handleOpenLink = useExternalLink(); return ( diff --git a/apps/meteor/client/views/home/cards/DocumentationCard.tsx b/apps/meteor/client/views/home/cards/DocumentationCard.tsx index fc50e0aefa3e2..c047006b77fd3 100644 --- a/apps/meteor/client/views/home/cards/DocumentationCard.tsx +++ b/apps/meteor/client/views/home/cards/DocumentationCard.tsx @@ -1,7 +1,7 @@ import type { Card } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericCard, GenericCardButton } from '../../../components/GenericCard'; import { useExternalLink } from '../../../hooks/useExternalLink'; @@ -9,7 +9,7 @@ import { useExternalLink } from '../../../hooks/useExternalLink'; const DOCS_URL = 'https://go.rocket.chat/i/hp-documentation'; const DocumentationCard = (props: Omit, 'type'>): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const handleOpenLink = useExternalLink(); return ( diff --git a/apps/meteor/client/views/home/cards/MobileAppsCard.tsx b/apps/meteor/client/views/home/cards/MobileAppsCard.tsx index fdb3d4044a7d0..47117c448a138 100644 --- a/apps/meteor/client/views/home/cards/MobileAppsCard.tsx +++ b/apps/meteor/client/views/home/cards/MobileAppsCard.tsx @@ -1,7 +1,7 @@ import type { Card } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericCard, GenericCardButton } from '../../../components/GenericCard'; import { useExternalLink } from '../../../hooks/useExternalLink'; @@ -10,7 +10,7 @@ const GOOGLE_PLAY_URL = 'https://go.rocket.chat/i/hp-mobile-app-google'; const APP_STORE_URL = 'https://go.rocket.chat/i/hp-mobile-app-apple'; const MobileAppsCard = (props: Omit, 'type'>): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const handleOpenLink = useExternalLink(); return ( diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageHeader.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageHeader.tsx index a4a65f061252d..f1cc36f9dabef 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageHeader.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageHeader.tsx @@ -1,10 +1,10 @@ import type { App } from '@rocket.chat/core-typings'; import { Box, Tag } from '@rocket.chat/fuselage'; import { AppAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import AppMenu from '../AppMenu'; import BundleChips from '../BundleChips'; @@ -18,7 +18,7 @@ const versioni18nKey = (app: App): string => { }; const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { iconFileData, name, diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetails.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetails.tsx index 5f3e427b83917..5d20900078a46 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetails.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetails.tsx @@ -1,9 +1,9 @@ import { Box, Callout, Chip, Margins } from '@rocket.chat/fuselage'; import { ExternalLink } from '@rocket.chat/ui-client'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import DOMPurify from 'dompurify'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import ScreenshotCarouselAnchor from '../../../components/ScreenshotCarouselAnchor'; import type { AppInfo } from '../../../definitions/AppInfo'; @@ -19,7 +19,7 @@ type AppDetailsProps = { }; const AppDetails = ({ app }: AppDetailsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { author: { homepage, support } = {}, detailedDescription, diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx index a653a22478a88..278a72345ddab 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx @@ -1,7 +1,7 @@ import { Accordion, Box } 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 { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime'; import AccordionLoading from '../../../components/AccordionLoading'; @@ -9,7 +9,7 @@ import { useLogs } from '../../../hooks/useLogs'; import AppLogsItem from './AppLogsItem'; const AppLogs = ({ id }: { id: string }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const formatDateAndTime = useFormatDateAndTime(); const { data, isSuccess, isError, isLoading } = useLogs(id); diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.tsx index dbbf4bf5b67a7..d1d258006a12e 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.tsx @@ -1,7 +1,7 @@ import type { ILogEntry } from '@rocket.chat/core-typings'; import { Box, Accordion } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import AppLogsItemEntry from './AppLogsItemEntry'; @@ -12,7 +12,7 @@ type AppLogsItemProps = { }; const AppLogsItem = ({ entries, instanceId, title, ...props }: AppLogsItemProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItemEntry.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItemEntry.tsx index 986d2eec96867..ee16fe1b57566 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItemEntry.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItemEntry.tsx @@ -1,6 +1,6 @@ import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useHighlightedCode } from '../../../../../hooks/useHighlightedCode'; @@ -12,7 +12,7 @@ type AppLogsItemEntryProps = { }; const AppLogsItemEntry = ({ severity, timestamp, caller, args }: AppLogsItemEntryProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppReleases/AppReleasesItem.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppReleases/AppReleasesItem.tsx index 974b6d148e611..3269c1113d0d0 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppReleases/AppReleasesItem.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppReleases/AppReleasesItem.tsx @@ -1,8 +1,8 @@ import { Accordion, Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import DOMPurify from 'dompurify'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useTimeAgo } from '../../../../../hooks/useTimeAgo'; import { purifyOptions } from '../../../lib/purifyOptions'; @@ -21,7 +21,7 @@ type ReleaseItemProps = { }; const AppReleasesItem = ({ release, ...props }: ReleaseItemProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const formatDate = useTimeAgo(); const title = ( diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurity.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurity.tsx index baaf65356a8e9..5554bde2651c7 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurity.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurity.tsx @@ -1,8 +1,8 @@ import type { AppPermission } from '@rocket.chat/core-typings'; import { Box, Margins } 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 AppPermissionsList from '../../../components/AppPermissionsList'; import AppSecurityLabel from './AppSecurityLabel'; @@ -15,7 +15,7 @@ type AppSecurityProps = { }; const AppSecurity = ({ privacyPolicySummary, appPermissions, tosLink, privacyLink }: AppSecurityProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSettings.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSettings.tsx index 00dc564ed05d0..59080c7f32377 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSettings.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSettings.tsx @@ -1,12 +1,12 @@ import { Box, FieldGroup } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import type { ISettings } from '../../../../../apps/@types/IOrchestrator'; import AppSetting from './AppSetting'; const AppSettings = ({ settings }: { settings: ISettings }) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( <> diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatusPriceDisplay.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatusPriceDisplay.tsx index 6981d1b6a810a..00621bdbdc903 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatusPriceDisplay.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatusPriceDisplay.tsx @@ -1,7 +1,7 @@ import type { AppPricingPlan, PurchaseType } from '@rocket.chat/core-typings'; import { Box, Margins, Tag } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { formatPriceAndPurchaseType } from '../../../helpers/formatPriceAndPurchaseType'; @@ -14,7 +14,7 @@ type AppStatusPriceDisplayProps = { }; const AppStatusPriceDisplay = ({ purchaseType, pricingPlans, price, showType = true }: AppStatusPriceDisplayProps) => { - const t = useTranslation(); + const { t, i18n } = useTranslation(); const { type, price: formattedPrice } = useMemo( () => formatPriceAndPurchaseType(purchaseType, pricingPlans, price), @@ -24,7 +24,7 @@ const AppStatusPriceDisplay = ({ purchaseType, pricingPlans, price, showType = t return ( - {showType && {t.has(type) ? t(type) : type}} + {showType && {i18n.exists(type) ? t(type) : type}} {!showType && type === 'Free' ? t(type) : formattedPrice} diff --git a/apps/meteor/client/views/marketplace/AppMenu.tsx b/apps/meteor/client/views/marketplace/AppMenu.tsx index a1d3942ee3045..9f49b7d75a5b8 100644 --- a/apps/meteor/client/views/marketplace/AppMenu.tsx +++ b/apps/meteor/client/views/marketplace/AppMenu.tsx @@ -1,8 +1,8 @@ import type { App } from '@rocket.chat/core-typings'; import { MenuItem, MenuItemContent, MenuSection, MenuV2, Skeleton } from '@rocket.chat/fuselage'; import { useHandleMenuAction } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import type { AppMenuOption } from './hooks/useAppMenu'; import { useAppMenu } from './hooks/useAppMenu'; @@ -13,7 +13,7 @@ type AppMenuProps = { }; const AppMenu = ({ app, isAppDetailsPage }: AppMenuProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { isLoading, isAdminUser, sections } = useAppMenu(app, isAppDetailsPage); diff --git a/apps/meteor/client/views/marketplace/AppPermissionsReviewModal.tsx b/apps/meteor/client/views/marketplace/AppPermissionsReviewModal.tsx index d9090cd7dc7b6..d06c6bc9f2f51 100644 --- a/apps/meteor/client/views/marketplace/AppPermissionsReviewModal.tsx +++ b/apps/meteor/client/views/marketplace/AppPermissionsReviewModal.tsx @@ -1,7 +1,7 @@ import type { App } from '@rocket.chat/core-typings'; import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../components/GenericModal'; import AppPermissionsList from './components/AppPermissionsList'; @@ -13,7 +13,7 @@ export type AppPermissionsReviewModalProps = { }; const AppPermissionsReviewModal = ({ appPermissions, onCancel, onConfirm }: AppPermissionsReviewModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( void; @@ -8,7 +8,7 @@ type AppUpdateModalProps = { }; const AppUpdateModal = ({ confirm, cancel, ...props }: AppUpdateModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const handleCloseButtonClick = (): void => { cancel(); diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx index 1a31d474134df..caa76c266480a 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx @@ -1,8 +1,8 @@ import { Box } from '@rocket.chat/fuselage'; import { useBreakpoints } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import FilterByText from '../../../components/FilterByText'; import CategoryDropDown from '../components/CategoryFilter/CategoryDropDown'; @@ -43,7 +43,7 @@ const AppsFilters = ({ statusFilterOnSelected, context, }: AppsFiltersProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const isPrivateAppsPage = context === 'private'; const breakpoints = useBreakpoints(); diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsPageConnectionError.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsPageConnectionError.tsx index 1f3f27c7feddb..2729dafafe868 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/AppsPageConnectionError.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/AppsPageConnectionError.tsx @@ -1,10 +1,10 @@ import { Box, States, StatesIcon, StatesTitle, StatesSubtitle, StatesActions, StatesAction } 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'; const AppsPageContentError = ({ onButtonClick }: { onButtonClick: () => void }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentBody.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentBody.tsx index bd41d63245f6a..cdfed9f16ed86 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentBody.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentBody.tsx @@ -2,8 +2,8 @@ import type { App } from '@rocket.chat/core-typings'; import { Box, Pagination } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import type { PaginatedResult } from '@rocket.chat/rest-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import AppsList from '../AppsList'; import FeaturedAppsSections from './FeaturedAppsSections'; @@ -39,7 +39,7 @@ const AppsPageContentBody = ({ paginationProps, noErrorsOcurred, }: AppsPageContentBodyProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const scrollableRef = useRef(null); const appsListId = useUniqueId(); diff --git a/apps/meteor/client/views/marketplace/AppsPage/FeaturedAppsSections.tsx b/apps/meteor/client/views/marketplace/AppsPage/FeaturedAppsSections.tsx index 71d9ac62fcc08..fbc3c99ef4838 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/FeaturedAppsSections.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/FeaturedAppsSections.tsx @@ -1,7 +1,7 @@ import type { App } from '@rocket.chat/core-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import AppsList from '../AppsList'; import normalizeFeaturedApps from '../helpers/normalizeFeaturedApps'; @@ -13,7 +13,7 @@ type FeaturedSectionsProps = { }; const FeaturedAppsSections = ({ appsResult, appsListId }: FeaturedSectionsProps): ReactElement | null => { - const t = useTranslation(); + const { t, i18n } = useTranslation(); const featuredApps = useFeaturedApps(); if (featuredApps.isSuccess) { @@ -24,7 +24,7 @@ const FeaturedAppsSections = ({ appsResult, appsListId }: FeaturedSectionsProps) appsListId={`${appsListId + index}`} key={section.slug} apps={normalizeFeaturedApps(section.apps, appsResult)} - title={t.has(section.i18nLabel) ? t(section.i18nLabel) : section.i18nLabel} + title={i18n.exists(section.i18nLabel) ? t(section.i18nLabel) : section.i18nLabel} /> ))} diff --git a/apps/meteor/client/views/marketplace/AppsPage/NoAppRequestsEmptyState.tsx b/apps/meteor/client/views/marketplace/AppsPage/NoAppRequestsEmptyState.tsx index dc7d77e64a73b..2bdc8608ac14e 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/NoAppRequestsEmptyState.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/NoAppRequestsEmptyState.tsx @@ -1,9 +1,9 @@ import { Box, States, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; const NoAppRequestsEmptyState = () => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppMatchesEmptyState.tsx b/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppMatchesEmptyState.tsx index 9403a24437330..65d0ae1e68fc2 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppMatchesEmptyState.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppMatchesEmptyState.tsx @@ -9,9 +9,9 @@ import { StatesActions, StatesAction, } 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'; type NoInstalledAppMatchesEmptyStateProps = { shouldShowSearchText: boolean; @@ -24,7 +24,7 @@ const NoInstalledAppMatchesEmptyState = ({ text, onButtonClick, }: NoInstalledAppMatchesEmptyStateProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppsEmptyState.tsx b/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppsEmptyState.tsx index a1bdeb90edceb..375f2156e61d2 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppsEmptyState.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppsEmptyState.tsx @@ -1,10 +1,10 @@ import { Box, States, StatesIcon, StatesTitle, StatesSubtitle, StatesActions, StatesAction } 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'; const NoInstalledAppsEmptyState = ({ onButtonClick }: { onButtonClick: () => void }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/marketplace/AppsPage/NoMarketplaceOrInstalledAppMatchesEmptyState.tsx b/apps/meteor/client/views/marketplace/AppsPage/NoMarketplaceOrInstalledAppMatchesEmptyState.tsx index 0dc7e471aee47..bbce0eb71bede 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/NoMarketplaceOrInstalledAppMatchesEmptyState.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/NoMarketplaceOrInstalledAppMatchesEmptyState.tsx @@ -9,9 +9,9 @@ import { StatesSuggestionText, StatesTitle, } 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'; type NoMarketplaceOrInstalledAppMatchesEmptyStateProps = { shouldShowSearchText: boolean; text: string }; @@ -19,7 +19,7 @@ const NoMarketplaceOrInstalledAppMatchesEmptyState = ({ shouldShowSearchText, text, }: NoMarketplaceOrInstalledAppMatchesEmptyStateProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/marketplace/BundleChips.tsx b/apps/meteor/client/views/marketplace/BundleChips.tsx index b3110832145d9..d20f1eacfa35f 100644 --- a/apps/meteor/client/views/marketplace/BundleChips.tsx +++ b/apps/meteor/client/views/marketplace/BundleChips.tsx @@ -1,7 +1,7 @@ import { Tag } 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 type { App } from './types'; @@ -14,7 +14,7 @@ type BundleChipsProps = { }; const BundleChips = ({ bundledIn }: BundleChipsProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const handlePlanName = (label: string): string => { if (label === 'Enterprise') { diff --git a/apps/meteor/client/views/marketplace/IframeModal.tsx b/apps/meteor/client/views/marketplace/IframeModal.tsx index 44616c1f68748..fdf4072286289 100644 --- a/apps/meteor/client/views/marketplace/IframeModal.tsx +++ b/apps/meteor/client/views/marketplace/IframeModal.tsx @@ -1,7 +1,7 @@ import { Box, Modal } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; const iframeMsgListener = (confirm: (data: any) => void, cancel: () => void) => (e: MessageEvent) => { let data; @@ -22,7 +22,7 @@ type IframeModalProps = { } & ComponentProps; const IframeModal = ({ url, confirm, cancel, wrapperHeight = 'x360', ...props }: IframeModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); useEffect(() => { const listener = iframeMsgListener(confirm, cancel); diff --git a/apps/meteor/client/views/marketplace/UnlimitedAppsUpsellModal.tsx b/apps/meteor/client/views/marketplace/UnlimitedAppsUpsellModal.tsx index 33eb6a4960c88..2707c05562a97 100644 --- a/apps/meteor/client/views/marketplace/UnlimitedAppsUpsellModal.tsx +++ b/apps/meteor/client/views/marketplace/UnlimitedAppsUpsellModal.tsx @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericUpsellModal from '../../components/GenericUpsellModal'; import { useUpsellActions } from '../../components/GenericUpsellModal/hooks'; const UnlimitedAppsUpsellModal = ({ onClose }: { onClose: () => void }) => { - const t = useTranslation(); + const { t } = useTranslation(); const { handleManageSubscription, cloudWorkspaceHadTrial } = useUpsellActions(); return ( diff --git a/apps/meteor/client/views/marketplace/components/AppInstallModal/AppInstallModal.tsx b/apps/meteor/client/views/marketplace/components/AppInstallModal/AppInstallModal.tsx index bc16aa9807dd8..7bb95b61f491e 100644 --- a/apps/meteor/client/views/marketplace/components/AppInstallModal/AppInstallModal.tsx +++ b/apps/meteor/client/views/marketplace/components/AppInstallModal/AppInstallModal.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'; import MarkdownText from '../../../../components/MarkdownText'; @@ -21,7 +21,7 @@ const AppInstallationModal = ({ handleConfirm, handleEnableUnlimitedApps, }: AppsInstallationModalProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const getTitle = () => { if (enabled === limit) { diff --git a/apps/meteor/client/views/marketplace/components/AppPermissionsList.tsx b/apps/meteor/client/views/marketplace/components/AppPermissionsList.tsx index 0675295a25951..4e52d996dff1d 100644 --- a/apps/meteor/client/views/marketplace/components/AppPermissionsList.tsx +++ b/apps/meteor/client/views/marketplace/components/AppPermissionsList.tsx @@ -1,9 +1,9 @@ import type { AppPermission } from '@rocket.chat/core-typings'; import { Box } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { Fragment } from 'react'; +import { useTranslation } from 'react-i18next'; const defaultPermissions = [ 'user.read', @@ -36,7 +36,7 @@ const defaultPermissions = [ ]; const AppPermissionsList = ({ appPermissions }: { appPermissions: AppPermission[] | undefined }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const handleAppPermissions = (permission: string): string => t(`Apps_Permissions_${permission.replace('.', '_')}` as TranslationKey); if (appPermissions?.length) { diff --git a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx index b3e43fda942f7..7593323c4a91e 100644 --- a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx +++ b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx @@ -1,9 +1,9 @@ import type { Button } from '@rocket.chat/fuselage'; import { Box, Icon } from '@rocket.chat/fuselage'; import colorTokens from '@rocket.chat/fuselage-tokens/colors.json'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, MouseEventHandler } from 'react'; import React, { forwardRef } from 'react'; +import { useTranslation } from 'react-i18next'; type CategoryDropDownAnchorProps = { selectedCategoriesCount: number; onClick?: MouseEventHandler } & ComponentProps< typeof Button @@ -13,7 +13,7 @@ const CategoryDropDownAnchor = forwardRef { - const t = useTranslation(); + const { t } = useTranslation(); const variant = useMemo(() => { if (enabled + 1 === limit) { diff --git a/apps/meteor/client/views/marketplace/hooks/useCategories.ts b/apps/meteor/client/views/marketplace/hooks/useCategories.ts index 2a6b612470b56..17a7c878e6e4c 100644 --- a/apps/meteor/client/views/marketplace/hooks/useCategories.ts +++ b/apps/meteor/client/views/marketplace/hooks/useCategories.ts @@ -1,5 +1,5 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { AppClientOrchestratorInstance } from '../../../apps/orchestrator'; import type { @@ -14,7 +14,7 @@ import { useCategoryFlatList } from './useCategoryFlatList'; import { useCategoryToggle } from './useCategoryToggle'; export const useCategories = (): [CategoryDropDownGroups, selectedCategoriesList, selectedCategoriesList, CategoryOnSelected] => { - const t = useTranslation(); + const { t } = useTranslation(); const [categories, setCategories] = useState([]); const fetchCategories = useCallback(async (): Promise => { diff --git a/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.tsx b/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.tsx index b5a156b56bf4a..31697eaf460d2 100644 --- a/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.tsx +++ b/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.tsx @@ -1,12 +1,12 @@ import { Box } 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 { Page, PageContent } from '../../components/Page'; const NotAuthorizedPage = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/notFound/NotFoundPage.tsx b/apps/meteor/client/views/notFound/NotFoundPage.tsx index b6c01f05be988..d9fbbe593de11 100644 --- a/apps/meteor/client/views/notFound/NotFoundPage.tsx +++ b/apps/meteor/client/views/notFound/NotFoundPage.tsx @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import NotFoundState from '../../components/NotFoundState'; const NotFoundPage = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ; }; diff --git a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx index 13e1498d7422b..6c2c8663f0d48 100644 --- a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx +++ b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx @@ -1,8 +1,8 @@ import { Pagination } from '@rocket.chat/fuselage'; import { useDebouncedValue, useMediaQuery, useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { hashQueryKey } from '@tanstack/react-query'; import React, { useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import FilterByText from '../../../../components/FilterByText'; import GenericNoResults from '../../../../components/GenericNoResults/GenericNoResults'; @@ -22,7 +22,7 @@ import AgentsTableRow from './AgentsTableRow'; // TODO: missing error state const AgentsTable = () => { - const t = useTranslation(); + const { t } = useTranslation(); const [filter, setFilter] = useState(''); const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address' | 'statusLivechat'>('name'); diff --git a/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.tsx b/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.tsx index 61f952e6f3c34..9862218400050 100644 --- a/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.tsx +++ b/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.tsx @@ -1,7 +1,7 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { Box, Select, Margins, Field, FieldLabel, FieldRow, Label, Option } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo, useState, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment'; import { Page, PageHeader, PageScrollableContentWithShadow } from '../../../components/Page'; @@ -11,7 +11,7 @@ import InterchangeableChart from './InterchangeableChart'; import Overview from './Overview'; const useOptions = (type: string): SelectOption[] => { - const t = useTranslation(); + const { t } = useTranslation(); return useMemo(() => { if (type === 'Conversations') { return [ @@ -30,7 +30,7 @@ const useOptions = (type: string): SelectOption[] => { }; const AnalyticsPage = () => { - const t = useTranslation(); + const { t } = useTranslation(); const [type, setType] = useState('Conversations'); const [department, setDepartment] = useState(null); const [dateRange, setDateRange] = useState({ start: '', end: '' }); diff --git a/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx b/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx index 40c32f4d6980a..d3fd6b8d857a0 100644 --- a/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx +++ b/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx @@ -1,10 +1,10 @@ import { Box, InputBox, Menu, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { Moment } from 'moment'; import moment from 'moment'; import type { ComponentProps } from 'react'; import React, { useState, useMemo, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; moment.locale('en'); @@ -27,7 +27,7 @@ const getWeekRange = (daysToSubtractFromStart: number, daysToSubtractFromEnd: nu }); const DateRangePicker = ({ onChange = () => undefined, ...props }: DateRangePickerProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const [range, setRange] = useState({ start: '', end: '' }); const { start, end } = range; diff --git a/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx b/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx index 9bca1e6589c41..18cfb2e9ce565 100644 --- a/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx +++ b/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx @@ -1,7 +1,7 @@ import { FieldLabel as BaseFieldLabel, Box, Tag } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule'; @@ -11,7 +11,7 @@ type FieldLabelProps = ComponentProps & { }; const FieldLabel = ({ children: label, premium = false }: FieldLabelProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const hasLicense = useHasLicenseModule('livechat-enterprise'); const shouldDisableEnterprise = premium && !hasLicense; diff --git a/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx b/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx index a4435398d9a9b..92bcfc4c5d306 100644 --- a/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx +++ b/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx @@ -13,17 +13,17 @@ import { FieldHint, } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ChangeEvent } from 'react'; import React from 'react'; import { Controller, useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import MarkdownText from '../../../components/MarkdownText'; import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule'; import FieldLabel from './AppearanceFieldLabel'; const AppearanceForm = () => { - const t = useTranslation(); + const { t } = useTranslation(); const isEnterprise = useHasLicenseModule('livechat-enterprise'); const { control, watch } = useFormContext(); diff --git a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.tsx b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.tsx index 2156babf230d2..4f53823aca3f8 100644 --- a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.tsx +++ b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.tsx @@ -2,9 +2,9 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { InputBox, Field, MultiSelect, FieldGroup, Box, Select, FieldLabel, FieldRow, Callout } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; import { useFormContext, Controller, useFieldArray } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { useTimezoneNameList } from '../../../hooks/useTimezoneNameList'; import { BusinessHoursMultiple } from '../additionalForms'; @@ -38,7 +38,7 @@ export type BusinessHoursFormData = { // TODO: add time validation for start and finish not be equal on UI // TODO: add time validation for start not be higher than finish on UI const BusinessHoursForm = ({ type }: { type?: 'default' | 'custom' }) => { - const t = useTranslation(); + const { t } = useTranslation(); const timeZones = useTimezoneNameList(); const timeZonesOptions: SelectOption[] = useMemo(() => timeZones.map((name) => [name, t(name as TranslationKey)]), [t, timeZones]); const daysOptions: SelectOption[] = useMemo(() => DAYS_OF_WEEK.map((day) => [day, t(day as TranslationKey)]), [t]); diff --git a/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryItem.tsx b/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryItem.tsx index 2bfc10ef0dfe7..9296ec2713f7b 100644 --- a/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryItem.tsx +++ b/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryItem.tsx @@ -9,9 +9,9 @@ import { } from '@rocket.chat/fuselage'; import type { VisitorSearchChatsResult } from '@rocket.chat/rest-typings'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { Dispatch, ReactElement, SetStateAction } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime'; import { clickableItem } from '../../../lib/clickableItem'; @@ -22,7 +22,7 @@ type ContactHistoryItemProps = { }; function ContactHistoryItem({ history, setChatId, ...props }: ContactHistoryItemProps): ReactElement { - const t = useTranslation(); + const { t } = useTranslation(); const formatDate = useFormatDateAndTime(); const username = history.servedBy?.username; const hasClosingMessage = !!history.closingMessage?.msg?.trim(); diff --git a/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryList.tsx b/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryList.tsx index ba25d511e1a87..5a1cd52eab3ce 100644 --- a/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryList.tsx +++ b/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryList.tsx @@ -1,7 +1,7 @@ import { Box, Margins, TextInput, Icon, Throbber, States, StatesIcon, StatesTitle, StatesSubtitle } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ChangeEvent, Dispatch, ReactElement, SetStateAction } from 'react'; import React, { useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { Virtuoso } from 'react-virtuoso'; import { @@ -21,7 +21,7 @@ import { useHistoryList } from './useHistoryList'; const ContactHistoryList = ({ setChatId, close }: { setChatId: Dispatch>; close: () => void }): ReactElement => { const [text, setText] = useState(''); - const t = useTranslation(); + const { t } = useTranslation(); const room = useOmnichannelRoom(); const { itemsList: historyList, loadMoreItems } = useHistoryList( useMemo(() => ({ roomId: room._id, filter: text, visitorId: room.v._id }), [room, text]), diff --git a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx index 3c6079c08fd65..2915e4907c7d1 100644 --- a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx +++ b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx @@ -18,8 +18,8 @@ import { MessageSystemTimestamp, } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { getUserDisplayName } from '../../../../../lib/getUserDisplayName'; import MessageContentBody from '../../../../components/message/MessageContentBody'; @@ -38,7 +38,7 @@ type ContactHistoryMessageProps = { }; const ContactHistoryMessage = ({ message, sequential, isNewDay, showUserAvatar }: ContactHistoryMessageProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { triggerProps, openUserCard } = useUserCard(); const format = useFormatDate(); diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx index 27312b9e9fac4..eeca3fb4930dc 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx @@ -1,7 +1,7 @@ import { NumberInput } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; import type { UseFormRegister } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; import type { FormValues, IDepartmentAgent } from '../EditDepartment'; @@ -16,7 +16,7 @@ type AgentRowProps = { }; const AgentRow = ({ index, agent, register, onRemove }: AgentRowProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx index c4e4c7acb7c66..a81e9ffc8584e 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx @@ -1,8 +1,8 @@ import { Pagination } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; import type { Control, UseFormRegister } from 'react-hook-form'; import { useWatch, useFieldArray } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { GenericTable, GenericTableBody, GenericTableHeader, GenericTableHeaderCell } from '../../../../components/GenericTable'; import { usePagination } from '../../../../components/GenericTable/hooks/usePagination'; @@ -16,7 +16,7 @@ type DepartmentAgentsTableProps = { }; function DepartmentAgentsTable({ control, register }: DepartmentAgentsTableProps) { - const t = useTranslation(); + const { t } = useTranslation(); const { fields, append, remove } = useFieldArray({ control, name: 'agentList' }); const agentList = useWatch({ control, name: 'agentList' }); diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx index 53c1afeb4ba7d..c90f3ebe3ee02 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx @@ -1,7 +1,7 @@ import { Button, Chip, FieldRow, TextInput } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, FormEvent } from 'react'; import React, { useCallback, useState } from 'react'; +import { useTranslation } from 'react-i18next'; type DepartmentTagsProps = { error: string; @@ -10,7 +10,7 @@ type DepartmentTagsProps = { } & ComponentProps; const DepartmentTags = ({ error, value: tags, onChange, ...props }: DepartmentTagsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const [tagText, setTagText] = useState(''); const handleAddTag = useCallback(() => { diff --git a/apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx b/apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx index 616baee2b5317..3b01379f18b6e 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx @@ -1,8 +1,8 @@ import type { IVoipRoom, Serialized } from '@rocket.chat/core-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement } from 'react'; import React, { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; import { useIsCallReady } from '../../../../contexts/CallContext'; @@ -15,7 +15,7 @@ type CallTableRowProps = { }; export const CallTableRow = ({ room, onRowClick }: CallTableRowProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const isCallReady = useIsCallReady(); const { _id, fname, callStarted, queue, callDuration = 0, v, direction } = room; diff --git a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx index dab51528dc49c..75f6d1d5c3bda 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx @@ -1,10 +1,10 @@ import type { IVoipRoom } from '@rocket.chat/core-typings'; import { Box, Icon, Chip, ButtonGroup } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { ContextualbarIcon, @@ -30,7 +30,7 @@ type VoipInfoPropsType = { }; export const VoipInfo = ({ room, onClickClose /* , onClickReport */ }: VoipInfoPropsType): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const isCallReady = useIsCallReady(); const { servedBy, queue, v, fname, name, callDuration, callTotalHoldTime, closedAt, callWaitingTime, tags, lastMessage } = room; diff --git a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfoCallButton.tsx b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfoCallButton.tsx index 294a508fbc4fa..5af57d8e4366d 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfoCallButton.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfoCallButton.tsx @@ -1,7 +1,7 @@ import { Button } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useVoipOutboundStates } from '../../../../../contexts/CallContext'; import { useDialModal } from '../../../../../hooks/useDialModal'; @@ -14,7 +14,7 @@ type VoipInfoCallButtonProps = Exclude< }; export const VoipInfoCallButton = ({ phoneNumber, ...props }: VoipInfoCallButtonProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { openDialModal } = useDialModal(); diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/DepartmentField.tsx b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/DepartmentField.tsx index a12bba2369659..d04330aa57b37 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/DepartmentField.tsx +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/DepartmentField.tsx @@ -1,6 +1,6 @@ import { Box, Skeleton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import Field from '../../../components/Field'; import Info from '../../../components/Info'; @@ -12,7 +12,7 @@ type DepartmentFieldProps = { }; const DepartmentField = ({ departmentId }: DepartmentFieldProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { data, isLoading, isError } = useDepartmentInfo(departmentId); return ( diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/RoomEdit/RoomEditWithData.tsx b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/RoomEdit/RoomEditWithData.tsx index aeca1de732022..e2c053fe90ab3 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/RoomEdit/RoomEditWithData.tsx +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/RoomEdit/RoomEditWithData.tsx @@ -1,6 +1,6 @@ import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { FormSkeleton } from '../../../components'; import { useOmnichannelRoomInfo } from '../../../hooks/useOmnichannelRoomInfo'; @@ -15,7 +15,7 @@ type RoomEditWithDataProps = { }; function RoomEditWithData({ id: roomId, reload, reloadInfo, onClose }: RoomEditWithDataProps) { - const t = useTranslation(); + const { t } = useTranslation(); const { data: room, isLoading: isRoomLoading, isError: isRoomError } = useOmnichannelRoomInfo(roomId); const { _id: visitorId } = room?.v ?? {}; diff --git a/apps/meteor/client/views/omnichannel/directory/components/CallDialpadButton.tsx b/apps/meteor/client/views/omnichannel/directory/components/CallDialpadButton.tsx index a250a005e243b..4c68389a96046 100644 --- a/apps/meteor/client/views/omnichannel/directory/components/CallDialpadButton.tsx +++ b/apps/meteor/client/views/omnichannel/directory/components/CallDialpadButton.tsx @@ -1,8 +1,8 @@ import { css } from '@rocket.chat/css-in-js'; import { IconButton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { MouseEvent, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useVoipOutboundStates } from '../../../../contexts/CallContext'; import { useDialModal } from '../../../../hooks/useDialModal'; @@ -14,7 +14,7 @@ const rcxCallDialButton = css` `; export const CallDialpadButton = ({ phoneNumber }: { phoneNumber: string }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { outBoundCallsAllowed, outBoundCallsEnabledForUser } = useVoipOutboundStates(); const { openDialModal } = useDialModal(); diff --git a/apps/meteor/client/views/omnichannel/directory/components/PriorityField.tsx b/apps/meteor/client/views/omnichannel/directory/components/PriorityField.tsx index 9aedf67ab3c9f..86ca44762d445 100644 --- a/apps/meteor/client/views/omnichannel/directory/components/PriorityField.tsx +++ b/apps/meteor/client/views/omnichannel/directory/components/PriorityField.tsx @@ -1,6 +1,6 @@ import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import Field from '../../components/Field'; import Info from '../../components/Info'; @@ -13,7 +13,7 @@ type PriorityFieldProps = { }; const PriorityField = ({ id }: PriorityFieldProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { data, isInitialLoading, isError } = usePriorityInfo(id); if (isInitialLoading) { diff --git a/apps/meteor/client/views/omnichannel/directory/components/SlaField.tsx b/apps/meteor/client/views/omnichannel/directory/components/SlaField.tsx index 9d0a768579afe..7b029d73403ad 100644 --- a/apps/meteor/client/views/omnichannel/directory/components/SlaField.tsx +++ b/apps/meteor/client/views/omnichannel/directory/components/SlaField.tsx @@ -1,6 +1,6 @@ import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import Field from '../../components/Field'; import Info from '../../components/Info'; @@ -13,7 +13,7 @@ type SlaFieldProps = { }; const SlaField = ({ id }: SlaFieldProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { data, isInitialLoading, isError } = useSlaInfo(id); if (isInitialLoading) { diff --git a/apps/meteor/client/views/omnichannel/directory/components/SourceField.tsx b/apps/meteor/client/views/omnichannel/directory/components/SourceField.tsx index 235f4f95d1fa8..ca3f703abd1d8 100644 --- a/apps/meteor/client/views/omnichannel/directory/components/SourceField.tsx +++ b/apps/meteor/client/views/omnichannel/directory/components/SourceField.tsx @@ -1,7 +1,7 @@ import type { IOmnichannelRoom } from '@rocket.chat/core-typings'; import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { OmnichannelRoomIcon } from '../../../../components/RoomIcon/OmnichannelRoomIcon'; import Field from '../../components/Field'; @@ -13,7 +13,7 @@ type SourceFieldProps = { }; const SourceField = ({ room }: SourceFieldProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const roomSource = room.source.alias || room.source.id || room.source.type; diff --git a/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx b/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx index 0d6c9fb406ec6..597d3d66dbd44 100644 --- a/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx +++ b/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx @@ -1,8 +1,8 @@ import { Box, Select, Label } from '@rocket.chat/fuselage'; import { useMutableCallback, useLocalStorage } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { Dispatch, SetStateAction } from 'react'; import React, { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import AutoCompleteAgent from '../../../components/AutoCompleteAgent'; import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment'; @@ -12,7 +12,7 @@ type QueueListFilterProps = { }; export const QueueListFilter = ({ setFilter, ...props }: QueueListFilterProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const statusOptions: [string, string][] = [ ['online', t('Online')], diff --git a/apps/meteor/client/views/omnichannel/queueList/QueueListPage.tsx b/apps/meteor/client/views/omnichannel/queueList/QueueListPage.tsx index 677b8a2019907..63b62b85e642e 100644 --- a/apps/meteor/client/views/omnichannel/queueList/QueueListPage.tsx +++ b/apps/meteor/client/views/omnichannel/queueList/QueueListPage.tsx @@ -1,11 +1,11 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Page, PageHeader, PageContent } from '../../../components/Page'; import QueueListTable from './QueueListTable'; const QueueListPage = () => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.tsx index f1b2d0eed3376..cc5566e04c4b0 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.tsx +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.tsx @@ -1,9 +1,10 @@ import type { OperationParams } from '@rocket.chat/rest-typings'; -import type { TranslationContextValue, TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import type { TranslationKey } from '@rocket.chat/ui-contexts'; import type { Chart as ChartType } from 'chart.js'; +import type { TFunction } from 'i18next'; import type { MutableRefObject } from 'react'; import React, { useRef, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import { drawDoughnutChart } from '../../../../../app/livechat/client/lib/chartHandler'; import { AsyncStatePhase } from '../../../../hooks/useAsyncState'; @@ -20,7 +21,7 @@ const initialData = { offline: 0, }; -const init = (canvas: HTMLCanvasElement, context: ChartType | undefined, t: TranslationContextValue['translate']): Promise => +const init = (canvas: HTMLCanvasElement, context: ChartType | undefined, t: TFunction): Promise => drawDoughnutChart( canvas, t('Agents'), @@ -35,7 +36,7 @@ type AgentStatusChartsProps = { }; const AgentStatusChart = ({ params, reloadRef, ...props }: AgentStatusChartsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const canvas: MutableRefObject = useRef(null); const context: MutableRefObject = useRef(); diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.tsx index b84dfe6918a24..dc3c495de32f9 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.tsx +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.tsx @@ -1,9 +1,10 @@ import type { OperationParams } from '@rocket.chat/rest-typings'; -import type { TranslationContextValue, TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import type { TranslationKey } from '@rocket.chat/ui-contexts'; import type { Chart as ChartType } from 'chart.js'; +import type { TFunction } from 'i18next'; import type { MutableRefObject } from 'react'; import React, { useRef, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import { drawDoughnutChart } from '../../../../../app/livechat/client/lib/chartHandler'; import { AsyncStatePhase } from '../../../../hooks/useAsyncState'; @@ -20,7 +21,7 @@ const initialData = { closed: 0, }; -const init = (canvas: HTMLCanvasElement, context: ChartType | undefined, t: TranslationContextValue['translate']) => +const init = (canvas: HTMLCanvasElement, context: ChartType | undefined, t: TFunction) => drawDoughnutChart( canvas, t('Chats'), @@ -35,7 +36,7 @@ type ChatsChartProps = { }; const ChatsChart = ({ params, reloadRef, ...props }: ChatsChartProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const canvas: MutableRefObject = useRef(null); const context: MutableRefObject = useRef(); diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.ts b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.ts index d942b93a4223f..c1c632e06c0cd 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.ts +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.ts @@ -1,6 +1,6 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import type { TranslationContextValue } from '@rocket.chat/ui-contexts'; import { type Chart } from 'chart.js'; +import type { TFunction } from 'i18next'; import { type MutableRefObject } from 'react'; import { updateChart } from '../../../../../app/livechat/client/lib/chartHandler'; @@ -8,8 +8,8 @@ import { updateChart } from '../../../../../app/livechat/client/lib/chartHandler type UseUpdateChartDataOptions = { context: MutableRefObject; canvas: MutableRefObject; - init: (canvas: HTMLCanvasElement, context: undefined, t: TranslationContextValue['translate']) => Promise; - t: TranslationContextValue['translate']; + init: (canvas: HTMLCanvasElement, context: undefined, t: TFunction) => Promise; + t: TFunction; }; export const useUpdateChartData = ({ context: contextRef, canvas: canvasRef, init, t }: UseUpdateChartDataOptions) => diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.tsx index f10909e19f01f..0c244993dea7f 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.tsx +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.tsx @@ -1,7 +1,7 @@ import { Skeleton } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { AsyncStatePhase } from '../../../../hooks/useAsyncState'; import CounterItem from './CounterItem'; @@ -23,7 +23,7 @@ type CounterContainerProps = { }; const CounterContainer = ({ data, state, initialData, ...props }: CounterContainerProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const [displayData, setDisplayData] = useState(initialData); diff --git a/apps/meteor/client/views/omnichannel/triggers/ConditionForm.tsx b/apps/meteor/client/views/omnichannel/triggers/ConditionForm.tsx index 1073c8e702ccb..0033d345423f3 100644 --- a/apps/meteor/client/views/omnichannel/triggers/ConditionForm.tsx +++ b/apps/meteor/client/views/omnichannel/triggers/ConditionForm.tsx @@ -1,11 +1,11 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { Field, FieldGroup, FieldLabel, FieldRow, NumberInput, Select, TextInput } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { useMemo } from 'react'; import type { Control } from 'react-hook-form'; import { Controller, useWatch } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import type { TriggersPayload } from './EditTrigger'; @@ -16,7 +16,7 @@ type ConditionFormType = ComponentProps & { export const ConditionForm = ({ control, index, ...props }: ConditionFormType) => { const conditionFieldId = useUniqueId(); - const t = useTranslation(); + const { t } = useTranslation(); const conditionName = useWatch({ control, name: `conditions.${index}.name` }); const placeholders: { [conditionName: string]: string } = useMemo( diff --git a/apps/meteor/client/views/omnichannel/triggers/actions/ActionForm.tsx b/apps/meteor/client/views/omnichannel/triggers/actions/ActionForm.tsx index b09ea937b1cdf..5ef1fd8766423 100644 --- a/apps/meteor/client/views/omnichannel/triggers/actions/ActionForm.tsx +++ b/apps/meteor/client/views/omnichannel/triggers/actions/ActionForm.tsx @@ -12,11 +12,11 @@ import { } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { useCallback, useMemo } from 'react'; import type { Control, UseFormTrigger } from 'react-hook-form'; import { Controller, useWatch } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { useHasLicenseModule } from '../../../../hooks/useHasLicenseModule'; import { type TriggersPayload } from '../EditTrigger'; @@ -35,7 +35,7 @@ const ACTION_HINTS: Record = { const PREMIUM_ACTIONS = ['use-external-service']; export const ActionForm = ({ control, trigger, index, ...props }: SendMessageFormType) => { - const t = useTranslation(); + const { t } = useTranslation(); const actionFieldId = useUniqueId(); const actionFieldName = `actions.${index}.name` as const; diff --git a/apps/meteor/client/views/omnichannel/triggers/actions/ActionSender.tsx b/apps/meteor/client/views/omnichannel/triggers/actions/ActionSender.tsx index 7b6d9b9b4ed5b..4dcd071fdd7dd 100644 --- a/apps/meteor/client/views/omnichannel/triggers/actions/ActionSender.tsx +++ b/apps/meteor/client/views/omnichannel/triggers/actions/ActionSender.tsx @@ -1,10 +1,10 @@ import { FieldRow, Select, TextInput, type SelectOption, Field, FieldLabel } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { useMemo } from 'react'; import type { Control } from 'react-hook-form'; import { Controller, useWatch } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import type { TriggersPayload } from '../EditTrigger'; @@ -15,7 +15,7 @@ type ActionSenderType = ComponentProps & { }; export const ActionSender = ({ control, index, disabled, ...props }: ActionSenderType) => { - const t = useTranslation(); + const { t } = useTranslation(); const senderFieldId = useUniqueId(); const senderFieldName = `actions.${index}.params.sender` as const; diff --git a/apps/meteor/client/views/omnichannel/triggers/actions/ExternalServiceActionForm.tsx b/apps/meteor/client/views/omnichannel/triggers/actions/ExternalServiceActionForm.tsx index 0905b8afbc8da..c53cd1e076ab6 100644 --- a/apps/meteor/client/views/omnichannel/triggers/actions/ExternalServiceActionForm.tsx +++ b/apps/meteor/client/views/omnichannel/triggers/actions/ExternalServiceActionForm.tsx @@ -1,10 +1,10 @@ import { FieldError, Field, FieldHint, FieldLabel, FieldRow, NumberInput, TextAreaInput, FieldGroup } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, FocusEvent } from 'react'; import React from 'react'; import type { Control, UseFormTrigger } from 'react-hook-form'; import { Controller } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { useHasLicenseModule } from '../../../../hooks/useHasLicenseModule'; import type { TriggersPayload } from '../EditTrigger'; @@ -19,7 +19,7 @@ type SendMessageActionFormType = ComponentProps & { }; export const ExternalServiceActionForm = ({ control, trigger, index, ...props }: SendMessageActionFormType) => { - const t = useTranslation(); + const { t } = useTranslation(); const hasLicense = useHasLicenseModule('livechat-enterprise'); diff --git a/apps/meteor/client/views/omnichannel/triggers/actions/SendMessageActionForm.tsx b/apps/meteor/client/views/omnichannel/triggers/actions/SendMessageActionForm.tsx index d34ce4240c739..c48083054e40d 100644 --- a/apps/meteor/client/views/omnichannel/triggers/actions/SendMessageActionForm.tsx +++ b/apps/meteor/client/views/omnichannel/triggers/actions/SendMessageActionForm.tsx @@ -1,10 +1,10 @@ import { Field, FieldError, FieldLabel, FieldRow, TextAreaInput } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React from 'react'; import type { Control } from 'react-hook-form'; import { Controller } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import type { TriggersPayload } from '../EditTrigger'; import { useFieldError } from '../hooks'; @@ -16,7 +16,7 @@ type SendMessageActionFormType = ComponentProps & { }; export const SendMessageActionForm = ({ control, index, ...props }: SendMessageActionFormType) => { - const t = useTranslation(); + const { t } = useTranslation(); const messageFieldId = useUniqueId(); const name = `actions.${index}.params.msg` as const; const [messageError] = useFieldError({ control, name }); diff --git a/apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx b/apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx index 791841ed3ab51..bd05e95d83fd7 100644 --- a/apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx +++ b/apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx @@ -1,7 +1,7 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Button, Palette } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type OutlookSettingItemProps = { id: string; @@ -12,7 +12,7 @@ type OutlookSettingItemProps = { }; const OutlookSettingItem = ({ id, title, subTitle, enabled, handleEnable }: OutlookSettingItemProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const hovered = css` &:hover, diff --git a/apps/meteor/client/views/room/E2EESetup/RoomE2EESetup.tsx b/apps/meteor/client/views/room/E2EESetup/RoomE2EESetup.tsx index 71604da54b671..d893213462561 100644 --- a/apps/meteor/client/views/room/E2EESetup/RoomE2EESetup.tsx +++ b/apps/meteor/client/views/room/E2EESetup/RoomE2EESetup.tsx @@ -1,5 +1,5 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import { e2e } from '../../../../app/e2e/client'; import { E2EEState } from '../../../../app/e2e/client/E2EEState'; @@ -16,7 +16,7 @@ const RoomE2EESetup = () => { const e2eeState = useE2EEState(); const e2eRoomState = useE2EERoomState(room._id); - const t = useTranslation(); + const { t } = useTranslation(); const randomPassword = window.localStorage.getItem('e2e.randomPassword'); const onSavePassword = useCallback(() => { diff --git a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx index b1da1323df650..36941e2c829eb 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx @@ -1,7 +1,7 @@ import type { IOmnichannelRoom } from '@rocket.chat/core-typings'; import { Box, Dropdown, Option } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { HeaderToolbarAction } from '../../../../../components/Header'; import { useDropdownVisibility } from '../../../../../sidebar/header/hooks/useDropdownVisibility'; @@ -14,7 +14,7 @@ type QuickActionOptionsProps = { }; const QuickActionOptions = ({ options, room, action, ...props }: QuickActionOptionsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const reference = useRef(null); const target = useRef(null); const { isVisible, toggle } = useDropdownVisibility({ reference, target }); diff --git a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx index 13805850a13d4..f3b7ef7562d65 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx @@ -1,7 +1,7 @@ import type { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { HeaderToolbar, HeaderToolbarAction, HeaderToolbarDivider } from '../../../../../components/Header'; import { useOmnichannelRoom } from '../../../contexts/RoomContext'; @@ -13,7 +13,7 @@ type QuickActionsProps = { }; const QuickActions = ({ className }: QuickActionsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const room = useOmnichannelRoom(); const { quickActions, actionDefault } = useQuickActions(); diff --git a/apps/meteor/client/views/room/Header/RoomHeader.tsx b/apps/meteor/client/views/room/Header/RoomHeader.tsx index 2e38e2110bbeb..5d98d4a33f8d2 100644 --- a/apps/meteor/client/views/room/Header/RoomHeader.tsx +++ b/apps/meteor/client/views/room/Header/RoomHeader.tsx @@ -1,8 +1,8 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { isRoomFederated } from '@rocket.chat/core-typings'; import { RoomAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { Suspense } from 'react'; +import { useTranslation } from 'react-i18next'; import { Header, HeaderAvatar, HeaderContent, HeaderContentRow, HeaderSubtitle, HeaderToolbar } from '../../../components/Header'; import MarkdownText from '../../../components/MarkdownText'; @@ -34,7 +34,7 @@ export type RoomHeaderProps = { }; const RoomHeader = ({ room, topic = '', slots = {}, roomToolbox }: RoomHeaderProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return (

diff --git a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolboxE2EESetup.tsx b/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolboxE2EESetup.tsx index 58e1f9f59ef78..d8125feff06e1 100644 --- a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolboxE2EESetup.tsx +++ b/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolboxE2EESetup.tsx @@ -1,6 +1,6 @@ import { useStableArray } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { HeaderToolbarAction } from '../../../../components/Header'; import { roomActionHooksForE2EESetup } from '../../../../ui'; @@ -10,7 +10,7 @@ import { useRoomToolbox } from '../../contexts/RoomToolboxContext'; import { getRoomGroup } from '../../lib/getRoomGroup'; const RoomToolboxE2EESetup = () => { - const t = useTranslation(); + const { t } = useTranslation(); const toolbox = useRoomToolbox(); const room = useRoom(); diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActionOptions.tsx b/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActionOptions.tsx index b1da1323df650..36941e2c829eb 100644 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActionOptions.tsx +++ b/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActionOptions.tsx @@ -1,7 +1,7 @@ import type { IOmnichannelRoom } from '@rocket.chat/core-typings'; import { Box, Dropdown, Option } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { HeaderToolbarAction } from '../../../../../components/Header'; import { useDropdownVisibility } from '../../../../../sidebar/header/hooks/useDropdownVisibility'; @@ -14,7 +14,7 @@ type QuickActionOptionsProps = { }; const QuickActionOptions = ({ options, room, action, ...props }: QuickActionOptionsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const reference = useRef(null); const target = useRef(null); const { isVisible, toggle } = useDropdownVisibility({ reference, target }); diff --git a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActions.tsx b/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActions.tsx index 13805850a13d4..f3b7ef7562d65 100644 --- a/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActions.tsx +++ b/apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActions.tsx @@ -1,7 +1,7 @@ import type { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { HeaderToolbar, HeaderToolbarAction, HeaderToolbarDivider } from '../../../../../components/Header'; import { useOmnichannelRoom } from '../../../contexts/RoomContext'; @@ -13,7 +13,7 @@ type QuickActionsProps = { }; const QuickActions = ({ className }: QuickActionsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const room = useOmnichannelRoom(); const { quickActions, actionDefault } = useQuickActions(); diff --git a/apps/meteor/client/views/room/HeaderV2/RoomHeader.tsx b/apps/meteor/client/views/room/HeaderV2/RoomHeader.tsx index 8ef21aecf0cda..a99265368dee1 100644 --- a/apps/meteor/client/views/room/HeaderV2/RoomHeader.tsx +++ b/apps/meteor/client/views/room/HeaderV2/RoomHeader.tsx @@ -1,8 +1,8 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { isRoomFederated } from '@rocket.chat/core-typings'; import { RoomAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { Suspense } from 'react'; +import { useTranslation } from 'react-i18next'; import { Header, HeaderAvatar, HeaderContent, HeaderContentRow, HeaderToolbar } from '../../../components/Header'; import FederatedRoomOriginServer from './FederatedRoomOriginServer'; @@ -32,7 +32,7 @@ export type RoomHeaderProps = { }; const RoomHeader = ({ room, slots = {}, roomToolbox }: RoomHeaderProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return (
diff --git a/apps/meteor/client/views/room/HeaderV2/RoomLeader.tsx b/apps/meteor/client/views/room/HeaderV2/RoomLeader.tsx index cfe1f620afbf3..424cfeab7714e 100644 --- a/apps/meteor/client/views/room/HeaderV2/RoomLeader.tsx +++ b/apps/meteor/client/views/room/HeaderV2/RoomLeader.tsx @@ -2,9 +2,9 @@ import type { IUser } from '@rocket.chat/core-typings'; import { css } from '@rocket.chat/css-in-js'; import { Box, IconButton } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { UIEvent } from 'react'; import React, { useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { HeaderSubtitle } from '../../../components/Header'; import { ReactiveUserStatus } from '../../../components/UserStatus'; @@ -18,7 +18,7 @@ type RoomLeaderProps = { }; const RoomLeader = ({ _id, name, username }: RoomLeaderProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { openUserCard, triggerProps } = useUserCard(); diff --git a/apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolboxE2EESetup.tsx b/apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolboxE2EESetup.tsx index 9c6afa33fc277..12caba1f3801c 100644 --- a/apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolboxE2EESetup.tsx +++ b/apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolboxE2EESetup.tsx @@ -1,6 +1,6 @@ import { useStableArray } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { HeaderToolbarAction } from '../../../../components/Header'; import { roomActionHooksForE2EESetup } from '../../../../ui'; @@ -8,7 +8,7 @@ import type { RoomToolboxActionConfig } from '../../contexts/RoomToolboxContext' import { useRoomToolbox } from '../../contexts/RoomToolboxContext'; const RoomToolboxE2EESetup = () => { - const t = useTranslation(); + const { t } = useTranslation(); const toolbox = useRoomToolbox(); const { tab } = toolbox; diff --git a/apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx b/apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx index dbd1f0fa57c73..7865f7dcbe856 100644 --- a/apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx +++ b/apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx @@ -1,13 +1,13 @@ import { States, StatesIcon, StatesTitle, StatesSubtitle, StatesActions, StatesAction, Icon } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; import React from 'react'; import { ErrorBoundary } from 'react-error-boundary'; +import { useTranslation } from 'react-i18next'; import { useRoom } from '../contexts/RoomContext'; const MessageListErrorBoundary = ({ children }: { children: ReactNode }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const room = useRoom(); return ( diff --git a/apps/meteor/client/views/room/MessageList/MessageListItem.tsx b/apps/meteor/client/views/room/MessageList/MessageListItem.tsx index ecd0978c9fc09..0304be6561217 100644 --- a/apps/meteor/client/views/room/MessageList/MessageListItem.tsx +++ b/apps/meteor/client/views/room/MessageList/MessageListItem.tsx @@ -1,7 +1,7 @@ import { isThreadMessage, type IMessage, type ISubscription } from '@rocket.chat/core-typings'; import { Box, Bubble, MessageDivider } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import RoomMessage from '../../../components/message/variants/RoomMessage'; import SystemMessage from '../../../components/message/variants/SystemMessage'; @@ -31,7 +31,7 @@ export const MessageListItem = ({ subscription, system, }: MessageListItemProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const formatDate = useFormatDate(); const ref = useDateRef(); diff --git a/apps/meteor/client/views/room/Sidepanel/RoomSidepanelListWrapper.tsx b/apps/meteor/client/views/room/Sidepanel/RoomSidepanelListWrapper.tsx index dd9e6e6ec2210..1eceda18c4cf5 100644 --- a/apps/meteor/client/views/room/Sidepanel/RoomSidepanelListWrapper.tsx +++ b/apps/meteor/client/views/room/Sidepanel/RoomSidepanelListWrapper.tsx @@ -1,15 +1,15 @@ import { SidepanelList } from '@rocket.chat/fuselage'; import { useMergedRefs } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ForwardedRef, HTMLAttributes } from 'react'; import React, { forwardRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useSidebarListNavigation } from '../../../sidebar/RoomList/useSidebarListNavigation'; type RoomListWrapperProps = HTMLAttributes; const RoomSidepanelListWrapper = forwardRef(function RoomListWrapper(props: RoomListWrapperProps, ref: ForwardedRef) { - const t = useTranslation(); + const { t } = useTranslation(); const { sidebarListRef } = useSidebarListNavigation(); const mergedRefs = useMergedRefs(ref, sidebarListRef); diff --git a/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx b/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx index a6de01e220848..7ac4b3feb23c7 100644 --- a/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx +++ b/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx @@ -1,7 +1,7 @@ import type { IRoom, ISubscription } from '@rocket.chat/core-typings'; import { SidebarV2ItemBadge as SidebarItemBadge, SidebarV2ItemIcon as SidebarItemIcon } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { RoomIcon } from '../../../../components/RoomIcon'; import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator'; @@ -12,7 +12,7 @@ export const useItemData = ( room: ISubscription & IRoom, { openedRoom, viewMode }: { openedRoom: string | undefined; viewMode?: 'extended' | 'medium' | 'condensed' }, ) => { - const t = useTranslation(); + const { t } = useTranslation(); const AvatarTemplate = useAvatarTemplate(); const highlighted = Boolean(!room.hideUnreadStatus && (room.alert || room.unread)); diff --git a/apps/meteor/client/views/room/body/DropTargetOverlay.tsx b/apps/meteor/client/views/room/body/DropTargetOverlay.tsx index 8a9b1ae77dbd6..2e9e16ef3201d 100644 --- a/apps/meteor/client/views/room/body/DropTargetOverlay.tsx +++ b/apps/meteor/client/views/room/body/DropTargetOverlay.tsx @@ -1,9 +1,9 @@ import { css } from '@rocket.chat/css-in-js'; import { Box } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { DragEvent, ReactElement, ReactNode } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime'; @@ -16,7 +16,7 @@ type DropTargetOverlayProps = { }; function DropTargetOverlay({ enabled, reason, onFileDrop, visible = true, onDismiss }: DropTargetOverlayProps): ReactElement | null { - const t = useTranslation(); + const { t } = useTranslation(); const handleDragLeave = useMutableCallback((event: DragEvent) => { event.stopPropagation(); diff --git a/apps/meteor/client/views/room/body/ErroredUploadProgressIndicator.tsx b/apps/meteor/client/views/room/body/ErroredUploadProgressIndicator.tsx index cdddc8b482cda..6923528e33b91 100644 --- a/apps/meteor/client/views/room/body/ErroredUploadProgressIndicator.tsx +++ b/apps/meteor/client/views/room/body/ErroredUploadProgressIndicator.tsx @@ -1,6 +1,6 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import type { Upload } from '../../../lib/chats/Upload'; @@ -11,7 +11,7 @@ type ErroredUploadProgressIndicatorProps = { }; const ErroredUploadProgressIndicator = ({ id, error, onClose }: ErroredUploadProgressIndicatorProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const handleCloseClick = useCallback(() => { onClose?.(id); diff --git a/apps/meteor/client/views/room/body/LeaderBar.tsx b/apps/meteor/client/views/room/body/LeaderBar.tsx index b54d37ed5df9d..6c637eb84d8eb 100644 --- a/apps/meteor/client/views/room/body/LeaderBar.tsx +++ b/apps/meteor/client/views/room/body/LeaderBar.tsx @@ -2,10 +2,10 @@ import type { IUser } from '@rocket.chat/core-typings'; import { css } from '@rocket.chat/css-in-js'; import { Box, Button } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, UIEvent } from 'react'; import React, { memo, useCallback, useMemo } from 'react'; import type { AriaButtonProps } from 'react-aria'; +import { useTranslation } from 'react-i18next'; import { isTruthy } from '../../../../lib/isTruthy'; import { ReactiveUserStatus } from '../../../components/UserStatus'; @@ -23,7 +23,7 @@ type LeaderBarProps = { * @deprecated on newNavigation feature. Remove after full migration. */ const LeaderBar = ({ _id, name, username, visible, onAvatarClick, triggerProps }: LeaderBarProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const chatNowLink = useMemo(() => roomCoordinator.getRouteLink('d', { name: username }) || undefined, [username]); diff --git a/apps/meteor/client/views/room/body/RetentionPolicyWarning.tsx b/apps/meteor/client/views/room/body/RetentionPolicyWarning.tsx index 4629b812bbff4..f9c612ce9a9a6 100644 --- a/apps/meteor/client/views/room/body/RetentionPolicyWarning.tsx +++ b/apps/meteor/client/views/room/body/RetentionPolicyWarning.tsx @@ -1,14 +1,14 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Box, Bubble } 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 { withErrorBoundary } from '../../../components/withErrorBoundary'; import { usePruneWarningMessage } from '../../../hooks/usePruneWarningMessage'; const RetentionPolicyWarning = ({ room }: { room: IRoom }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const message = usePruneWarningMessage(room); diff --git a/apps/meteor/client/views/room/body/RoomForeword/RoomForeword.tsx b/apps/meteor/client/views/room/body/RoomForeword/RoomForeword.tsx index a765407ad6d49..7629fc14c508f 100644 --- a/apps/meteor/client/views/room/body/RoomForeword/RoomForeword.tsx +++ b/apps/meteor/client/views/room/body/RoomForeword/RoomForeword.tsx @@ -2,9 +2,9 @@ import type { IRoom, IUser } from '@rocket.chat/core-typings'; import { isVoipRoom, isDirectMessageRoom } from '@rocket.chat/core-typings'; import { Flex, Box } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { VoipRoomForeword } from '../../../../components/voip/room/VoipRoomForeword'; import RoomForewordUsernameList from './RoomForewordUsernameList'; @@ -12,7 +12,7 @@ import RoomForewordUsernameList from './RoomForewordUsernameList'; type RoomForewordProps = { user: IUser | null; room: IRoom }; const RoomForeword = ({ user, room }: RoomForewordProps): ReactElement | null => { - const t = useTranslation(); + const { t } = useTranslation(); if (isVoipRoom(room)) { return ; diff --git a/apps/meteor/client/views/room/body/UnreadMessagesIndicator.tsx b/apps/meteor/client/views/room/body/UnreadMessagesIndicator.tsx index e72a263ae8e67..842929376cf77 100644 --- a/apps/meteor/client/views/room/body/UnreadMessagesIndicator.tsx +++ b/apps/meteor/client/views/room/body/UnreadMessagesIndicator.tsx @@ -1,8 +1,8 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Bubble } 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'; type UnreadMessagesIndicatorProps = { count: number; @@ -18,7 +18,7 @@ const indicatorStyle = css` `; const UnreadMessagesIndicator = ({ count, onJumpButtonClick, onMarkAsReadButtonClick }: UnreadMessagesIndicatorProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/room/body/UploadProgressIndicator.tsx b/apps/meteor/client/views/room/body/UploadProgressIndicator.tsx index 001e84de24010..3c9a9b0a809da 100644 --- a/apps/meteor/client/views/room/body/UploadProgressIndicator.tsx +++ b/apps/meteor/client/views/room/body/UploadProgressIndicator.tsx @@ -1,6 +1,6 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import type { Upload } from '../../../lib/chats/Upload'; import ErroredUploadProgressIndicator from './ErroredUploadProgressIndicator'; @@ -14,7 +14,7 @@ type UploadProgressIndicatorProps = { }; const UploadProgressIndicator = ({ id, name, percentage, error, onClose }: UploadProgressIndicatorProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const handleCloseClick = useCallback(() => { onClose?.(id); diff --git a/apps/meteor/client/views/room/composer/ComposerArchived.tsx b/apps/meteor/client/views/room/composer/ComposerArchived.tsx index d8e269f9986c0..e32d4310e4511 100644 --- a/apps/meteor/client/views/room/composer/ComposerArchived.tsx +++ b/apps/meteor/client/views/room/composer/ComposerArchived.tsx @@ -1,10 +1,10 @@ import { MessageFooterCallout, MessageFooterCalloutContent } from '@rocket.chat/ui-composer'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; const ComposerReadOnly = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/room/composer/ComposerBlocked.tsx b/apps/meteor/client/views/room/composer/ComposerBlocked.tsx index c5edb077c39f9..c1a7aaca35ee2 100644 --- a/apps/meteor/client/views/room/composer/ComposerBlocked.tsx +++ b/apps/meteor/client/views/room/composer/ComposerBlocked.tsx @@ -1,10 +1,10 @@ import { MessageFooterCallout } from '@rocket.chat/ui-composer'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; const ComposerBlocked = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return {t('room_is_blocked')}; }; diff --git a/apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx index 523c0e44af862..cdac8d6d4dafe 100644 --- a/apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx +++ b/apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx @@ -1,9 +1,9 @@ import { Box, Option, OptionSkeleton, Tile } from '@rocket.chat/fuselage'; import { useUniqueId, useContentBoxSize } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { UseQueryResult } from '@tanstack/react-query'; import type { ReactElement } from 'react'; import React, { useEffect, memo, useMemo, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; export type ComposerBoxPopupProps< T extends { @@ -32,7 +32,7 @@ function ComposerBoxPopup< select, renderItem = ({ item }: { item: T }) => <>{JSON.stringify(item)}, }: ComposerBoxPopupProps): ReactElement | null { - const t = useTranslation(); + const { t } = useTranslation(); const id = useUniqueId(); const composerBoxPopupRef = useRef(null); const popupSizes = useContentBoxSize(composerBoxPopupRef); diff --git a/apps/meteor/client/views/room/composer/ComposerBoxPopupSlashCommand.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupSlashCommand.tsx index fe69136c3d265..70c18a9dae570 100644 --- a/apps/meteor/client/views/room/composer/ComposerBoxPopupSlashCommand.tsx +++ b/apps/meteor/client/views/room/composer/ComposerBoxPopupSlashCommand.tsx @@ -1,6 +1,6 @@ import { OptionColumn, OptionContent, OptionDescription, OptionInput } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; export type ComposerBoxPopupSlashCommandProps = { _id: string; @@ -10,7 +10,7 @@ export type ComposerBoxPopupSlashCommandProps = { }; function ComposerBoxPopupSlashCommand({ _id, description, params, disabled }: ComposerBoxPopupSlashCommandProps) { - const t = useTranslation(); + const { t } = useTranslation(); return ( <> diff --git a/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx index a321687991580..ef38f61cdf6c5 100644 --- a/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx +++ b/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx @@ -1,7 +1,7 @@ import { OptionAvatar, OptionColumn, OptionContent, OptionInput } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import ReactiveUserStatus from '../../../components/UserStatus/ReactiveUserStatus'; @@ -19,7 +19,7 @@ export type ComposerBoxPopupUserProps = { }; function ComposerBoxPopupUser({ _id, system, username, name, nickname, outside, suggestion, variant }: ComposerBoxPopupUserProps) { - const t = useTranslation(); + const { t } = useTranslation(); return ( <> diff --git a/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederationDisabled.tsx b/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederationDisabled.tsx index e20c00a0d1ebb..0bcfa22790a92 100644 --- a/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederationDisabled.tsx +++ b/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederationDisabled.tsx @@ -1,10 +1,10 @@ import { MessageFooterCallout } from '@rocket.chat/ui-composer'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; const ComposerFederationDisabled = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return {t('Federation_Matrix_Federated_Description_disabled')}; }; diff --git a/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederationJoinRoomDisabled.tsx b/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederationJoinRoomDisabled.tsx index 94d578d6fc2dc..59337376026fe 100644 --- a/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederationJoinRoomDisabled.tsx +++ b/apps/meteor/client/views/room/composer/ComposerFederation/ComposerFederationJoinRoomDisabled.tsx @@ -1,10 +1,10 @@ import { MessageFooterCallout } from '@rocket.chat/ui-composer'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; const ComposerFederationJoinRoomDisabled = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return {t('Federation_Matrix_join_public_rooms_is_premium')}; }; diff --git a/apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelOnHold.tsx b/apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelOnHold.tsx index ecae4417db7b0..74ee27dac24fd 100644 --- a/apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelOnHold.tsx +++ b/apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelOnHold.tsx @@ -1,7 +1,7 @@ import { MessageFooterCallout, MessageFooterCalloutAction, MessageFooterCalloutContent } from '@rocket.chat/ui-composer'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useOmnichannelRoom } from '../../contexts/RoomContext'; import { useResumeChatOnHoldMutation } from './hooks/useResumeChatOnHoldMutation'; @@ -11,7 +11,7 @@ export const ComposerOmnichannelOnHold = (): ReactElement => { const room = useOmnichannelRoom(); - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/room/composer/ComposerUserActionIndicator/ComposerUserActionIndicator.tsx b/apps/meteor/client/views/room/composer/ComposerUserActionIndicator/ComposerUserActionIndicator.tsx index e2d5c1f03fe08..f2965f63c26f0 100644 --- a/apps/meteor/client/views/room/composer/ComposerUserActionIndicator/ComposerUserActionIndicator.tsx +++ b/apps/meteor/client/views/room/composer/ComposerUserActionIndicator/ComposerUserActionIndicator.tsx @@ -1,7 +1,7 @@ import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useCallback, Fragment } from 'react'; +import { useTranslation } from 'react-i18next'; import { UserAction } from '../../../../../app/ui/client/lib/UserAction'; import { useReactiveValue } from '../../../../hooks/useReactiveValue'; @@ -9,7 +9,7 @@ import { useReactiveValue } from '../../../../hooks/useReactiveValue'; const maxUsernames = 5; const ComposerUserActionIndicator = ({ rid, tmid }: { rid: string; tmid?: string }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const actions = useReactiveValue( useCallback(() => { const roomAction = UserAction.get(tmid || rid) || {}; diff --git a/apps/meteor/client/views/room/composer/ComposerVoIP.tsx b/apps/meteor/client/views/room/composer/ComposerVoIP.tsx index 98670bd45a15e..399e0d32baa7b 100644 --- a/apps/meteor/client/views/room/composer/ComposerVoIP.tsx +++ b/apps/meteor/client/views/room/composer/ComposerVoIP.tsx @@ -1,10 +1,10 @@ import { MessageFooterCallout } from '@rocket.chat/ui-composer'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; const ComposerVoIP = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return {t('Composer_not_available_phone_calls')}; }; diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBoxFormattingToolbar/FormattingToolbarDropdown.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBoxFormattingToolbar/FormattingToolbarDropdown.tsx index d39b74c079a29..2010a589edc61 100644 --- a/apps/meteor/client/views/room/composer/messageBox/MessageBoxFormattingToolbar/FormattingToolbarDropdown.tsx +++ b/apps/meteor/client/views/room/composer/messageBox/MessageBoxFormattingToolbar/FormattingToolbarDropdown.tsx @@ -1,7 +1,7 @@ import { GenericMenu } from '@rocket.chat/ui-client'; import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { isPromptButton, type FormattingButton } from '../../../../../../app/ui-message/client/messageBox/messageBoxFormatting'; import type { ComposerAPI } from '../../../../../lib/chats/ChatAPI'; @@ -13,7 +13,7 @@ type FormattingToolbarDropdownProps = { }; const FormattingToolbarDropdown = ({ composer, items, disabled }: FormattingToolbarDropdownProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const formattingItems: GenericMenuItemProps[] = items.map((formatter) => { const handleFormattingAction = () => { diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBoxFormattingToolbar/MessageBoxFormattingToolbar.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBoxFormattingToolbar/MessageBoxFormattingToolbar.tsx index 7a4f7da208253..c5b1f06dd9b8b 100644 --- a/apps/meteor/client/views/room/composer/messageBox/MessageBoxFormattingToolbar/MessageBoxFormattingToolbar.tsx +++ b/apps/meteor/client/views/room/composer/messageBox/MessageBoxFormattingToolbar/MessageBoxFormattingToolbar.tsx @@ -1,6 +1,6 @@ import { MessageComposerAction } from '@rocket.chat/ui-composer'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import type { FormattingButton } from '../../../../../../app/ui-message/client/messageBox/messageBoxFormatting'; import { isPromptButton } from '../../../../../../app/ui-message/client/messageBox/messageBoxFormatting'; @@ -15,7 +15,7 @@ type MessageBoxFormattingToolbarProps = { }; const MessageBoxFormattingToolbar = ({ items, variant = 'large', composer, disabled }: MessageBoxFormattingToolbarProps) => { - const t = useTranslation(); + const { t } = useTranslation(); if (variant === 'small') { const collapsedItems = [...items]; diff --git a/apps/meteor/client/views/room/composer/messageBox/hooks/useMediaActionTitle.ts b/apps/meteor/client/views/room/composer/messageBox/hooks/useMediaActionTitle.ts index e298f86a1e0ba..e0923c268fe81 100644 --- a/apps/meteor/client/views/room/composer/messageBox/hooks/useMediaActionTitle.ts +++ b/apps/meteor/client/views/room/composer/messageBox/hooks/useMediaActionTitle.ts @@ -1,5 +1,5 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; export const useMediaActionTitle = ( media: 'audio' | 'video', @@ -8,7 +8,7 @@ export const useMediaActionTitle = ( isMediaEnabled: boolean, isAllowed: boolean, ) => { - const t = useTranslation(); + const { t } = useTranslation(); const getMediaActionTitle = useMemo(() => { if (isPermissionDenied) { diff --git a/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx b/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx index d6e94f4f45ac8..e5272e749a175 100644 --- a/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx +++ b/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx @@ -1,8 +1,8 @@ import { Callout, FieldGroup, Field, FieldLabel, FieldRow, ToggleSwitch, Select } from '@rocket.chat/fuselage'; import type { SelectOption } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, ChangeEvent } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { ContextualbarClose, @@ -30,7 +30,7 @@ const AutoTranslate = ({ handleChangeLanguage, handleClose, }: AutoTranslateProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const room = useRoom(); return ( diff --git a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsListRow.tsx b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsListRow.tsx index 5395fb95f4672..352f7e46ce6a5 100644 --- a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsListRow.tsx +++ b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsListRow.tsx @@ -1,6 +1,6 @@ import type { IDiscussionMessage, IUser } from '@rocket.chat/core-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useTimeAgo } from '../../../../hooks/useTimeAgo'; import { normalizeThreadMessage } from '../../../../lib/normalizeThreadMessage'; @@ -14,7 +14,7 @@ type DiscussionListRowProps = { }; function DiscussionListRow({ discussion, showRealNames, userId, onClick }: DiscussionListRowProps) { - const t = useTranslation(); + const { t } = useTranslation(); const formatDate = useTimeAgo(); const msg = normalizeThreadMessage(discussion); diff --git a/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx b/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx index 6fabbaff4a1a1..a0c4fa09ffaeb 100644 --- a/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx +++ b/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx @@ -1,9 +1,9 @@ import type { IDiscussionMessage } from '@rocket.chat/core-typings'; import { Box, Message } from '@rocket.chat/fuselage'; import { MessageAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement, ReactNode } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import Emoji from '../../../../../components/Emoji'; import { clickableItem } from '../../../../../lib/clickableItem'; @@ -33,7 +33,7 @@ const DiscussionListItem = ({ emoji, ...props }: DiscussionListItemProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/room/contextualBar/ExportMessages/ExportMessages.tsx b/apps/meteor/client/views/room/contextualBar/ExportMessages/ExportMessages.tsx index 1e4f30bcfed2e..99bcabfd03b3b 100644 --- a/apps/meteor/client/views/room/contextualBar/ExportMessages/ExportMessages.tsx +++ b/apps/meteor/client/views/room/contextualBar/ExportMessages/ExportMessages.tsx @@ -1,8 +1,8 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { ContextualbarHeader, ContextualbarIcon, ContextualbarTitle, ContextualbarClose } from '../../../../components/Contextualbar'; import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator'; @@ -23,7 +23,7 @@ export type MailExportFormValues = { }; const ExportMessages = () => { - const t = useTranslation(); + const { t } = useTranslation(); const room = useRoom(); const { closeTab } = useRoomToolbox(); diff --git a/apps/meteor/client/views/room/contextualBar/ExportMessages/FileExport.tsx b/apps/meteor/client/views/room/contextualBar/ExportMessages/FileExport.tsx index 9f52085e7bd29..7344926ec646f 100644 --- a/apps/meteor/client/views/room/contextualBar/ExportMessages/FileExport.tsx +++ b/apps/meteor/client/views/room/contextualBar/ExportMessages/FileExport.tsx @@ -2,9 +2,9 @@ import type { IRoom } from '@rocket.chat/core-typings'; import type { SelectOption } from '@rocket.chat/fuselage'; import { Field, FieldLabel, FieldRow, Select, ButtonGroup, Button, FieldGroup, InputBox } from '@rocket.chat/fuselage'; import { useAutoFocus, useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../../components/Contextualbar'; import type { MailExportFormValues } from './ExportMessages'; @@ -18,7 +18,7 @@ type FileExportProps = { }; const FileExport = ({ formId, rid, exportOptions, onCancel }: FileExportProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { control, handleSubmit } = useFormContext(); const roomExportMutation = useRoomExportMutation(); const formFocus = useAutoFocus(); diff --git a/apps/meteor/client/views/room/contextualBar/ExportMessages/MailExportForm.tsx b/apps/meteor/client/views/room/contextualBar/ExportMessages/MailExportForm.tsx index 39e043bb9c0bf..41b6c33fec6c4 100644 --- a/apps/meteor/client/views/room/contextualBar/ExportMessages/MailExportForm.tsx +++ b/apps/meteor/client/views/room/contextualBar/ExportMessages/MailExportForm.tsx @@ -17,9 +17,9 @@ import { Select, } from '@rocket.chat/fuselage'; import { useAutoFocus, useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useEffect, useContext } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { validateEmail } from '../../../../../lib/emailValidator'; import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../../components/Contextualbar'; @@ -36,7 +36,7 @@ type MailExportFormProps = { }; const MailExportForm = ({ formId, rid, onCancel, exportOptions }: MailExportFormProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const formFocus = useAutoFocus(); const { diff --git a/apps/meteor/client/views/room/contextualBar/Info/ChannelToTeamModal/ChannelToTeamConfirmation.tsx b/apps/meteor/client/views/room/contextualBar/Info/ChannelToTeamModal/ChannelToTeamConfirmation.tsx index 459557bde32ac..84c93e307cb1c 100644 --- a/apps/meteor/client/views/room/contextualBar/Info/ChannelToTeamModal/ChannelToTeamConfirmation.tsx +++ b/apps/meteor/client/views/room/contextualBar/Info/ChannelToTeamModal/ChannelToTeamConfirmation.tsx @@ -1,6 +1,6 @@ import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../../../../components/GenericModal'; @@ -10,7 +10,7 @@ type ChannelToTeamConfirmationProps = { }; const ChannelToTeamConfirmation = ({ onCancel, onConfirm }: ChannelToTeamConfirmationProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); const { name, fname, description, topic, archived, broadcast, announcement } = room; const roomTitle = fname || name; const isDiscussion = 'prid' in room; diff --git a/apps/meteor/client/views/room/contextualBar/Info/hooks/useRoomActions.ts b/apps/meteor/client/views/room/contextualBar/Info/hooks/useRoomActions.ts index 302a2c476e9d4..512fb83fa1532 100644 --- a/apps/meteor/client/views/room/contextualBar/Info/hooks/useRoomActions.ts +++ b/apps/meteor/client/views/room/contextualBar/Info/hooks/useRoomActions.ts @@ -1,6 +1,6 @@ import type { IRoom } from '@rocket.chat/core-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useDeleteRoom } from '../../../../hooks/roomActions/useDeleteRoom'; import { useRoomConvertToTeam } from './actions/useRoomConvertToTeam'; @@ -17,7 +17,7 @@ type UseRoomActionsOptions = { export const useRoomActions = (room: IRoom, options: UseRoomActionsOptions) => { const { onClickEnterRoom, onClickEdit, resetState } = options; - const t = useTranslation(); + const { t } = useTranslation(); const handleHide = useRoomHide(room); const handleLeave = useRoomLeave(room); const { handleDelete, canDeleteRoom } = useDeleteRoom(room, { reload: resetState }); diff --git a/apps/meteor/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcuts.tsx b/apps/meteor/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcuts.tsx index 505a7cbc85901..6dab532b27c6c 100644 --- a/apps/meteor/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcuts.tsx +++ b/apps/meteor/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcuts.tsx @@ -1,6 +1,6 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { ContextualbarHeader, @@ -12,7 +12,7 @@ import { import KeyboardShortcutSection from './KeyboardShortcutSection'; const KeyboardShortcuts = ({ handleClose }: { handleClose: () => void }): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( <> diff --git a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/MessageSearchTab.tsx b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/MessageSearchTab.tsx index e61bd736768b9..6a3c74fd3fa41 100644 --- a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/MessageSearchTab.tsx +++ b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/MessageSearchTab.tsx @@ -1,6 +1,6 @@ import { Callout } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { ContextualbarClose, @@ -22,7 +22,7 @@ const MessageSearchTab = () => { const [{ searchText, globalSearch }, handleSearch] = useState({ searchText: '', globalSearch: false }); - const t = useTranslation(); + const { t } = useTranslation(); return ( <> diff --git a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearchForm.tsx b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearchForm.tsx index b9c076e367819..e59ed2cdf7806 100644 --- a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearchForm.tsx +++ b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearchForm.tsx @@ -2,9 +2,9 @@ import type { IMessageSearchProvider } from '@rocket.chat/core-typings'; import { Box, Field, FieldLabel, FieldHint, Icon, TextInput, ToggleSwitch, Callout } from '@rocket.chat/fuselage'; import { useDebouncedCallback, useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useEffect } from 'react'; import { useForm, useWatch } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { getRoomTypeTranslation } from '../../../../../lib/getRoomTypeTranslation'; import { useRoom } from '../../../contexts/RoomContext'; @@ -45,7 +45,7 @@ const MessageSearchForm = ({ provider, onSearch }: MessageSearchFormProps) => { const globalSearchEnabled = provider.settings.GlobalSearchEnabled; const globalSearchToggleId = useUniqueId(); - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.tsx b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.tsx index 5066825d8311e..c7ccb8b612326 100644 --- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.tsx +++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.tsx @@ -1,9 +1,9 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { Button, ButtonGroup } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; import { useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { ContextualbarHeader, @@ -30,7 +30,7 @@ const NotificationPreferences = ({ notificationOptions, handlePlaySound, }: NotificationPreferencesProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { formState: { isDirty, isSubmitting }, } = useFormContext(); diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx index dcf1522197eee..b9b54af27c08f 100644 --- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx +++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx @@ -1,8 +1,8 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { FieldGroup, IconButton, Margins } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; import { useFormContext, Controller } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import NotificationByDevice from './components/NotificationByDevice'; import NotificationPreference from './components/NotificationPreference'; @@ -16,7 +16,7 @@ type NotificationPreferencesFormProps = { }; const NotificationPreferencesForm = ({ notificationOptions, handlePlaySound }: NotificationPreferencesFormProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { watch, control } = useFormContext(); const { showCounter } = watch(); diff --git a/apps/meteor/client/views/room/contextualBar/OTR/OTR.tsx b/apps/meteor/client/views/room/contextualBar/OTR/OTR.tsx index aaf119e703ff3..89c82fd966ec7 100644 --- a/apps/meteor/client/views/room/contextualBar/OTR/OTR.tsx +++ b/apps/meteor/client/views/room/contextualBar/OTR/OTR.tsx @@ -1,8 +1,8 @@ import type { IUser } from '@rocket.chat/core-typings'; import { Box, Button, Callout, Throbber } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { MouseEventHandler, ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { OtrRoomState } from '../../../../../app/otr/lib/OtrRoomState'; import { @@ -27,7 +27,7 @@ type OTRProps = { }; const OTR = ({ isOnline, onClickClose, onClickStart, onClickEnd, onClickRefresh, otrState, peerUsername }: OTRProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const room = useRoom(); const renderOTRState = (): ReactElement => { diff --git a/apps/meteor/client/views/room/contextualBar/OTR/components/OTREstablished.tsx b/apps/meteor/client/views/room/contextualBar/OTR/components/OTREstablished.tsx index e74dbb5c54f62..21be67e28011e 100644 --- a/apps/meteor/client/views/room/contextualBar/OTR/components/OTREstablished.tsx +++ b/apps/meteor/client/views/room/contextualBar/OTR/components/OTREstablished.tsx @@ -1,7 +1,7 @@ import { Button, ButtonGroup } 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'; type OTREstablishedProps = { onClickRefresh: () => void; @@ -9,7 +9,7 @@ type OTREstablishedProps = { }; const OTREstablished = ({ onClickRefresh, onClickEnd }: OTREstablishedProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/room/contextualBar/OTR/components/OTRStates.tsx b/apps/meteor/client/views/room/contextualBar/OTR/components/OTRStates.tsx index 0794c829b58ae..67f3e62d15921 100644 --- a/apps/meteor/client/views/room/contextualBar/OTR/components/OTRStates.tsx +++ b/apps/meteor/client/views/room/contextualBar/OTR/components/OTRStates.tsx @@ -1,8 +1,8 @@ import { States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage'; import type { Keys as IconName } from '@rocket.chat/icons'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type OTRStatesProps = { title: string; @@ -12,7 +12,7 @@ type OTRStatesProps = { }; const OTRStates = ({ title, description, icon, onClickStart }: OTRStatesProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.tsx b/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.tsx index 17242ed06daa8..88b979dc8bc3f 100644 --- a/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.tsx +++ b/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.tsx @@ -1,9 +1,9 @@ import { Field, FieldLabel, FieldRow, ButtonGroup, Button, CheckBox, Callout } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; import { useFormContext, Controller } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import { ContextualbarHeader, @@ -25,7 +25,7 @@ type PruneMessagesProps = { }; const PruneMessages = ({ callOutText, validateText, onClickClose, onClickPrune }: PruneMessagesProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { control, register } = useFormContext(); const inclusiveCheckboxId = useUniqueId(); diff --git a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx index be479ffe77bdf..e699ee6f6c774 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx @@ -1,9 +1,9 @@ import type { IUpload, IUploadWithUser } from '@rocket.chat/core-typings'; import type { SelectOption } from '@rocket.chat/fuselage'; import { Box, Icon, TextInput, Select, Throbber, ContextualbarSection } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { FormEvent } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { Virtuoso } from 'react-virtuoso'; import { @@ -42,7 +42,7 @@ const RoomFiles = ({ onClickClose, onClickDelete, }: RoomFilesProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const options: SelectOption[] = useMemo( () => [ diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx index 59a06fdb42511..1dc2a4c57191b 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx @@ -1,9 +1,9 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { Box, Field, FieldLabel, FieldRow, Select, Button } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; import { useForm, Controller } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; type EditInviteLinkProps = { daysAndMaxUses: { days: string; maxUses: string }; @@ -11,7 +11,7 @@ type EditInviteLinkProps = { }; const EditInviteLink = ({ daysAndMaxUses, onClickNewLink }: EditInviteLinkProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { handleSubmit, formState: { isDirty, isSubmitting }, diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx index cd2fb2a22a4b4..e5aabea4a6881 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx @@ -1,7 +1,7 @@ import { Box, Field, FieldLabel, FieldRow, UrlInput, Icon, Button, InputBox } 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 useClipboardWithToast from '../../../../../hooks/useClipboardWithToast'; @@ -12,7 +12,7 @@ type InviteLinkProps = { }; const InviteLink = ({ linkText, captionText, onClickEdit }: InviteLinkProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { copy } = useClipboardWithToast(linkText); return ( diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.tsx index fa7a915a7285d..1ae82e75681ad 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.tsx @@ -1,7 +1,7 @@ import { Callout } 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 { ContextualbarHeader, @@ -38,7 +38,7 @@ const InviteUsers = ({ linkText, error, }: InviteUsersProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( <> diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx index 130bea5557a08..a9ba5dd9dc0c1 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx @@ -1,8 +1,8 @@ import type { IUser, IRoom } from '@rocket.chat/core-typings'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useUserInfoActions } from '../../hooks/useUserInfoActions'; @@ -12,7 +12,7 @@ type RoomMembersActionsProps = Pick { - const t = useTranslation(); + const { t } = useTranslation(); const { menuActions: menuOptions } = useUserInfoActions({ rid, diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx index 03a80c4960287..4a0e717464174 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx @@ -1,9 +1,9 @@ import type { IMessage } from '@rocket.chat/core-typings'; import { Message, Box, IconButton } from '@rocket.chat/fuselage'; import { MessageAvatar } from '@rocket.chat/ui-avatar'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, MouseEventHandler, ReactElement, ReactNode } from 'react'; import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; import Emoji from '../../../../../components/Emoji'; import { followStyle, anchor } from '../../../../../components/message/helpers/followSyle'; @@ -47,7 +47,7 @@ const ThreadListMessage = ({ emoji, ...props }: ThreadListMessageProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const formatDate = useTimeAgo(); const button = !following ? 'bell-off' : 'bell'; diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageItem.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageItem.tsx index 4e151bab4bec4..3245b1c030102 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageItem.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageItem.tsx @@ -1,7 +1,7 @@ import type { IThreadMainMessage, IThreadMessage } from '@rocket.chat/core-typings'; import { Box, Bubble, MessageDivider } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import SystemMessage from '../../../../../components/message/variants/SystemMessage'; import ThreadMessage from '../../../../../components/message/variants/ThreadMessage'; @@ -27,7 +27,7 @@ export const ThreadMessageItem = ({ firstUnread, system, }: ThreadMessageProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const formatDate = useFormatDate(); const ref = useDateRef(); diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx index ff86c0e6170fa..bf600a757f26c 100644 --- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx +++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx @@ -2,9 +2,9 @@ import type { IRoom, IUser } from '@rocket.chat/core-typings'; import { ButtonGroup, IconButton, Skeleton } from '@rocket.chat/fuselage'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { UserInfoAction } from '../../../../components/UserInfo'; import { useMemberExists } from '../../../hooks/useMemberExists'; @@ -17,7 +17,7 @@ type UserInfoActionsProps = { }; const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { data: isMemberData, refetch, diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfConfigModal.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfConfigModal.tsx index 41a980dccf318..89aecda07fdc8 100644 --- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfConfigModal.tsx +++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfConfigModal.tsx @@ -1,7 +1,7 @@ import { Modal, Button, Box, Callout, Margins } 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'; type VideoConfConfigModalProps = { onClose: () => void; @@ -10,7 +10,7 @@ type VideoConfConfigModalProps = { }; const VideoConfConfigModal = ({ onClose, onConfirm, isAdmin }: VideoConfConfigModalProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx index b9da11fcd67d9..c8c7b6a59e3bb 100644 --- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx +++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx @@ -1,9 +1,9 @@ import type { VideoConference } from '@rocket.chat/core-typings'; import { Box, States, StatesIcon, StatesTitle, StatesSubtitle, Throbber } from '@rocket.chat/fuselage'; import { useResizeObserver } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Virtuoso } from 'react-virtuoso'; import { @@ -29,7 +29,7 @@ type VideoConfListProps = { }; const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loadMoreItems }: VideoConfListProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { ref, contentBoxSize: { inlineSize = 378, blockSize = 1 } = {} } = useResizeObserver({ debounceDelay: 200, diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/IncomingPopup.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/IncomingPopup.tsx index 44727aae98c98..09ddfb51b3a26 100644 --- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/IncomingPopup.tsx +++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/IncomingPopup.tsx @@ -1,7 +1,6 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Skeleton } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { VideoConfPopup, VideoConfPopupContent, @@ -16,6 +15,7 @@ import { } from '@rocket.chat/ui-video-conf'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useVideoConfSetPreferences } from '../../../../../../contexts/VideoConfContext'; import { AsyncStatePhase } from '../../../../../../hooks/useAsyncState'; @@ -32,7 +32,7 @@ type IncomingPopupProps = { }; const IncomingPopup = ({ id, room, position, onClose, onMute, onConfirm }: IncomingPopupProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { controllersConfig, handleToggleMic, handleToggleCam } = useVideoConfControllers(); const setPreferences = useVideoConfSetPreferences(); diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/OutgoingPopup.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/OutgoingPopup.tsx index 92f30c0c1cea1..eaf82c5a301e1 100644 --- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/OutgoingPopup.tsx +++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/OutgoingPopup.tsx @@ -1,5 +1,4 @@ import type { IRoom } from '@rocket.chat/core-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { VideoConfPopup, VideoConfPopupContent, @@ -14,6 +13,7 @@ import { } from '@rocket.chat/ui-video-conf'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useVideoConfCapabilities, useVideoConfPreferences } from '../../../../../../contexts/VideoConfContext'; import VideoConfPopupRoomInfo from './VideoConfPopupRoomInfo'; @@ -25,7 +25,7 @@ type OutgoingPopupProps = { }; const OutgoingPopup = ({ room, onClose, id }: OutgoingPopupProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const videoConfPreferences = useVideoConfPreferences(); const { controllersConfig } = useVideoConfControllers(videoConfPreferences); const capabilities = useVideoConfCapabilities(); diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/StartCallPopup.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/StartCallPopup.tsx index d1bc3a29231b9..a9fcb8527767f 100644 --- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/StartCallPopup.tsx +++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/StartCallPopup.tsx @@ -1,6 +1,5 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { useOutsideClick, useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { VideoConfPopup, VideoConfPopupHeader, @@ -15,6 +14,7 @@ import { } from '@rocket.chat/ui-video-conf'; import type { KeyboardEvent, ReactElement } from 'react'; import React, { useCallback, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useVideoConfSetPreferences, useVideoConfCapabilities, useVideoConfPreferences } from '../../../../../../contexts/VideoConfContext'; import { useVideoConfRoomName } from '../../hooks/useVideoConfRoomName'; @@ -29,7 +29,7 @@ type StartCallPopupProps = { }; const StartCallPopup = ({ id, loading, room, onClose, onConfirm }: StartCallPopupProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const ref = useRef(null); useOutsideClick([ref], !loading ? onClose : () => undefined); diff --git a/apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx b/apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx index 6b48a47a79efc..ff96e220723aa 100644 --- a/apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx +++ b/apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx @@ -1,7 +1,7 @@ import { AudioPlayer, Box, Icon } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useEffect, useState, memo } from 'react'; +import { useTranslation } from 'react-i18next'; import { userAgentMIMETypeFallback } from '../../../../lib/utils/userAgentMIMETypeFallback'; import { FilePreviewType } from './FilePreview'; @@ -38,7 +38,7 @@ type MediaPreviewProps = { const MediaPreview = ({ file, fileType }: MediaPreviewProps): ReactElement => { const [loaded, url] = useFileAsDataURL(file); - const t = useTranslation(); + const { t } = useTranslation(); if (!loaded) { return ; diff --git a/apps/meteor/client/views/room/modals/ReactionListModal/ReactionListModal.tsx b/apps/meteor/client/views/room/modals/ReactionListModal/ReactionListModal.tsx index 70a91df0e5550..cd309923ffd4a 100644 --- a/apps/meteor/client/views/room/modals/ReactionListModal/ReactionListModal.tsx +++ b/apps/meteor/client/views/room/modals/ReactionListModal/ReactionListModal.tsx @@ -1,7 +1,7 @@ import type { IMessage } from '@rocket.chat/core-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../../../components/GenericModal'; import Reactions from './Reactions'; @@ -12,7 +12,7 @@ type ReactionListModalProps = { }; const ReactionListModal = ({ reactions, onClose }: ReactionListModalProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/FilePickerBreadcrumbs.tsx b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/FilePickerBreadcrumbs.tsx index 827e16b1ac60d..3f152db142e94 100644 --- a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/FilePickerBreadcrumbs.tsx +++ b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/FilePickerBreadcrumbs.tsx @@ -1,7 +1,7 @@ import { Box, Icon, IconButton, Tag } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, MouseEvent } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; type FilePickerBreadcrumbsProps = { parentFolders: string[]; @@ -10,7 +10,7 @@ type FilePickerBreadcrumbsProps = { }; const FilePickerBreadcrumbs = ({ parentFolders, handleBreadcrumb, handleBack }: FilePickerBreadcrumbsProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerTable.tsx b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerTable.tsx index e85248fca0e9d..32b379eca432a 100644 --- a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerTable.tsx +++ b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerTable.tsx @@ -1,8 +1,8 @@ import type { IWebdavNode } from '@rocket.chat/core-typings'; import { Box, Icon } 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 GenericNoResults from '../../../../components/GenericNoResults'; import { @@ -36,7 +36,7 @@ const WebdavFilePickerTable = ({ onNodeClick, isLoading, }: WebdavFilePickerTableProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( diff --git a/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTable.tsx b/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTable.tsx index f7f14bc8199d6..2bb54f1fc69c5 100644 --- a/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTable.tsx +++ b/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTable.tsx @@ -1,8 +1,8 @@ import type { IRoom, Serialized } from '@rocket.chat/core-typings'; import { Box, CheckBox } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericTable, GenericTableHeaderCell, GenericTableHeader, GenericTableBody } from '../../../components/GenericTable'; import { useSort } from '../../../components/GenericTable/hooks/useSort'; @@ -29,7 +29,7 @@ const ChannelDesertionTable = ({ }: ChannelDesertionTableProps) => { const { sortBy, sortDirection, setSort } = useSort<'name' | 'ts'>('name'); - const t = useTranslation(); + const { t } = useTranslation(); const selectedRoomsLength = Object.values(selectedRooms).filter(Boolean).length; diff --git a/apps/meteor/client/views/teams/ConvertToChannelModal/ModalSteps/FirstStep.tsx b/apps/meteor/client/views/teams/ConvertToChannelModal/ModalSteps/FirstStep.tsx index ae5b30609d78a..a4aba906e7d92 100644 --- a/apps/meteor/client/views/teams/ConvertToChannelModal/ModalSteps/FirstStep.tsx +++ b/apps/meteor/client/views/teams/ConvertToChannelModal/ModalSteps/FirstStep.tsx @@ -1,7 +1,7 @@ import type { IRoom, Serialized } from '@rocket.chat/core-typings'; import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../../../components/GenericModal'; import ChannelDesertionTable from '../../ChannelDesertionTable'; @@ -28,7 +28,7 @@ const FirstStep = ({ eligibleRoomsLength, ...props }: FirstStepProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); return ( void }) => { - const t = useTranslation(); + const { t } = useTranslation(); const { handleRemoveRoom, canRemoveTeamChannel } = useRemoveRoomFromTeam(room, { reload }); const { handleDelete, canDeleteRoom } = useDeleteRoom(room, { reload }); diff --git a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx index b1847825ffab0..288604727ef67 100644 --- a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx +++ b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx @@ -2,9 +2,9 @@ import type { IRoom } from '@rocket.chat/core-typings'; import type { SelectOption } from '@rocket.chat/fuselage'; import { Box, Icon, TextInput, Select, Throbber, ButtonGroup, Button } from '@rocket.chat/fuselage'; import { useMutableCallback, useAutoFocus, useDebouncedCallback } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ChangeEvent, Dispatch, SetStateAction, SyntheticEvent } from 'react'; import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { Virtuoso } from 'react-virtuoso'; import { @@ -54,7 +54,7 @@ const TeamsChannels = ({ onClickView, reload, }: TeamsChannelsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const inputRef = useAutoFocus(true); const options: SelectOption[] = useMemo( diff --git a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/ChannelDeletionTable.tsx b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/ChannelDeletionTable.tsx index 4bd85aed663c9..24555a1fc9e0b 100644 --- a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/ChannelDeletionTable.tsx +++ b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/ChannelDeletionTable.tsx @@ -1,7 +1,7 @@ import type { IRoom, Serialized } from '@rocket.chat/core-typings'; import { Box, CheckBox } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { GenericTable, GenericTableHeaderCell, GenericTableBody, GenericTableHeader } from '../../../../../../components/GenericTable'; import { useSort } from '../../../../../../components/GenericTable/hooks/useSort'; @@ -15,7 +15,7 @@ type ChannelDeletionTableProps = { }; const ChannelDeletionTable = ({ rooms, onChangeRoomSelection, selectedRooms, onToggleAllRooms }: ChannelDeletionTableProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { sortBy, sortDirection, setSort } = useSort<'name' | 'usersCount'>('name'); const selectedRoomsLength = Object.values(selectedRooms).filter(Boolean).length; diff --git a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamChannels.tsx b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamChannels.tsx index 0a02e12434315..e87eb5825af66 100644 --- a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamChannels.tsx +++ b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamChannels.tsx @@ -1,7 +1,7 @@ import type { IRoom, Serialized } from '@rocket.chat/core-typings'; import { Box } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../../../../components/GenericModal'; import ChannelDeletionTable from './ChannelDeletionTable'; @@ -23,7 +23,7 @@ const DeleteTeamChannels = ({ onConfirm, onChangeRoomSelection, }: DeleteTeamChannelsProps) => { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); const roomIds = Object.values(deletedRooms).map(({ _id }) => _id); return ( diff --git a/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamModal/LeaveTeamModalChannels.tsx b/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamModal/LeaveTeamModalChannels.tsx index 0a4b0fbe6af35..230828ef6795c 100644 --- a/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamModal/LeaveTeamModalChannels.tsx +++ b/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamModal/LeaveTeamModalChannels.tsx @@ -1,7 +1,7 @@ import type { IRoom, Serialized } from '@rocket.chat/core-typings'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import GenericModal from '../../../../../../components/GenericModal'; import ChannelDesertionTable from '../../../../ChannelDesertionTable'; @@ -27,7 +27,7 @@ const LeaveTeamModalChannels = ({ eligibleRoomsLength, selectedRooms, }: LeaveTeamModalChannelsProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); const retentionPolicy = useRetentionPolicy(room); diff --git a/apps/meteor/client/voip/modal/DialPad/DialInput.tsx b/apps/meteor/client/voip/modal/DialPad/DialInput.tsx index cf96f4e265075..36a81d47ec8f4 100644 --- a/apps/meteor/client/voip/modal/DialPad/DialInput.tsx +++ b/apps/meteor/client/voip/modal/DialPad/DialInput.tsx @@ -1,7 +1,7 @@ import { IconButton, TextInput } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ChangeEvent, FocusEvent } from 'react'; import React, { forwardRef } from 'react'; +import { useTranslation } from 'react-i18next'; type DialInputProps = { inputName: string; @@ -16,7 +16,7 @@ export const DialInput = forwardRef(function D { handleBackspaceClick, handleOnChange, isButtonDisabled, inputError, inputName }, ref, ) { - const t = useTranslation(); + const { t } = useTranslation(); return ( { - const t = useTranslation(); + const { t } = useTranslation(); const outboundClient = useOutboundDialer(); const { closeDialModal } = useDialModal(); diff --git a/apps/meteor/server/lib/i18n.ts b/apps/meteor/server/lib/i18n.ts index da0efeb5c4a41..7b1d289462ae3 100644 --- a/apps/meteor/server/lib/i18n.ts +++ b/apps/meteor/server/lib/i18n.ts @@ -22,9 +22,8 @@ void i18n.init({ declare module 'i18next' { // eslint-disable-next-line @typescript-eslint/naming-convention interface TFunction { - (key: RocketchatI18nKeys, options?: TOptions): string; - (key: RocketchatI18nKeys, ...options: unknown[]): string; - (key: T extends string ? (T extends RocketchatI18nKeys ? T : never) : never, options?: TOptions): string; + (key: RocketchatI18nKeys): string; + (key: RocketchatI18nKeys, options: TOptions): string; } } diff --git a/apps/meteor/server/modules/core-apps/mention.module.ts b/apps/meteor/server/modules/core-apps/mention.module.ts index ac615def8a5a2..76d3a22ea53b7 100644 --- a/apps/meteor/server/modules/core-apps/mention.module.ts +++ b/apps/meteor/server/modules/core-apps/mention.module.ts @@ -44,13 +44,10 @@ export class MentionModule implements IUiKitCoreApp { if (actionId === 'dismiss') { void api.broadcast('notify.ephemeralMessage', payload.user._id, payload.room, { - msg: i18n.t( - 'You_mentioned___mentions__but_theyre_not_in_this_room', - { - mentions: joinedUsernames, - }, - payload.user.language, - ), + msg: i18n.t('You_mentioned___mentions__but_theyre_not_in_this_room', { + mentions: joinedUsernames, + lng: payload.user.language, + }), _id: payload.message, tmid: message.tmid, mentions, @@ -61,13 +58,10 @@ export class MentionModule implements IUiKitCoreApp { if (actionId === 'add-users') { void addUsersToRoomMethod(payload.user._id, { rid: payload.room, users: usernames as string[] }, payload.user); void api.broadcast('notify.ephemeralMessage', payload.user._id, payload.room, { - msg: i18n.t( - 'You_mentioned___mentions__but_theyre_not_in_this_room', - { - mentions: joinedUsernames, - }, - payload.user.language, - ), + msg: i18n.t('You_mentioned___mentions__but_theyre_not_in_this_room', { + mentions: joinedUsernames, + lng: payload.user.language, + }), tmid: message.tmid, _id: payload.message, mentions, @@ -87,13 +81,10 @@ export class MentionModule implements IUiKitCoreApp { throw new Error('Mention bot - Failed to retrieve path to room'); } - const messageText = i18n.t( - 'Youre_not_a_part_of__channel__and_I_mentioned_you_there', - { - channel: `#${sub.name}`, - }, - payload.user.language, - ); + const messageText = i18n.t('Youre_not_a_part_of__channel__and_I_mentioned_you_there', { + channel: `#${sub.name}`, + lng: payload.user.language, + }); const link = new URL(Meteor.absoluteUrl(roomPath)); link.searchParams.set('msg', message._id); @@ -109,13 +100,10 @@ export class MentionModule implements IUiKitCoreApp { ); void api.broadcast('notify.ephemeralMessage', payload.user._id, payload.room, { - msg: i18n.t( - 'You_mentioned___mentions__but_theyre_not_in_this_room_You_let_them_know_via_dm', - { - mentions: joinedUsernames, - }, - payload.user.language, - ), + msg: i18n.t('You_mentioned___mentions__but_theyre_not_in_this_room_You_let_them_know_via_dm', { + mentions: joinedUsernames, + lng: payload.user.language, + }), tmid: message.tmid, _id: payload.message, mentions, diff --git a/packages/gazzodown/src/elements/LinkSpan.tsx b/packages/gazzodown/src/elements/LinkSpan.tsx index 5472c12e6d637..6ac649768db6e 100644 --- a/packages/gazzodown/src/elements/LinkSpan.tsx +++ b/packages/gazzodown/src/elements/LinkSpan.tsx @@ -1,7 +1,7 @@ import type * as MessageParser from '@rocket.chat/message-parser'; import { getBaseURI, isExternal } from '@rocket.chat/ui-client'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { ReactElement, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import BoldSpan from './BoldSpan'; import ItalicSpan from './ItalicSpan'; @@ -14,7 +14,7 @@ type LinkSpanProps = { }; const LinkSpan = ({ href, label }: LinkSpanProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const children = useMemo(() => { const labelArray = Array.isArray(label) ? label : [label]; diff --git a/packages/gazzodown/src/elements/PlainSpan.tsx b/packages/gazzodown/src/elements/PlainSpan.tsx index 5824902077178..06460c3486525 100644 --- a/packages/gazzodown/src/elements/PlainSpan.tsx +++ b/packages/gazzodown/src/elements/PlainSpan.tsx @@ -1,5 +1,5 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import { Fragment, memo, ReactElement, useContext, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { MarkupInteractionContext } from '../MarkupInteractionContext'; @@ -8,7 +8,7 @@ type PlainSpanProps = { }; const PlainSpan = ({ text }: PlainSpanProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { highlightRegex, markRegex } = useContext(MarkupInteractionContext); const content = useMemo(() => { diff --git a/packages/gazzodown/src/mentions/ChannelMentionElement.tsx b/packages/gazzodown/src/mentions/ChannelMentionElement.tsx index 6b8e8518a4224..54f22ccca7d87 100644 --- a/packages/gazzodown/src/mentions/ChannelMentionElement.tsx +++ b/packages/gazzodown/src/mentions/ChannelMentionElement.tsx @@ -1,6 +1,6 @@ import { Message } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { memo, ReactElement, useContext, useMemo, KeyboardEvent } from 'react'; +import { useTranslation } from 'react-i18next'; import { MarkupInteractionContext } from '../MarkupInteractionContext'; @@ -11,7 +11,7 @@ type ChannelMentionElementProps = { const handleChannelMention = (mention: string, withSymbol: boolean | undefined): string => (withSymbol ? `#${mention}` : mention); const ChannelMentionElement = ({ mention }: ChannelMentionElementProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { resolveChannelMention, onChannelMentionClick, showMentionSymbol } = useContext(MarkupInteractionContext); const resolved = useMemo(() => resolveChannelMention?.(mention), [mention, resolveChannelMention]); diff --git a/packages/gazzodown/src/mentions/UserMentionElement.tsx b/packages/gazzodown/src/mentions/UserMentionElement.tsx index a9ba5567541f9..6f52a16a5482a 100644 --- a/packages/gazzodown/src/mentions/UserMentionElement.tsx +++ b/packages/gazzodown/src/mentions/UserMentionElement.tsx @@ -1,6 +1,6 @@ import { Message } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { memo, ReactElement, useContext, useMemo, KeyboardEvent } from 'react'; +import { useTranslation } from 'react-i18next'; import { MarkupInteractionContext } from '../MarkupInteractionContext'; @@ -12,7 +12,7 @@ const handleUserMention = (mention: string | undefined, withSymbol: boolean | un withSymbol ? `@${mention}` : mention; const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const { resolveUserMention, onUserMentionClick, ownUserId, useRealName, showMentionSymbol, triggerProps } = useContext(MarkupInteractionContext); diff --git a/packages/ui-client/src/components/CustomFieldsForm.tsx b/packages/ui-client/src/components/CustomFieldsForm.tsx index 76cfc44fe0107..f7874f417fd0f 100644 --- a/packages/ui-client/src/components/CustomFieldsForm.tsx +++ b/packages/ui-client/src/components/CustomFieldsForm.tsx @@ -3,10 +3,10 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { Field, FieldLabel, FieldRow, FieldError, Select, TextInput } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { useCallback, useMemo } from 'react'; import type { Control, FieldValues, FieldError as RHFFieldError } from 'react-hook-form'; import { Controller, useFormState, get } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; type CustomFieldFormProps = { metadata: CustomFieldMetadata[]; @@ -34,7 +34,7 @@ const CustomField = ({ options = [], ...props }: CustomFieldProps) => { - const t = useTranslation(); + const { t } = useTranslation(); const { errors } = useFormState({ control }); const fieldId = useUniqueId(); @@ -54,9 +54,9 @@ const CustomField = ({ case 'required': return t('Required_field', { field: label || name }); case 'minLength': - return t('Min_length_is', props?.minLength); + return t('Min_length_is', { postProcess: 'sprintf', sprintf: [props?.minLength] }); case 'maxLength': - return t('Max_length_is', props?.maxLength); + return t('Max_length_is', { postProcess: 'sprintf', sprintf: [props?.maxLength] }); } }, [label, name, props?.maxLength, props?.minLength, t], diff --git a/packages/ui-client/src/components/FeaturePreview/FeaturePreviewBadge.tsx b/packages/ui-client/src/components/FeaturePreview/FeaturePreviewBadge.tsx index eece30cc72803..5e7974c5e3de0 100644 --- a/packages/ui-client/src/components/FeaturePreview/FeaturePreviewBadge.tsx +++ b/packages/ui-client/src/components/FeaturePreview/FeaturePreviewBadge.tsx @@ -1,10 +1,10 @@ import { Badge } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation } from 'react-i18next'; import { usePreferenceFeaturePreviewList } from '../../hooks/usePreferenceFeaturePreviewList'; const FeaturePreviewBadge = () => { - const t = useTranslation(); + const { t } = useTranslation(); const { unseenFeatures } = usePreferenceFeaturePreviewList(); if (!unseenFeatures) { diff --git a/packages/ui-client/src/components/GenericMenu/GenericMenu.spec.tsx b/packages/ui-client/src/components/GenericMenu/GenericMenu.spec.tsx index bdd7f5fbda18d..7762967bcf2a7 100644 --- a/packages/ui-client/src/components/GenericMenu/GenericMenu.spec.tsx +++ b/packages/ui-client/src/components/GenericMenu/GenericMenu.spec.tsx @@ -1,3 +1,4 @@ +import { mockAppRoot } from '@rocket.chat/mock-providers'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -30,7 +31,7 @@ const sections = [regular, danger]; describe('Room Actions Menu', () => { it('should render kebab menu with the list content', async () => { - render(, { legacyRoot: true }); + render(, { wrapper: mockAppRoot().build(), legacyRoot: true }); await userEvent.click(screen.getByRole('button')); @@ -39,7 +40,7 @@ describe('Room Actions Menu', () => { }); it('should have two different sections, regular and danger', async () => { - render(, { legacyRoot: true }); + render(, { wrapper: mockAppRoot().build(), legacyRoot: true }); await userEvent.click(screen.getByRole('button')); @@ -48,7 +49,7 @@ describe('Room Actions Menu', () => { }); it('should call the action when item clicked', async () => { - render(, { legacyRoot: true }); + render(, { wrapper: mockAppRoot().build(), legacyRoot: true }); await userEvent.click(screen.getByRole('button')); await userEvent.click(screen.getAllByRole('menuitem')[0]); diff --git a/packages/ui-client/src/components/GenericMenu/GenericMenu.tsx b/packages/ui-client/src/components/GenericMenu/GenericMenu.tsx index 03e003475619c..871682e0d82b8 100644 --- a/packages/ui-client/src/components/GenericMenu/GenericMenu.tsx +++ b/packages/ui-client/src/components/GenericMenu/GenericMenu.tsx @@ -1,6 +1,6 @@ import { IconButton, MenuItem, MenuSection, MenuV2 } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import { cloneElement, type ComponentProps, type ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; import type { GenericMenuItemProps } from './GenericMenuItem'; import GenericMenuItem from './GenericMenuItem'; @@ -30,7 +30,7 @@ type GenericMenuConditionalProps = type GenericMenuProps = GenericMenuCommonProps & GenericMenuConditionalProps & Omit, 'children'>; const GenericMenu = ({ title, icon = 'menu', disabled, onAction, callbackAction, button, className, ...props }: GenericMenuProps) => { - const t = useTranslation(); + const { t, i18n } = useTranslation(); const sections = 'sections' in props && props.sections; const items = 'items' in props && props.items; @@ -61,7 +61,7 @@ const GenericMenu = ({ title, icon = 'menu', disabled, onAction, callbackAction, {sections && ( {sections.map(({ title, items }, key) => ( @@ -86,7 +86,7 @@ const GenericMenu = ({ title, icon = 'menu', disabled, onAction, callbackAction, {items && ( { ]} onSelected={jest.fn()} />, - { legacyRoot: true }, + { wrapper: mockAppRoot().build(), legacyRoot: true }, ); const option1 = screen.getByLabelText('Option 1'); @@ -32,7 +33,7 @@ it('should not render group title as selectable option', () => { ]} onSelected={jest.fn()} />, - { legacyRoot: true }, + { wrapper: mockAppRoot().build(), legacyRoot: true }, ); expect(screen.getByText('Group title')).toBeInTheDocument(); diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx index 7a2268743fd42..55c976e6da9d3 100644 --- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx +++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx @@ -1,8 +1,8 @@ import { Box, CheckBox, Icon, Option, SearchInput, Tile } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { FormEvent } from 'react'; import { Fragment, useCallback, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { type OptionProp } from './MultiSelectCustom'; import { useFilteredOptions } from './useFilteredOptions'; @@ -16,7 +16,7 @@ const MultiSelectCustomList = ({ onSelected: (item: OptionProp, e?: FormEvent) => void; searchBarText?: string; }) => { - const t = useTranslation(); + const { t } = useTranslation(); const [text, setText] = useState(''); diff --git a/packages/ui-client/src/components/MultiSelectCustom/useFilteredOptions.tsx b/packages/ui-client/src/components/MultiSelectCustom/useFilteredOptions.ts similarity index 85% rename from packages/ui-client/src/components/MultiSelectCustom/useFilteredOptions.tsx rename to packages/ui-client/src/components/MultiSelectCustom/useFilteredOptions.ts index 341c261791985..9b65b9ad37a67 100644 --- a/packages/ui-client/src/components/MultiSelectCustom/useFilteredOptions.tsx +++ b/packages/ui-client/src/components/MultiSelectCustom/useFilteredOptions.ts @@ -1,10 +1,10 @@ import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import { useTranslation } from '@rocket.chat/ui-contexts'; +import { useTranslation } from 'react-i18next'; import type { OptionProp } from './MultiSelectCustom'; export const useFilteredOptions = (optionSearch: string | undefined, options: OptionProp[]) => { - const t = useTranslation(); + const { t } = useTranslation(); if (!optionSearch) return options; diff --git a/packages/ui-client/src/components/UserStatus/UserStatus.tsx b/packages/ui-client/src/components/UserStatus/UserStatus.tsx index 92513498247b5..35db492977247 100644 --- a/packages/ui-client/src/components/UserStatus/UserStatus.tsx +++ b/packages/ui-client/src/components/UserStatus/UserStatus.tsx @@ -1,14 +1,14 @@ import { StatusBullet } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; export type UserStatusProps = { small?: boolean; } & ComponentProps; function UserStatus({ small, status, ...props }: UserStatusProps): ReactElement { - const t = useTranslation(); + const { t } = useTranslation(); const size = small ? 'small' : 'large'; switch (status) { diff --git a/packages/web-ui-registration/src/SecretRegisterInvalidForm.tsx b/packages/web-ui-registration/src/SecretRegisterInvalidForm.tsx index 60cfef030dc35..d1fa2df3d4b39 100644 --- a/packages/web-ui-registration/src/SecretRegisterInvalidForm.tsx +++ b/packages/web-ui-registration/src/SecretRegisterInvalidForm.tsx @@ -1,10 +1,10 @@ -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; +import { useTranslation } from 'react-i18next'; import VerticalTemplate from './template/VerticalTemplate'; const SecretRegisterInvalidForm = (): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); return (