From e07ece0d4d079c100d6ed579963408a0d1357e02 Mon Sep 17 00:00:00 2001
From: Siarhei Karol <135722306+SKarolFolio@users.noreply.github.com>
Date: Mon, 11 Nov 2024 18:38:11 +0500
Subject: [PATCH] Fix: Load i18n messages for the default locale (#30)

---
 src/App.tsx                             | 4 +++-
 src/common/constants/i18n.constants.ts  | 1 +
 src/common/hooks/useLoadI18nMessages.ts | 4 ++--
 src/providers/AsyncIntlProvider.tsx     | 7 ++++---
 4 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 src/common/constants/i18n.constants.ts

diff --git a/src/App.tsx b/src/App.tsx
index 41384545..15e36d03 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,10 +4,12 @@ import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { ErrorBoundary } from '@components/ErrorBoundary';
 import { Loading } from '@components/Loading';
 import { ROUTES } from '@common/constants/routes.constants';
+import { DEFAULT_LOCALE } from '@common/constants/i18n.constants';
 import { OKAPI_CONFIG } from '@common/constants/api.constants';
 import { localStorageService } from '@common/services/storage';
 import { Root, Search, EditWrapper, ExternalResourcePreview } from '@views';
 import state from '@state';
+import en from '../translations/ui-linked-data/en.json';
 import { AsyncIntlProvider, ServicesProvider } from './providers';
 import './App.scss';
 
@@ -54,7 +56,7 @@ const createRouter = (basename: string) => createBrowserRouter(routes, { basenam
 const Container: FC<IContainer> = ({ routePrefix = '', config }) => {
   const setCustomEvents = useSetRecoilState(state.config.customEvents);
   const setHasNavigationOrigin = useSetRecoilState(state.config.hasNavigationOrigin);
-  const cachedMessages = useRef({});
+  const cachedMessages = useRef({ [DEFAULT_LOCALE]: en });
 
   useEffect(() => {
     setCustomEvents(config?.customEvents as Record<string, string>);
diff --git a/src/common/constants/i18n.constants.ts b/src/common/constants/i18n.constants.ts
new file mode 100644
index 00000000..aba9dae7
--- /dev/null
+++ b/src/common/constants/i18n.constants.ts
@@ -0,0 +1 @@
+export const DEFAULT_LOCALE = 'en';
\ No newline at end of file
diff --git a/src/common/hooks/useLoadI18nMessages.ts b/src/common/hooks/useLoadI18nMessages.ts
index 6522d615..3663ce39 100644
--- a/src/common/hooks/useLoadI18nMessages.ts
+++ b/src/common/hooks/useLoadI18nMessages.ts
@@ -1,6 +1,6 @@
 import { loadI18nMessages } from '@common/helpers/locales.helper';
 
-export const useLoadI18nMessages = (cachedMessages: I18nMessages) => {
+export const useLoadI18nMessages = (cachedMessages: I18nMessages, defaultLocale = 'en') => {
   const getMessages = (locale: string) => {
     if (cachedMessages?.[locale]) {
       return cachedMessages?.[locale];
@@ -13,7 +13,7 @@ export const useLoadI18nMessages = (cachedMessages: I18nMessages) => {
     const messages = await loadI18nMessages(locale);
 
     if (messages) {
-      cachedMessages[locale] = messages;
+      cachedMessages[locale] = {...cachedMessages[defaultLocale], ...messages};
     }
   };
 
diff --git a/src/providers/AsyncIntlProvider.tsx b/src/providers/AsyncIntlProvider.tsx
index 03ee505d..67ba400f 100644
--- a/src/providers/AsyncIntlProvider.tsx
+++ b/src/providers/AsyncIntlProvider.tsx
@@ -2,21 +2,22 @@ import { FC } from 'react';
 import { IntlProvider } from 'react-intl';
 import { useRecoilValue } from 'recoil';
 import { useLoadI18nMessages } from '@common/hooks/useLoadI18nMessages';
+import { DEFAULT_LOCALE } from '@common/constants/i18n.constants';
 import state from '@state';
 
 type AsyncIntlProviderProps = {
-  cachedMessages: Record<string, Record<string, string>>;
+  cachedMessages: I18nMessages;
   children: React.ReactNode;
 };
 
 export const AsyncIntlProvider: FC<AsyncIntlProviderProps> = ({ cachedMessages, children }) => {
   const locale = useRecoilValue(state.config.locale);
-  const { getMessages } = useLoadI18nMessages(cachedMessages);
+  const { getMessages } = useLoadI18nMessages(cachedMessages, DEFAULT_LOCALE);
 
   const i18nMessages = getMessages(locale);
 
   return (
-    <IntlProvider messages={i18nMessages || {}} locale={locale} defaultLocale="en-US">
+    <IntlProvider messages={i18nMessages || {}} locale={locale} defaultLocale={DEFAULT_LOCALE}>
       {children}
     </IntlProvider>
   );