@applica-software-guru/react-admin 1.5.266 → 1.5.268

package/src/ApplicaAdmin.tsx

@@ -118,6 +118,7 @@ function ApplicaAdmin({
     },
     [logoMain, logoIcon, name, copy, version, error, notificationAPI, enableNotification, enableThemeToggler]
   );
+
   const i18nProvider = useI18nProvider({
     apiUrl: apiUrl,
     defaultLocale: defaultLocale,
@@ -225,7 +226,7 @@ type ApplicaAdminProps = AdminProps & {
    * The i18n provider activation function.
    * If not specified, the default i18n provider is used.
    */
-  i18nProvider?: () => I18nProvider;
+  i18nProvider?: Promise<I18nProvider>;
 
   /**
    * Indicates the handler to use for error management.

package/src/components/Layout/Layout.tsx

@@ -18,10 +18,11 @@ type ILayoutProps = React.PropsWithChildren<{
   copy?: string;
   error?: React.ComponentType<ErrorProps>;
   enableThemeToggler: boolean;
+  enableNotification: boolean;
 }>;
 
 const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
-  const { name, version, enableThemeToggler } = props;
+  const { name, version, enableThemeToggler, enableNotification } = props;
   const { isLoading, navigation, breadcrumbs } = useBreadcrumbs();
 
   return (
@@ -32,7 +33,7 @@ const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
         {enableThemeToggler ? <ThemeToggler /> : null}
         <ThemeColor />
         <LoadingIndicator />
-        <HeaderNotification />
+        {enableNotification ? <HeaderNotification /> : null}
         <ResponsiveSection>
           <HeaderProfile />
         </ResponsiveSection>

package/src/i18n/createI18nProvider.tsx

@@ -16,7 +16,11 @@ type ICreateI18nProviderData = {
   defaultLocale: string;
   allowMissing?: boolean;
   createMissing?: boolean;
-  customProvider?: () => I18nProvider;
+  customProvider?: Promise<I18nProvider>;
+};
+type ICreateJsonI18nProviderData = {
+  path: string;
+  defaultLocale: string;
 };
 type IPolyglotOptions = {
   phrases?: IDictionary;
@@ -89,5 +93,49 @@ function createI18nProvider(data: ICreateI18nProviderData): Promise<any> {
   });
 }
 
+/**
+ * Create an I18nProvider that fetches translations from JSON files.
+ *
+ * @param data {ICreateI18nProviderData} - The data to create the I18nProvider
+ * @returns {Promise<I18nProvider>} - The I18nProvider
+ */
+function createJsonI18nProvider(data: ICreateJsonI18nProviderData): Promise<I18nProvider> {
+  const { defaultLocale, path } = data;
+  const defaultLanguages: Array<Locale> = [{ locale: defaultLocale, name: defaultLocale }];
+  const headers = new Headers({ Accept: 'application/json', 'Content-Type': 'application/json' });
+  function getLanguages(): Promise<Locale> {
+    return fetch(`${path}/languages.json`, { headers: headers, method: 'get' })
+      .then((response) => response.json())
+      .catch(() => {
+        return Promise.resolve(defaultLanguages);
+      });
+  }
+  function getMessages(): Promise<ITranslations> {
+    return fetch(`${path}/messages.json`, { headers: headers, method: 'get' })
+      .then((response) => response.json())
+      .then((response: Array<IMessage>): ITranslations => {
+        return response.reduce(
+          (messages: ITranslations, message: IMessage) => ({
+            ...messages,
+            [message.lang]: {
+              ...(messages[message.lang] || {}),
+              [message.code]: message.text
+            }
+          }),
+          {}
+        );
+      });
+  }
+  return Promise.all([getLanguages(), getMessages()]).then((responses) => {
+    const [languages, messages] = responses;
+    function getMessages(locale: string): TranslationMessages {
+      return _.get(messages, locale, {}) as TranslationMessages;
+    }
+    return polyglotI18nProvider(getMessages, defaultLocale, languages, {
+      allowMissing: true
+    });
+  });
+}
+
 export type { ICreateI18nProviderData };
-export { createI18nProvider };
+export { createI18nProvider, createJsonI18nProvider };

package/src/i18n/useI18nProvider.tsx

@@ -9,7 +9,7 @@ function useI18nProvider(data: ICreateI18nProviderData): undefined | I18nProvide
 
   useEffect(() => {
     if (data.customProvider !== undefined) {
-      setProvider(data.customProvider());
+      data.customProvider.then(setProvider);
       return;
     }
     createI18nProvider(memoizedData)
@@ -19,7 +19,7 @@ function useI18nProvider(data: ICreateI18nProviderData): undefined | I18nProvide
       .catch(() => {
         setProvider({ error: true });
       });
-  }, [memoizedData, data]);
+  }, [memoizedData, data?.customProvider]);
 
   return provider;
 }

package/src/playground/App.jsx

@@ -9,6 +9,7 @@ import { ApplicaDataProvider, createAttachmentsParser } from '@applica-software-
 import { ApplicaAuthProvider, LocalStorage } from '@applica-software-guru/iam-client';
 import { CustomRoutes } from 'ra-core';
 import { Route } from 'react-router-dom';
+import { createJsonI18nProvider } from '@/i18n';
 
 const authProvider = new ApplicaAuthProvider(API_URL, new LocalStorage());
 const dataProvider = new ApplicaDataProvider({
@@ -19,6 +20,7 @@ const dataProvider = new ApplicaDataProvider({
   attachmentsParser: createAttachmentsParser(),
   HttpErrorClass: HttpError
 });
+const i18nProvider = createJsonI18nProvider({ path: `//${document.location.host}/i18n`, defaultLocale: 'en' });
 function App() {
   return (
     <ApplicaAdmin
@@ -29,6 +31,7 @@ function App() {
       apiUrl={API_URL}
       authProvider={authProvider}
       dataProvider={dataProvider}
+      i18nProvider={i18nProvider}
       defaultLocale="it"
       menu={menu}
       name={APP_NAME}