Replace some hooks

RocketChat · Sep 10, 2024 · 367f7ab · 367f7ab
1 parent ac186ba
commit 367f7ab
Show file tree

Hide file tree

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git 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<ComponentProps<typeof ContextualbarAction>>;
 
 const ContextualbarClose = (props: ContextualbarCloseProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	return <ContextualbarAction data-qa='ContextualbarActionClose' {...props} aria-label={t('Close')} name='cross' />;
 };
 

diff --git 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<HTMLInputElement, FilterByTextProps>(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
@@ -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 (
 		<GenericModal
 			variant='warning'

diff --git a/apps/meteor/client/components/FingerprintChangeModalConfirmation.tsx b/apps/meteor/client/components/FingerprintChangeModalConfirmation.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';
 
@@ -16,7 +16,7 @@ const FingerprintChangeModalConfirmation = ({
 	onCancel,
 	newWorkspace,
 }: FingerprintChangeModalConfirmationProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	return (
 		<GenericModal
 			variant='warning'

diff --git a/apps/meteor/client/components/GenericError/GenericError.tsx b/apps/meteor/client/components/GenericError/GenericError.tsx
@@ -1,7 +1,7 @@
 import { Box, States, StatesIcon, StatesTitle, 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 GenericErrorProps = {
 	icon?: IconName;
@@ -11,7 +11,7 @@ type GenericErrorProps = {
 };
 
 const GenericError = ({ icon = 'magnifier', title, buttonTitle, buttonAction }: GenericErrorProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	return (
 		<Box display='flex' height='100%' flexDirection='column' justifyContent='center'>

diff --git a/apps/meteor/client/components/GenericMenu/GenericMenu.tsx b/apps/meteor/client/components/GenericMenu/GenericMenu.tsx
@@ -1,7 +1,7 @@
 import { IconButton, MenuItem, MenuSection, MenuV2 } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactNode } from 'react';
 import React 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<ComponentProps<typeof MenuV2>, 'children'>;
 
 const GenericMenu = ({ title, icon = 'menu', disabled, onAction, callbackAction, ...props }: GenericMenuProps) => {
-	const t = useTranslation();
+	const { t, i18n } = useTranslation();
 
 	const sections = 'sections' in props && props.sections;
 	const items = 'items' in props && props.items;
@@ -55,14 +55,14 @@ const GenericMenu = ({ title, icon = 'menu', disabled, onAction, callbackAction,
 			{sections && (
 				<MenuV2
 					icon={icon}
-					title={t.has(title) ? t(title) : title}
+					title={i18n.exists(title) ? t(title) : title}
 					onAction={onAction || handleAction}
 					{...(disabledKeys && { disabledKeys })}
 					{...props}
 				>
 					{sections.map(({ title, items }, key) => (
 						<MenuSection
-							title={typeof title === 'string' && t.has(title) ? t(title) : title}
+							title={typeof title === 'string' && i18n.exists(title) ? t(title) : title}
 							items={handleItems(items)}
 							key={`${title}-${key}`}
 						>
@@ -78,7 +78,7 @@ const GenericMenu = ({ title, icon = 'menu', disabled, onAction, callbackAction,
 			{items && (
 				<MenuV2
 					icon={icon}
-					title={t.has(title) ? t(title) : title}
+					title={i18n.exists(title) ? t(title) : title}
 					onAction={onAction || handleAction}
 					{...(disabledKeys && { disabledKeys })}
 					{...props}

diff --git 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);