@applica-software-guru/react-admin 1.2.121 → 1.3.125

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.2.121",
+  "version": "1.3.125",
   "private": false,
   "repository": {
     "type": "git",

package/src/ApplicaAdmin.tsx

@@ -1,33 +1,14 @@
 import { AdminProps, AuthProvider, DataProvider } from 'react-admin';
 import { AppConfigProvider, MenuConfigProvider, MenuPropTypes, ThemeConfig, ThemeConfigProvider } from './contexts';
 import { CatchResult, useCliErrorCatcher } from './dev';
-import { Layout, LoginPage, MainIcon, Notification, SmallIcon } from './components';
+import { GenericErrorPage, Layout, LoginPage, MainIcon, Notification, SmallIcon } from './components';
 import React, { useMemo } from 'react';
-import { createI18nProvider, useI18nCatcher, useI18nLanguages } from './i18n';
-
+import { useI18nProvider } from './i18n';
 import Admin from './Admin';
-import { I18nCatcherBodyBuilderResultProps } from './i18n/useI18nCatcher';
 import { MenuProps } from './types';
 import PropTypes from 'prop-types';
 import { QueryClient } from 'react-query';
-
-const languageResponseMapper = (response: any) =>
-  response.reduce(
-    (messages: any, message: any) => ({
-      ...messages,
-      [message.lang]: {
-        ...(messages[message.lang] || {}),
-        [message.code]: message.text
-      }
-    }),
-    {}
-  );
-
-const i18nBodyRequestMapper = (lang: string, message: string): I18nCatcherBodyBuilderResultProps => ({
-  lang,
-  code: message,
-  text: message
-});
+import { ThemeCustomization } from './themes';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -194,19 +175,6 @@ const ApplicaAdmin = ({
   enablePasswordRecover,
   ...props
 }: ApplicaAdminProps) => {
-  const languages = useI18nLanguages({
-    apiUrl,
-    endpoint: '/i18n/messages',
-    mapper: languageResponseMapper
-  });
-
-  useI18nCatcher({
-    bodyBuilder: i18nBodyRequestMapper,
-    apiUrl,
-    endpoint: '/i18n/message',
-    loading: languages?.loading,
-    enabled: development
-  });
   useCliErrorCatcher({
     apiUrl,
     endpoint: '/cli/error',
@@ -261,17 +229,25 @@ const ApplicaAdmin = ({
     },
     [logoMain, logoIcon, name, version, notification, enableNotification]
   );
+  const i18nProvider = useI18nProvider({
+    apiUrl: apiUrl,
+    defaultLocale: defaultLocale,
+    allowMissing: development,
+    createMissing: development
+  });
 
-  if (languages?.loading) {
-    return null;
+  if (i18nProvider === undefined) {
+    return <></>;
+  } else if (i18nProvider.error) {
+    return (
+      <ThemeConfigProvider initialConfig={themeConfig}>
+        <ThemeCustomization themeOverrides={theme}>
+          <GenericErrorPage />
+        </ThemeCustomization>
+      </ThemeConfigProvider>
+    );
   }
 
-  const i18nProivder = createI18nProvider({
-    languages,
-    defaultLocale,
-    allowMissing: development
-  });
-
   return (
     <AppConfigProvider>
       <MenuConfigProvider menu={menu}>
@@ -283,7 +259,7 @@ const ApplicaAdmin = ({
             queryClient={queryClient}
             dataProvider={dataProvider}
             authProvider={authProvider}
-            i18nProvider={i18nProivder}
+            i18nProvider={i18nProvider}
             loginPage={login}
             {...props}
           />

package/src/components/ra-forms/LongForm/Provider.tsx

@@ -3,7 +3,7 @@ import { matchPath, useLocation } from 'react-router';
 
 import { IItem } from './types';
 import _ from 'lodash';
-import { getItemsIds } from './utils';
+import { getChildren, getItemsIds, getLevel } from './utils';
 
 enum ActionType {
   SET_FORM_ROOT_PATH = 'setFormRootPath',
@@ -145,7 +145,15 @@ function Provider(props: IProviderProps) {
 
   useEffect(() => {
     if (syncWithLocation && formRootPath !== undefined) {
-      const locationItem = pathname.replace(`${formRootPath}/`, '');
+      let locationItem = pathname.replace(formRootPath, '').replace(new RegExp(/^\/?/), '');
+      if (_.isEmpty(locationItem)) {
+        locationItem =
+          _.chain(items)
+            .filter((item) => getChildren(item.id, items).length === 0)
+            .orderBy([(item) => getLevel(item.id), (item) => item.index])
+            .first()
+            .value()?.id ?? undefined;
+      }
       dispatch({
         type: ActionType.SET_ACTIVE_ITEM,
         payload: locationItem

package/src/components/ra-forms/LongForm/hooks.tsx

@@ -1,8 +1,7 @@
-import _ from 'lodash';
 import { useCallback, useMemo } from 'react';
 import { useActiveItem, useFormRootPath, useItems } from './Provider';
 import { IItem } from './types';
-import { getLevel, isChild } from './utils';
+import { getChildren, isChild } from './utils';
 import { useNavigate } from 'react-router';
 
 function useIsActive(id: string): boolean {
@@ -12,13 +11,7 @@ function useIsActive(id: string): boolean {
 
 function useChildren(id?: string): Array<IItem> {
   const items = useItems(),
-    level = id !== undefined ? getLevel(id) : 0,
-    children = useMemo(() => {
-      return _.chain(items)
-        .filter((item) => (id !== undefined ? isChild(id, item.id) : true))
-        .filter((item) => getLevel(item.id) === level + 1)
-        .value();
-    }, [items, level, id]);
+    children = useMemo(() => getChildren(id, items), [items, id]);
 
   return children;
 }

package/src/components/ra-forms/LongForm/utils.ts

@@ -19,4 +19,14 @@ function getLevel(id: string): number {
   return match === null ? 0 : match.length;
 }
 
-export { getId, isChild, getItemsIds, getLevel };
+function getChildren(id: string | undefined, items: Array<IItem>) {
+  const level = id !== undefined ? getLevel(id) : 0,
+    children = _.chain(items)
+      .filter((item) => (id !== undefined ? isChild(id, item.id) : true))
+      .filter((item) => getLevel(item.id) === level + 1)
+      .value();
+
+  return children;
+}
+
+export { getId, isChild, getItemsIds, getLevel, getChildren };

package/src/components/ra-pages/GenericErrorPage.tsx

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { Button, Container, Stack, Typography } from '@mui/material';
+//@ts-ignore
+import imgSrc from '../../assets/genericError.png';
+
+function GenericErrorPage() {
+  const onReload = useCallback(() => location.reload(), []);
+
+  return (
+    <Container>
+      <Stack alignItems="center" px={2} py={{ xs: 4, sm: 8 }} spacing={2} textAlign="center">
+        <img src={imgSrc} style={{ width: '100%', maxWidth: 450 }} />
+        <Typography variant="h2">Ops! An error occurred...</Typography>
+        <Typography>We&#39;re fixing the problem. Please try again later.</Typography>
+        <Button onClick={onReload} variant="contained">
+          Reload
+        </Button>
+      </Stack>
+    </Container>
+  );
+}
+
+export default GenericErrorPage;

package/src/components/ra-pages/index.ts

@@ -1,5 +1,5 @@
-import ActivatePage from './ActivatePage';
-import LoginPage from './LoginPage';
-import RecoverPage from './RecoverPage';
-import RegisterPage from './RegisterPage';
-export { ActivatePage, LoginPage, RecoverPage, RegisterPage };
+export { default as ActivatePage } from './ActivatePage';
+export { default as LoginPage } from './LoginPage';
+export { default as RecoverPage } from './RecoverPage';
+export { default as RegisterPage } from './RegisterPage';
+export { default as GenericErrorPage } from './GenericErrorPage';

package/src/hooks/index.jsx

@@ -8,3 +8,4 @@ import useThemeConfig from './useThemeConfig';
 export { useAppConfig, useMenu, useBreadcrumbs, useLocalStorage, useThemeConfig, useResourceTitle, useMenuConfig };
 export { useSx } from './mui';
 export { useRefDimensions } from './useRefDimensions';
+export { useMemoizedObject } from './useMemoizedObject';

package/src/hooks/useMemoizedObject.tsx

@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+
+/**
+ * Questo hook memoizza in automatico un oggetto utilizzando il'equality check del suo valore come criterio di discriminazione.
+ * NOTA BENE!!! L'equality check di un oggetto JS è un discorso estremamente complesso.
+ * Pertanto questo hook va usato con estrema parsimonia, solo quando strettamente necessario e solo se si padroneggia a pieno il tema di cui sopra e le sue implicazioni nelle logiche di render condizionale di React
+ * @param object
+ * @returns
+ */
+function useMemoizedObject<T extends object>(object: T): T {
+  if (!_.isPlainObject(object)) {
+    throw new Error('[useMemoizedObject]: param must be a plain JS object');
+  }
+
+  const [memoObj, setMemoObj] = useState(object);
+
+  useEffect(() => {
+    if (!_.isEqual(object, memoObj)) {
+      setMemoObj(object);
+    }
+  }, [object, memoObj]);
+
+  return memoObj;
+}
+
+export { useMemoizedObject };

package/src/i18n/MissingMessageHandler.ts

@@ -0,0 +1,60 @@
+import _ from 'lodash';
+
+type IMissingMessageHandlerConstructorData = {
+  apiUrl: string;
+};
+
+type IMissingMessageHandler = {
+  handleMessage(data: { code: string; lang: string }): void;
+};
+
+class MissingMessageHandler implements IMissingMessageHandler {
+  #headers: Headers;
+  #apiUrl: string;
+  #handledMessages: Array<{ code: string; lang: string }> = [];
+
+  constructor(data: IMissingMessageHandlerConstructorData) {
+    const { apiUrl } = data ?? {};
+    if (!_.isString(apiUrl) || _.isEmpty(apiUrl)) {
+      throw new Error('[MissingMessageHandler] constructor: please provide a valid apiUrl');
+    }
+    this.#apiUrl = apiUrl;
+    this.#headers = new Headers({ Accept: 'application/json', 'Content-Type': 'application/json' });
+  }
+
+  handleMessage(data: { code: string; lang: string }): void {
+    if (!_.isPlainObject(data)) {
+      throw new Error('[MissingMessageHandler] handleMessage: please provide valid message data');
+    }
+
+    const { code, lang } = data;
+
+    if (!_.isString(code) || _.isEmpty(code)) {
+      throw new Error('[MissingMessageHandler] handleMessage: please provide valid code');
+    }
+
+    if (!_.isString(lang) || _.isEmpty(lang)) {
+      throw new Error('[MissingMessageHandler] handleMessage: please provide valid lang');
+    }
+
+    if (_.some(this.#handledMessages, (message) => _.isEqual(message, { code, lang }))) {
+      return;
+    } else {
+      this.#handledMessages.push({ code, lang });
+      fetch(`${this.#apiUrl}/i18n/message`, { method: 'put', headers: this.#headers, body: JSON.stringify({ code, lang, text: code }) })
+        .then((response) => response.json())
+        .then(() => {
+          //eslint-disable-next-line
+          console.log(`[MissingMessageHandler] handleMessage: created message for lang ${lang} and code ${code}`);
+        })
+        .catch((e) => {
+          //eslint-disable-next-line
+          console.error(e);
+          this.#handledMessages = _.reject(this.#handledMessages, (m) => _.isEqual(m, { code, lang }));
+        });
+      return;
+    }
+  }
+}
+
+export default MissingMessageHandler;

package/src/i18n/createI18nProvider.tsx

@@ -0,0 +1,97 @@
+import { Locale, TranslationMessages } from 'ra-core';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import _ from 'lodash';
+import MissingMessageHandler from './MissingMessageHandler';
+
+type IMessage = {
+  id: string;
+  code: string;
+  lang: string;
+  text: string;
+};
+type IDictionary = { [key: string]: string };
+type ITranslations = { [key: string]: IDictionary };
+type ICreateI18nProviderData = {
+  apiUrl: string;
+  defaultLocale: string;
+  allowMissing?: boolean;
+  createMissing?: boolean;
+};
+type IPolyglotOptions = {
+  phrases?: IDictionary;
+  locale?: string;
+  allowMissing?: boolean;
+  onMissingKey?: (key: string, options: IPolyglotOptions, locale: string) => string;
+  interpolation?: {
+    prefix?: string;
+    suffix?: string;
+  };
+};
+
+function createI18nProvider(data: ICreateI18nProviderData): Promise<any> {
+  const { apiUrl, defaultLocale, allowMissing = false, createMissing = false } = data,
+    defaultLanguages: Array<Locale> = [{ locale: defaultLocale, name: defaultLocale }],
+    headers = new Headers({ Accept: 'application/json', 'Content-Type': 'application/json' }),
+    missingMessageHandler = new MissingMessageHandler({ apiUrl: apiUrl }),
+    getLanguages = (): Promise<Locale> => {
+      return fetch(`${apiUrl}/i18n/languages`, { headers: headers, method: 'get' })
+        .then((response) => response.json())
+        .then((response) => {
+          const { responseCode, locales } = response;
+          return responseCode !== 'ok' ? defaultLanguages : locales;
+        })
+        .catch(() => {
+          return Promise.resolve(defaultLanguages);
+        });
+    },
+    getMessages = (): Promise<ITranslations> => {
+      return fetch(`${apiUrl}/i18n/messages`, { 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
+              }
+            }),
+            {}
+          );
+        });
+    },
+    onMissingKey = (key: string, options: IPolyglotOptions, locale: string): string => {
+      if (!allowMissing) {
+        //eslint-disable-next-line
+        console.error(`Warning: Missing translation for key: "${key}"`);
+      }
+      if (createMissing) {
+        if (!_.isString(key)) {
+          //eslint-disable-next-line
+          console.error('[createI18nProvider] onMissingKey: provided key is not a string');
+        } else if (key.match(new RegExp(/[\s[\]]/, 'gm'))) {
+          //eslint-disable-next-line
+          console.error(`[createI18nProvider] onMissingKey: illegal character in key ${key}`);
+        } else {
+          missingMessageHandler.handleMessage({ code: key, lang: locale });
+        }
+      }
+      return key;
+    };
+
+  return Promise.all([getLanguages(), getMessages()]).then((responses) => {
+    const [languages, messages] = responses;
+    function getMessages(locale: string): TranslationMessages {
+      //@ts-ignore
+      return _.get(messages, locale, {});
+    }
+    return polyglotI18nProvider(getMessages, defaultLocale, languages, {
+      allowMissing: allowMissing || createMissing,
+      onMissingKey: onMissingKey
+    });
+  });
+}
+
+export type { ICreateI18nProviderData };
+
+export default createI18nProvider;

package/src/i18n/index.jsx

@@ -1,4 +1,3 @@
 export { default as createI18nProvider } from './createI18nProvider';
-export { default as useI18nCatcher } from './useI18nCatcher';
 export { default as useI18nLanguages } from './useI18nLanguages';
 export { default as useI18nProvider } from './useI18nProvider';

package/src/i18n/useI18nProvider.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import createI18nProvider, { ICreateI18nProviderData } from './createI18nProvider';
+import { useMemoizedObject } from '../hooks';
+import { I18nProvider } from 'ra-core';
+
+function useI18nProvider(data: ICreateI18nProviderData): undefined | I18nProvider | { error: boolean } {
+  const [provider, setProvider] = useState<undefined | I18nProvider | { error: boolean }>(),
+    memoizedData = useMemoizedObject(data);
+
+  useEffect(() => {
+    createI18nProvider(memoizedData)
+      .then((provider) => {
+        setProvider(provider);
+      })
+      .catch(() => {
+        setProvider({ error: true });
+      });
+  }, [memoizedData]);
+
+  return provider;
+}
+
+export default useI18nProvider;

package/dist/i18n/useI18nCatcher.d.ts

@@ -1,28 +0,0 @@
-export type I18nCatcherBodyBuilderResultProps = {
-    lang: string;
-    code: string;
-    text: string;
-} | {
-    message: {
-        lang: string;
-        code: string;
-        text: string;
-    };
-};
-export type I18nCatcherBodyBuilderProps = (lang: string, message: string) => I18nCatcherBodyBuilderResultProps;
-export type UseI18nCatcherProps = {
-    apiUrl: string;
-    enabled?: boolean;
-    endpoint?: string;
-    loading?: boolean;
-    bodyBuilder: I18nCatcherBodyBuilderProps;
-};
-/**
- * Hook che consente di catturare ed inoltrare al server API le stringhe non tradotte.
- *
- * @param {UseI18nCatcherProps}
- * @returns {boolean}
- */
-declare const useI18nCatcher: ({ apiUrl, enabled, endpoint, loading, bodyBuilder }: UseI18nCatcherProps) => boolean;
-export default useI18nCatcher;
-//# sourceMappingURL=useI18nCatcher.d.ts.map

package/dist/i18n/useI18nCatcher.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useI18nCatcher.d.ts","sourceRoot":"","sources":["../../../src/i18n/useI18nCatcher.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,iCAAiC,GACzC;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,GACD;IACE,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH,CAAC;AAEN,MAAM,MAAM,2BAA2B,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,iCAAiC,CAAC;AA0B/G,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,2BAA2B,CAAC;CAC1C,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,cAAc,wDAUjB,mBAAmB,YAmCrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/src/i18n/createI18nProvider.jsx

@@ -1,15 +0,0 @@
-import { get } from 'lodash';
-import polyglotI18nProvider from 'ra-i18n-polyglot';
-
-const createI18nProvider = ({ languages, defaultLocale, allowMissing = false }) =>
-  polyglotI18nProvider(
-    (locale) => {
-      const messages = get(languages, locale, {});
-      return messages;
-    },
-    defaultLocale,
-    [{ locale: defaultLocale }],
-    { allowMissing }
-  );
-
-export default createI18nProvider;

package/src/i18n/useI18nCatcher.ts

@@ -1,109 +0,0 @@
-/* eslint-disable no-console */
-import * as React from 'react';
-
-import { useLocaleState } from 'react-admin';
-
-const queued: string[] = [];
-
-export type I18nCatcherBodyBuilderResultProps =
-  | {
-      lang: string;
-      code: string;
-      text: string;
-    }
-  | {
-      message: {
-        lang: string;
-        code: string;
-        text: string;
-      };
-    };
-
-export type I18nCatcherBodyBuilderProps = (lang: string, message: string) => I18nCatcherBodyBuilderResultProps;
-
-type PutMessageProps = {
-  apiUrl: string;
-  endpoint?: string;
-  locale: string;
-  message: string;
-  bodyBuilder: I18nCatcherBodyBuilderProps;
-};
-
-const putMessage = ({ apiUrl, endpoint, locale, message, bodyBuilder }: PutMessageProps): any =>
-  message != null &&
-  message !== 'undefined' &&
-  message.indexOf('[') === -1 &&
-  message.indexOf(']') === -1 &&
-  queued.indexOf(`${locale}-${message}`) === -1 &&
-  queued.push(`${locale}-${message}`) &&
-  fetch(`${apiUrl}${endpoint}`, {
-    method: 'PUT',
-    headers: new Headers({
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    }),
-    body: JSON.stringify(bodyBuilder(locale, message) || {})
-  });
-
-export type UseI18nCatcherProps = {
-  apiUrl: string;
-  enabled?: boolean;
-  endpoint?: string;
-  loading?: boolean;
-  bodyBuilder: I18nCatcherBodyBuilderProps;
-};
-
-/**
- * Hook che consente di catturare ed inoltrare al server API le stringhe non tradotte.
- *
- * @param {UseI18nCatcherProps}
- * @returns {boolean}
- */
-const useI18nCatcher = ({
-  apiUrl,
-  enabled = true,
-  endpoint = '/languages/put-message',
-  loading,
-  bodyBuilder = (lang, message) => ({
-    lang,
-    code: message,
-    text: message
-  })
-}: UseI18nCatcherProps) => {
-  const [locale] = useLocaleState();
-  React.useMemo(() => {
-    if (loading) {
-      return;
-    }
-
-    if (!enabled) {
-      return;
-    }
-
-    const consoleError = console.error;
-
-    console.error = function (message) {
-      if (typeof message === 'string' && message === '%c%s') {
-        return;
-      }
-      if (typeof message === 'string' && message.indexOf('Missing translation for key: ') >= 0) {
-        message = message.replace('Warning: Missing translation for key: ', '');
-        message = message.split('"').join('').trim();
-        if (message === null || message.indexOf(' ') !== -1 || message.indexOf('.') === -1) {
-          return;
-        }
-
-        const lc = localStorage.getItem('locale') || locale;
-        putMessage({ apiUrl, endpoint, locale: lc, message, bodyBuilder });
-        return;
-      }
-
-      // eslint-disable-next-line prefer-rest-params
-      // eslint-disable-next-line prefer-rest-params
-      consoleError.apply(console, arguments as any);
-    };
-  }, [apiUrl, locale, loading, bodyBuilder, endpoint, enabled]);
-  return true;
-};
-
-export default useI18nCatcher;

package/src/i18n/useI18nProvider.jsx

@@ -1,4 +0,0 @@
-import createI18nProvider from './createI18nProvider';
-
-const useI18nProvider = ({ apiUrl, locale = 'en', languages = {} }) => createI18nProvider({ apiUrl, locale, languages });
-export default useI18nProvider;