fix: fixed translation function and contexts

src/boot/app/app-context-provider.tsx

@@ -6,11 +6,13 @@
 
 import React, { FC } from 'react';
 import { I18nextProvider } from 'react-i18next';
+import { SHELL_APP_ID } from '../../constants';
+import { useI18nStore } from '../../store/i18n';
 import AppErrorCatcher from './app-error-catcher';
-import { useI18n } from '../../store/i18n';
 
 const AppContextProvider: FC<{ pkg: string }> = ({ pkg, children }) => {
-	const i18n = useI18n(pkg)();
+	const { instances, defaultI18n } = useI18nStore.getState();
+	const i18n = instances[pkg] ?? instances[SHELL_APP_ID] ?? defaultI18n;
 	return (
 		<I18nextProvider i18n={i18n}>
 			<AppErrorCatcher>{children}</AppErrorCatcher>

src/boot/app/app-loader-functions.ts

@@ -76,7 +76,7 @@ import { getTags, useTags } from '../../store/tags';
 import { useNotify, useRefresh } from '../../store/network';
 import { changeTagColor, createTag, deleteTag, renameTag } from '../../network/tags';
 import { runSearch } from '../../search/run-search';
-import { getI18n, useI18n, getTFunction } from '../../store/i18n';
+import { getI18n, getTFunction } from '../../store/i18n';
 import {
 	addBoard,
 	closeBoard,
@@ -97,7 +97,6 @@ import { getNotificationManager } from '../../notification/NotificationManager';
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const getAppFunctions = (pkg: CarbonioModule): Record<string, Function> => ({
 	// I18N
-	useI18n: useI18n(pkg.name),
 	getI18n: getI18n(pkg.name),
 	t: getTFunction(pkg.name),
 	// FETCH

src/boot/app/default-views.ts

@@ -6,25 +6,27 @@
 /* eslint-disable no-param-reassign */
 
 import produce from 'immer';
-import { TFunction } from 'i18next';
-import { useAppStore } from '../../store/app';
-import { SearchAppView } from '../../search/search-app-view';
-import { SettingsAppView } from '../../settings/settings-app-view';
-import { SettingsSidebar } from '../../settings/settings-sidebar';
+import { TFunction } from 'react-i18next';
 import { AppState, PrimaryBarView, SettingsView } from '../../../types';
-import GeneralSettings from '../../settings/general-settings';
-import Feedback from '../../reporting/feedback';
+import { SEARCH_APP_ID, SETTINGS_APP_ID, SHELL_APP_ID } from '../../constants';
 import DevBoard from '../../dev/dev-board';
 import DevBoardTrigger from '../../dev/dev-board-trigger';
-import { SEARCH_APP_ID, SETTINGS_APP_ID, SHELL_APP_ID } from '../../constants';
+import Feedback from '../../reporting/feedback';
+import { SearchAppView } from '../../search/search-app-view';
 import AccountWrapper from '../../settings/account-wrapper';
+import GeneralSettings from '../../settings/general-settings';
 import { settingsSubSections } from '../../settings/general-settings-sub-sections';
+import { SettingsAppView } from '../../settings/settings-app-view';
+import { SettingsSidebar } from '../../settings/settings-sidebar';
+import { useAppStore } from '../../store/app';
+import { useI18nStore } from '../../store/i18n';
 
 const settingsRoute = {
 	route: SETTINGS_APP_ID,
 	id: SETTINGS_APP_ID,
 	app: SETTINGS_APP_ID
 };
+
 const settingsPrimaryBar = (t: TFunction): PrimaryBarView => ({
 	id: SETTINGS_APP_ID,
 	app: SETTINGS_APP_ID,
@@ -56,7 +58,7 @@ const settingsGeneralView = (t: TFunction): SettingsView => ({
 	app: SHELL_APP_ID,
 	component: GeneralSettings,
 	icon: 'SettingsModOutline',
-	label: t('settings.general.general', 'General'),
+	label: t('settings.general.general', 'General Settings'),
 	position: 1,
 	subSections: settingsSubSections(t)
 });

src/boot/app/load-apps.ts

@@ -6,13 +6,14 @@
 
 import { filter, map } from 'lodash';
 
-import { loadApp, unloadApps } from './load-app';
 import { CarbonioModule } from '../../../types';
-import { injectSharedLibraries } from './shared-libraries';
-import { getUserSetting } from '../../store/account';
-import { useReporter } from '../../reporting';
 import { SHELL_APP_ID } from '../../constants';
-import { addI18n } from '../../store/i18n';
+import { useReporter } from '../../reporting';
+import { useAccountStore } from '../../store/account';
+import { getUserSetting } from '../../store/account/hooks';
+import { useI18nStore } from '../../store/i18n';
+import { loadApp, unloadApps } from './load-app';
+import { injectSharedLibraries } from './shared-libraries';
 
 export function loadApps(apps: Array<CarbonioModule>): void {
 	injectSharedLibraries();
@@ -25,8 +26,13 @@ export function loadApps(apps: Array<CarbonioModule>): void {
 		'%cLOADING APPS',
 		'color: white; background: #2b73d2;padding: 4px 8px 2px 4px; font-family: sans-serif; border-radius: 12px; width: 100%'
 	);
+	const { settings } = useAccountStore.getState();
+	const locale =
+		(settings?.prefs?.zimbraPrefLocale as string) ??
+		(settings?.attrs?.zimbraLocale as string) ??
+		'en';
+	useI18nStore.getState().actions.addI18n(appsToLoad, locale);
 	useReporter.getState().setClients(appsToLoad);
-	addI18n(appsToLoad);
 	Promise.allSettled(map(appsToLoad, (app) => loadApp(app)));
 }
 

src/boot/bootstrapper-context.ts

@@ -4,16 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { createContext, useContext } from 'react';
+import { createContext } from 'react';
 
 export const BootstrapperContext = createContext<any>({});
-
-export function useI18nFactory(): any {
-	const { i18nFactory } = useContext(BootstrapperContext);
-	return i18nFactory;
-}
-
-export function useStoreFactory(): any {
-	const { storeFactory } = useContext(BootstrapperContext);
-	return storeFactory;
-}

src/boot/bootstrapper-provider.tsx

@@ -6,11 +6,11 @@
 
 import React, { FC } from 'react';
 import { I18nextProvider } from 'react-i18next';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
+import { SHELL_APP_ID } from '../constants';
 import { useI18nStore } from '../store/i18n';
 
-const BootstrapperContextProvider: FC = ({ children }) => (
-	<I18nextProvider i18n={useI18nStore.getState().defaultI18n}>{children}</I18nextProvider>
-);
+const BootstrapperContextProvider: FC = ({ children }) => {
+	const i18n = useI18nStore((s) => s.instances[SHELL_APP_ID]);
+	return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+};
 export default BootstrapperContextProvider;

src/boot/bootstrapper-router.tsx

@@ -4,23 +4,21 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { FC, useContext, useEffect } from 'react';
-import { BrowserRouter, Route, Switch, useHistory, useParams } from 'react-router-dom';
 import {
-	SnackbarManagerContext,
-	ModalManagerContext,
 	ModalManager,
-	SnackbarManager
+	ModalManagerContext,
+	SnackbarManager,
+	SnackbarManagerContext
 } from '@zextras/carbonio-design-system';
-import { useTranslation } from 'react-i18next';
-import AppLoaderMounter from './app/app-loader-mounter';
+import React, { FC, useContext, useEffect } from 'react';
+import { TFunction, useTranslation } from 'react-i18next';
+import { BrowserRouter, Route, Switch, useHistory, useParams } from 'react-router-dom';
 import { useBridge } from '../store/context-bridge';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import ShellView from '../shell/shell-view';
+import AppLoaderMounter from './app/app-loader-mounter';
 import { BASENAME, IS_STANDALONE } from '../constants';
-import { useAppStore } from '../store/app';
 import { NotificationPermissionChecker } from '../notification/NotificationPermissionChecker';
+import ShellView from '../shell/shell-view';
+import { useAppStore } from '../store/app';
 import { registerDefaultViews } from './app/default-views';
 
 const ContextBridge: FC = () => {
@@ -47,32 +45,34 @@ const StandaloneListener: FC = () => {
 	return null;
 };
 
-const DefaultViewsRegister: FC = () => {
-	const [t] = useTranslation();
+const DefaultViewsRegister: FC<{ t: TFunction }> = ({ t }) => {
 	useEffect(() => {
 		registerDefaultViews(t);
 	}, [t]);
 	return null;
 };
 
-const BootstrapperRouter: FC = () => (
-	<BrowserRouter basename={BASENAME}>
-		<SnackbarManager>
-			<ModalManager>
-				{IS_STANDALONE && (
-					<Switch>
-						<Route path={'/:route'}>
-							<StandaloneListener />
-						</Route>
-					</Switch>
-				)}
-				<DefaultViewsRegister />
-				<NotificationPermissionChecker />
-				<ContextBridge />
-				<AppLoaderMounter />
-				<ShellView />
-			</ModalManager>
-		</SnackbarManager>
-	</BrowserRouter>
-);
+const BootstrapperRouter: FC = () => {
+	const { t } = useTranslation();
+	return (
+		<BrowserRouter basename={BASENAME}>
+			<SnackbarManager>
+				<ModalManager>
+					{IS_STANDALONE && (
+						<Switch>
+							<Route path={'/:route'}>
+								<StandaloneListener />
+							</Route>
+						</Switch>
+					)}
+					<DefaultViewsRegister t={t} />
+					<NotificationPermissionChecker />
+					<ContextBridge />
+					<AppLoaderMounter />
+					<ShellView />
+				</ModalManager>
+			</SnackbarManager>
+		</BrowserRouter>
+	);
+};
 export default BootstrapperRouter;

src/boot/bootstrapper.tsx

@@ -5,12 +5,11 @@
  */
 
 import React, { FC, useEffect } from 'react';
-import { SnackbarManager, ModalManager } from '@zextras/carbonio-design-system';
+import { unloadAllApps } from './app/load-apps';
+import BootstrapperContextProvider from './bootstrapper-provider';
+import BootstrapperRouter from './bootstrapper-router';
 import { init } from './init';
 import { ThemeProvider } from './theme-provider';
-import BootstrapperRouter from './bootstrapper-router';
-import BootstrapperContextProvider from './bootstrapper-provider';
-import { unloadAllApps } from './app/load-apps';
 
 const Bootstrapper: FC = () => {
 	useEffect(() => {

src/boot/init.ts

@@ -4,19 +4,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { useAccountStore } from '../store/account';
+import { getInfo } from '../network/get-info';
 import { useAppStore } from '../store/app';
 import { loadApps } from './app/load-apps';
-import { getInfo } from '../network/get-info';
-import { setLocale } from '../store/i18n';
 
 export const init = (): void => {
 	getInfo().finally(() => {
-		setLocale(
-			(useAccountStore.getState().settings?.prefs?.zimbraPrefLocale as string) ??
-				(useAccountStore.getState().settings?.attrs?.zimbraLocale as string) ??
-				'en'
-		);
 		loadApps(Object.values(useAppStore.getState().apps));
 	});
 };

src/reporting/feedback.tsx

@@ -4,34 +4,34 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, {
-	useEffect,
-	useState,
-	useCallback,
-	useReducer,
-	useMemo,
-	FC,
-	useContext
-} from 'react';
+import { Event, Severity } from '@sentry/browser';
 import {
-	Text,
 	ButtonOld as Button,
-	Select,
 	Container,
-	Row,
+	ContainerProps,
 	Icon,
+	Row,
+	Select,
 	SnackbarManagerContext,
-	ContainerProps,
-	SelectItem
+	Text
 } from '@zextras/carbonio-design-system';
-import { Severity, Event } from '@sentry/browser';
 import { filter, find, map } from 'lodash';
+import React, {
+	FC,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useReducer,
+	useState
+} from 'react';
+import { TFunction } from 'react-i18next';
 import styled from 'styled-components';
-import { TFunction, useTranslation } from 'react-i18next';
 import { useUserAccount } from '../store/account';
-import { feedback } from './functions';
 import { useAppList } from '../store/app';
 import { closeBoard } from '../store/boards';
+import { getT } from '../store/i18n';
+import { feedback } from './functions';
 
 const TextArea = styled.textarea<{ size?: string }>`
 	width: 100%;
@@ -218,8 +218,7 @@ const _LabelFactory: FC<{
 );
 
 const Feedback: FC = () => {
-	const [t] = useTranslation();
-	const topics = useMemo(() => getTopics(t), [t]);
+	const t = getT();
 	const allApps = useAppList();
 	const apps = useMemo(
 		() => filter(allApps, (app) => !!app.sentryDsn),
@@ -371,9 +370,9 @@ const Feedback: FC = () => {
 					</Row>
 					<Select
 						label={t('feedback.select_a_topic', 'Select a topic')}
-						items={topics}
+						items={getTopics(t)}
 						defaultSelection={
-							find(topics, ['value', event.extra?.topic]) ?? { label: '', value: '' }
+							find(getTopics(t), ['value', event.extra?.topic]) ?? { label: '', value: '' }
 						}
 						onChange={onTopicSelect}
 						LabelFactory={LabelFactory}

src/search/search-app-view.tsx

@@ -4,8 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { map } from 'lodash';
-import React, { FC, ReactElement, useCallback, useMemo } from 'react';
 import {
 	Button,
 	Chip,
@@ -15,13 +13,15 @@ import {
 	Padding,
 	Text
 } from '@zextras/carbonio-design-system';
-import { useTranslation } from 'react-i18next';
+import { map } from 'lodash';
+import React, { FC, ReactElement, useCallback, useMemo } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import AppContextProvider from '../boot/app/app-context-provider';
-import { useSearchStore } from './search-store';
 import { QueryChip, ResultLabelType } from '../../types';
-import { useAppStore } from '../store/app';
+import AppContextProvider from '../boot/app/app-context-provider';
 import { SEARCH_APP_ID } from '../constants';
+import { useAppStore } from '../store/app';
+import { getT } from '../store/i18n';
+import { useSearchStore } from './search-store';
 // import { RouteLeavingGuard } from '../ui-extras/nav-guard';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -46,7 +46,7 @@ const ResultsHeader: FC<{ label: string; labelType?: ResultLabelType }> = ({
 	label,
 	labelType = ResultLabelType.NORMAL
 }) => {
-	const [t] = useTranslation();
+	const t = getT();
 	const [query, updateQuery] = useQuery();
 	const [, setDisabled] = useDisableSearch();