load i18n messages

src/App.tsx

@@ -5,8 +5,8 @@ import { IntlProvider } from 'react-intl';
 import { ErrorBoundary } from '@components/ErrorBoundary';
 import { ROUTES } from '@common/constants/routes.constants';
 import { OKAPI_CONFIG } from '@common/constants/api.constants';
-import { BASE_LOCALE, i18nMessages } from '@common/i18n/messages';
 import { localStorageService } from '@common/services/storage';
+import { useLoadI18nMessages } from '@common/hooks/useLoadI18nMessages';
 import { Root, Search, Load, EditWrapper, ExternalResourceEdit } from '@views';
 import state from '@state';
 import { ServicesProvider } from './providers';
@@ -59,13 +59,14 @@ const createRouter = (basename: string) => createBrowserRouter(routes, { basenam
 const Container: FC<IContainer> = ({ routePrefix = '', config }) => {
   const locale = useRecoilValue(state.config.locale);
   const setCustomEvents = useSetRecoilState(state.config.customEvents);
+  const { i18nMessages, baseLocaleMessages } = useLoadI18nMessages();
 
   useEffect(() => {
     setCustomEvents(config?.customEvents as Record<string, string>);
   }, [config]);
 
   return (
-    <IntlProvider messages={i18nMessages[locale] || BASE_LOCALE} locale={locale} defaultLocale="en-US">
+    <IntlProvider messages={i18nMessages[locale] || baseLocaleMessages} locale={locale} defaultLocale="en-US">
       <ErrorBoundary>
         <ServicesProvider>
           <RouterProvider router={createRouter(routePrefix)} />

src/common/helpers/locales.helper.ts

@@ -0,0 +1,20 @@
+export const loadI18nMessages = async (localesList: Record<string, string>) => {
+  const supportedLocales = Object.values(localesList);
+  const messages = {} as I18nMessages;
+
+  for await (const locale of supportedLocales) {
+    try {
+      const result = await fetch(`/translations/ui-linked-data/${locale}.json`);
+
+      if (result.ok) {
+        const parsedMessages = await result.json();
+
+        messages[locale] = parsedMessages;
+      }
+    } catch (error) {
+      console.error('Error occured while loading i18n messages', error);
+    }
+  }
+
+  return messages;
+};

src/common/hooks/useLoadI18nMessages.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+import { loadI18nMessages } from '@common/helpers/locales.helper';
+import { LOCALES } from '@common/i18n/locales';
+import baseLocaleMessages from '@translations/ui-linked-data/en.json';
+import state from '@state';
+
+export const useLoadI18nMessages = () => {
+  const [i18nMessages, setI18nMessages] = useRecoilState(state.config.i18nMessages);
+
+  useEffect(() => {
+    async function onLoad() {
+      try {
+        const messages = await loadI18nMessages(LOCALES);
+        setI18nMessages(messages);
+      } catch (error) {
+        console.error('Messages loading failed', error);
+      }
+    }
+
+    onLoad();
+  }, []);
+
+  return { i18nMessages, baseLocaleMessages };
+};

src/common/i18n/locales.ts

@@ -1,8 +1,6 @@
 export const LOCALES = {
+  BASE_ENGLISH: 'en',
   ENGLISH: 'en-US',
-  JAPANESE: 'ja-JA',
-  FRENCH: 'fr-FR',
-  GERMAN: 'de-DE',
 };
 
 export const LOCALE_DISPLAY_NAMES: Record<string, string> = {

src/state/config.ts

@@ -38,6 +38,11 @@ const locale = atom<(typeof LOCALES)[keyof typeof LOCALES]>({
   default: localStorageService.deserialize(OKAPI_CONFIG)?.locale || LOCALES.ENGLISH,
 });
 
+const i18nMessages = atom<I18nMessages>({
+  key: 'config.i18nMessages',
+  default: {},
+});
+
 const collectRecordDataForPreview = atom<boolean>({
   key: 'config.collectRecordDataForPreview',
   default: false,
@@ -61,6 +66,7 @@ export default {
   initialSchemaKey,
   selectedEntries,
   locale,
+  i18nMessages,
   collectRecordDataForPreview,
   customEvents,
   clonePrototypes,

src/types/config.d.ts

@@ -0,0 +1 @@
+type I18nMessages = Record<string, Record<string, string>>;