diff --git a/apps/meteor/client/hooks/useDownloadFromServiceWorker.ts b/apps/meteor/client/hooks/useDownloadFromServiceWorker.ts index 199d1507e284..c6a55716df65 100644 --- a/apps/meteor/client/hooks/useDownloadFromServiceWorker.ts +++ b/apps/meteor/client/hooks/useDownloadFromServiceWorker.ts @@ -1,5 +1,6 @@ import { Emitter } from '@rocket.chat/emitter'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; +import type { TFunction } from 'i18next'; import { useCallback, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; @@ -17,7 +18,7 @@ if ('serviceWorker' in navigator) { }); } -export const registerDownloadForUid = (uid: string, t: ReturnType['t'], title?: string) => { +export const registerDownloadForUid = (uid: string, t: TFunction, title?: string) => { ee.once(uid, ({ result }) => { downloadAs({ data: [new Blob([result])] }, title ?? t('Download')); }); diff --git a/apps/meteor/client/views/admin/import/ImportProgressPage.tsx b/apps/meteor/client/views/admin/import/ImportProgressPage.tsx index a8e083543398..3ad95a4c6b61 100644 --- a/apps/meteor/client/views/admin/import/ImportProgressPage.tsx +++ b/apps/meteor/client/views/admin/import/ImportProgressPage.tsx @@ -1,9 +1,10 @@ import type { ProgressStep } from '@rocket.chat/core-typings'; import { Box, Margins, ProgressBar, Throbber } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { useToastMessageDispatch, useEndpoint, useTranslation, useStream, useRouter } from '@rocket.chat/ui-contexts'; +import { useToastMessageDispatch, useEndpoint, useStream, useRouter } from '@rocket.chat/ui-contexts'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import React, { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import { ImportingStartedStates } from '../../../../app/importer/lib/ImporterProgressStep'; import { numberFormat } from '../../../../lib/utils/stringUtils'; @@ -14,7 +15,7 @@ import { useErrorHandler } from './useErrorHandler'; const ImportProgressPage = function ImportProgressPage() { const queryClient = useQueryClient(); const streamer = useStream('importers'); - const t = useTranslation(); + const { t, i18n } = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); const handleError = useErrorHandler(); @@ -77,7 +78,7 @@ const ImportProgressPage = function ImportProgressPage() { switch (step) { case 'importer_done': - t.has(message) && + i18n.exists(message) && dispatchToastMessage({ type: 'success', message: t(message), @@ -87,7 +88,7 @@ const ImportProgressPage = function ImportProgressPage() { case 'importer_import_failed': case 'importer_import_cancelled': - t.has(message) && handleError(message); + i18n.exists(message) && handleError(message); router.navigate('/admin/import'); return; diff --git a/apps/meteor/client/views/banners/hooks/useUserBanners.ts b/apps/meteor/client/views/banners/hooks/useUserBanners.ts index e7a88fd7ee86..d78c9ce430a6 100644 --- a/apps/meteor/client/views/banners/hooks/useUserBanners.ts +++ b/apps/meteor/client/views/banners/hooks/useUserBanners.ts @@ -1,5 +1,6 @@ -import { useTranslation, useUser } from '@rocket.chat/ui-contexts'; +import { useUser } from '@rocket.chat/ui-contexts'; import { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import * as banners from '../../../lib/banners'; import { useDismissUserBannerMutation } from './useDismissUserBannerMutation'; @@ -7,7 +8,7 @@ import { useDismissUserBannerMutation } from './useDismissUserBannerMutation'; export const useUserBanners = () => { const user = useUser(); - const t = useTranslation(); + const { t, i18n } = useTranslation(); const { mutate: dismissUserBanner } = useDismissUserBannerMutation(); useEffect(() => { @@ -25,8 +26,8 @@ export const useUserBanners = () => { banners.open({ id: firstBanner.id, - title: t.has(firstBanner.title) ? t(firstBanner.title) : firstBanner.title, - text: t.has(firstBanner.text) ? t(firstBanner.text, firstBanner.textArguments) : firstBanner.text, + title: i18n.exists(firstBanner.title) ? t(firstBanner.title) : firstBanner.title, + text: i18n.exists(firstBanner.text) ? t(firstBanner.text, firstBanner.textArguments) : firstBanner.text, modifiers: firstBanner.modifiers, action() { if (firstBanner.link) { @@ -37,5 +38,5 @@ export const useUserBanners = () => { dismissUserBanner({ id: firstBanner.id }); }, }); - }, [dismissUserBanner, t, user?.banners]); + }, [dismissUserBanner, i18n, t, user?.banners]); }; diff --git a/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx b/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx index 245a2a0112f3..8beb6612eaa0 100644 --- a/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx +++ b/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx @@ -2,9 +2,10 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { isOmnichannelRoom } from '@rocket.chat/core-typings'; import { useLocalStorage } from '@rocket.chat/fuselage-hooks'; import { escapeRegExp } from '@rocket.chat/string-helpers'; -import { useMethod, useSetting, useTranslation, useUserPreference } from '@rocket.chat/ui-contexts'; +import { useMethod, useSetting, useUserPreference } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; import type { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; import { hasAtLeastOnePermission } from '../../../../app/authorization/client'; import { CannedResponse } from '../../../../app/canned-responses/client/collections/CannedResponse'; @@ -24,7 +25,12 @@ import type { ComposerBoxPopupUserProps } from '../composer/ComposerBoxPopupUser import type { ComposerPopupContextValue } from '../contexts/ComposerPopupContext'; import { ComposerPopupContext, createMessageBoxPopupConfig } from '../contexts/ComposerPopupContext'; -const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room: IRoom }) => { +type ComposerPopupProviderProps = { + children: ReactNode; + room: IRoom; +}; + +const ComposerPopupProvider = ({ children, room }: ComposerPopupProviderProps) => { const { _id: rid, encrypted: isRoomEncrypted } = room; const userSpotlight = useMethod('spotlight'); const suggestionsCount = useSetting('Number_of_users_autocomplete_suggestions'); @@ -32,7 +38,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room: const [recentEmojis] = useLocalStorage('emoji.recent', []); const isOmnichannel = isOmnichannelRoom(room); const useEmoji = useUserPreference('useEmojis'); - const t = useTranslation(); + const { t, i18n } = useTranslation(); const e2eEnabled = useSetting('E2E_Enable'); const unencryptedMessagesAllowed = useSetting('E2E_Allow_Unencrypted_Messages'); const encrypted = isRoomEncrypted && e2eEnabled && !unencryptedMessagesAllowed; @@ -289,8 +295,8 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room: const item = slashCommands.commands[command]; return { _id: command, - params: item.params && t.has(item.params) ? t(item.params) : item.params ?? '', - description: item.description && t.has(item.description) ? t(item.description) : item.description, + params: item.params && i18n.exists(item.params) ? t(item.params) : item.params ?? '', + description: item.description && i18n.exists(item.description) ? t(item.description) : item.description, permission: item.permission, ...(encrypted && { disabled: encrypted }), }; @@ -365,7 +371,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room: }, }), ].filter(Boolean); - }, [t, cannedResponseEnabled, isOmnichannel, recentEmojis, suggestionsCount, userSpotlight, rid, call, useEmoji, encrypted]); + }, [t, i18n, cannedResponseEnabled, isOmnichannel, recentEmojis, suggestionsCount, userSpotlight, rid, call, useEmoji, encrypted]); return ; };