Fix: Load i18n messages for the default locale (#30)

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

src/common/constants/i18n.constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_LOCALE = 'en';

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};
     }
   };
 

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