@truedat/core 7.1.8 → 7.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "7.1.8",
+  "version": "7.2.1",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -36,7 +36,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.1.8",
+    "@truedat/test": "7.2.1",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "eb92417df5ba0fbc5bc9f670d0d8540c39e3d712"
+  "gitHead": "10ba779646ef549e6db1235b3acd6d430526f487"
 }

package/src/i18n/components/LangProvider.js

@@ -1,39 +1,201 @@
 import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  createContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { IntlProvider } from "react-intl";
+import PropTypes from "prop-types";
 import { Loading } from "@truedat/core/components";
 import { useLocales } from "../../hooks/useLocales";
-import { useMessages } from "../../hooks/useMessages";
 import { getNavigatorLanguage } from "../../services/i18n";
 
-const LangProvider = ({ children, defaultMessages }) => {
-  const { locales } = useLocales(false);
-  const [lang, setLang] = useState("en");
-  const [enabledLocales, setEnabledLocales] = useState([]);
-  const { messages, loading } = useMessages(lang);
+const defaultContext = {
+  defaultLang: "en",
+  altLangs: ["es"],
+  requiredLangs: ["en"],
+  enabledLangs: ["en", "es"],
+  isMultilingual: true,
+  getMessagesForLang: () => ({}),
+  lang: "en",
+  loading: false,
+  locales: [{ lang: "en", messages: {} }],
+  localesError: null,
+  mutate: () => {},
+};
+
+export const LanguageContext = createContext(defaultContext);
+export const useLanguage = () => useContext(LanguageContext);
+
+const LanguageContextProvider = ({ children, defaultMessages }) => {
+  const {
+    locales,
+    mutate,
+    error: localesError,
+    isValidating: loading,
+  } = useLocales();
+
+  const langsOf = _.map(({ lang }) => lang);
+  const enabledLangs = useMemo(
+    () =>
+      _.flow(
+        _.filter(({ is_enabled }) => is_enabled),
+        langsOf
+      )(locales),
+    [locales]
+  );
+
+  const altLangs = useMemo(
+    () =>
+      _.flow(
+        _.filter(({ is_enabled, is_default }) => is_enabled && !is_default),
+        langsOf
+      )(locales),
+    [locales]
+  );
+
+  const requiredLangs = useMemo(
+    () =>
+      _.flow(
+        _.filter(({ is_required }) => is_required),
+        langsOf
+      )(locales),
+    [locales]
+  );
+
+  const defaultLang = useMemo(
+    () =>
+      _.flow(
+        _.find(({ is_default }) => is_default),
+        _.prop("lang")
+      )(locales),
+    [locales]
+  );
+
+  const mapMessages = _.flow(
+    _.map(({ message_id, definition }) => [message_id, definition]),
+    _.fromPairs
+  );
+
+  const messages = useMemo(
+    () =>
+      _.flow(
+        _.map(({ lang, messages }) => [lang, mapMessages(messages)]),
+        _.fromPairs
+      )(locales),
+    [locales]
+  );
+
+  const [lang, setLang] = useState(defaultLang);
+  const [altLang, setAltLang] = useState();
+
+  const getMessagesForLang = useCallback(
+    (requestedLang) => {
+      if (loading || !requestedLang) return null;
+      return messages[requestedLang] || defaultMessages[requestedLang];
+    },
+    [loading, messages, defaultMessages]
+  );
+
+  const context = useMemo(
+    () => ({
+      defaultLang,
+      altLangs,
+      requiredLangs,
+      enabledLangs,
+      isMultilingual: enabledLangs.length > 1,
+      setAltLang,
+      altLang,
+      getMessagesForLang,
+      lang,
+      loading,
+      locales,
+      localesError,
+      mutate,
+    }),
+    [
+      defaultLang,
+      altLangs,
+      enabledLangs,
+      locales,
+      enabledLangs,
+      altLang,
+      requiredLangs,
+      lang,
+      loading,
+      getMessagesForLang,
+      localesError,
+    ]
+  );
+
   useEffect(() => {
-    _.flow(
-      _.filter("is_enabled"),
-      _.map("lang"),
-      setEnabledLocales
-    )(locales || []);
-  }, [locales, setEnabledLocales]);
+    if (enabledLangs.length > 0) {
+      const navigatorLang = getNavigatorLanguage(enabledLangs);
+      if (navigatorLang && navigatorLang !== lang) {
+        setLang(navigatorLang);
+      }
+    }
+  }, [enabledLangs, lang]);
+
   useEffect(() => {
-    const navigatorLang = getNavigatorLanguage(enabledLocales);
-    if (navigatorLang !== lang) setLang(navigatorLang);
-  }, [enabledLocales, setLang, lang]);
+    if (enabledLangs.length > 1) {
+      const firstNonDefaultLang = _.first(altLangs);
+      if (firstNonDefaultLang && !altLang) {
+        setAltLang(firstNonDefaultLang);
+      }
+    }
+  }, [enabledLangs, altLang]);
+
+  if (loading || !lang) return <Loading />;
+
+  if (localesError) return <div>Error loading language data</div>;
 
-  return loading ? (
-    <Loading />
-  ) : (
+  return (
+    <LanguageContext.Provider value={context}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+LanguageContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  defaultMessages: PropTypes.object.isRequired,
+};
+
+export const I18nProvider = ({ children, lang }) => {
+  const { lang: contextLang, getMessagesForLang } = useLanguage();
+  const currentLang = lang || contextLang;
+
+  return (
     <IntlProvider
-      locale={lang}
-      defaultLocale={lang}
-      messages={messages || defaultMessages[lang]}
+      locale={currentLang}
+      defaultLocale={currentLang}
+      messages={getMessagesForLang(currentLang)}
     >
       {children}
     </IntlProvider>
   );
 };
 
+I18nProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  lang: PropTypes.string,
+};
+
+export const LangProvider = ({ children, defaultMessages }) => {
+  return (
+    <LanguageContextProvider defaultMessages={defaultMessages}>
+      <I18nProvider>{children}</I18nProvider>
+    </LanguageContextProvider>
+  );
+};
+
+LangProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  defaultMessages: PropTypes.object.isRequired,
+};
+
 export default LangProvider;

package/src/i18n/components/LangProviderWrapper.js

@@ -0,0 +1,49 @@
+import _ from "lodash/fp";
+import React, { useMemo, useCallback } from "react";
+import PropTypes from "prop-types";
+import { LanguageContext } from "./LangProvider";
+
+const LangProviderWrapper = ({ children, langs }) => {
+  const getMessagesForLang = useCallback(() => ({}));
+
+  const locales = useMemo(() => {
+    return langs.map((lang, idx) => ({
+      lang,
+      messages: {},
+      id: idx + 1,
+      is_default: idx === 0,
+      is_required: idx < 2,
+      is_enabled: true,
+    }));
+  }, [langs]);
+
+  const context = useMemo(
+    () => ({
+      defaultLang: _.first(langs),
+      altLangs: langs,
+      requiredLangs: langs,
+      enabledLangs: langs,
+      isMultilingual: langs.length > 1,
+      getMessagesForLang,
+      lang: _.first(langs),
+      loading: false,
+      locales,
+      localesError: null,
+      mutate: () => {},
+    }),
+    [langs]
+  );
+
+  return (
+    <LanguageContext.Provider value={context}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+LangProviderWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  langs: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default LangProviderWrapper;

package/src/i18n/components/MessageForm.js

@@ -5,7 +5,7 @@ import { useForm, Controller } from "react-hook-form";
 import { useIntl } from "react-intl";
 import { Button, Form, Segment, Header, Loader } from "semantic-ui-react";
 import { HistoryBackButton } from "@truedat/core/components";
-import { useLocales } from "@truedat/core/hooks";
+import { useLanguage } from "./LangProvider";
 
 export const LangForm = ({
   control,
@@ -74,7 +74,7 @@ LangForm.propTypes = {
 };
 
 export const MessageForm = ({ onSubmit, isSubmitting }) => {
-  const { locales, loading } = useLocales();
+  const { locales } = useLanguage();
   const { formatMessage } = useIntl();
   const { handleSubmit, control, formState } = useForm({
     mode: "all",
@@ -85,9 +85,7 @@ export const MessageForm = ({ onSubmit, isSubmitting }) => {
   });
   const { errors, isDirty, isValid } = formState;
 
-  return loading ? (
-    <Loader />
-  ) : (
+  return (
     <Form onSubmit={handleSubmit(onSubmit)}>
       <Controller
         control={control}

package/src/i18n/components/Messages.js

@@ -8,22 +8,20 @@ import {
   Divider,
   Icon,
   Segment,
-  Dimmer,
-  Loader,
   Menu,
 } from "semantic-ui-react";
 import { Link } from "react-router-dom";
 import { SearchInput } from "@truedat/core/components";
 import { lowerDeburrTrim } from "@truedat/core/services/sort";
-import { useLocales } from "@truedat/core/hooks";
 import { I18N_MESSAGES_NEW } from "@truedat/core/routes";
 import { Pagination } from "@truedat/core/components";
+import { useLanguage } from "./LangProvider";
 import MessagesTable from "./MessagesTable";
 import Languages from "./Languages";
 
 const ITEMS_PER_PAGE = 30;
 
-export function MessagesContent({ locales, loading, mutate, isValidating }) {
+export function MessagesContent({ locales, mutate }) {
   const [selectedLang, setSelectedLang] = useState(
     _.flow(
       _.find(({ is_default }) => is_default),
@@ -105,11 +103,7 @@ export function MessagesContent({ locales, loading, mutate, isValidating }) {
             })}
             value={filter}
           />
-          <MessagesTable
-            messages={paginatedMessages}
-            locales={locales}
-            loading={loading}
-          />
+          <MessagesTable messages={paginatedMessages} locales={locales} />
           <Pagination
             totalPages={totalPages}
             activePage={page}
@@ -117,11 +111,7 @@ export function MessagesContent({ locales, loading, mutate, isValidating }) {
           />
         </>
       ) : (
-        <Languages
-          locales={_.keyBy("lang")(locales)}
-          mutate={mutate}
-          isValidating={isValidating}
-        />
+        <Languages locales={_.keyBy("lang")(locales)} mutate={mutate} />
       )}
     </>
   );
@@ -129,15 +119,13 @@ export function MessagesContent({ locales, loading, mutate, isValidating }) {
 
 MessagesContent.propTypes = {
   locales: PropTypes.array,
-  loading: PropTypes.bool,
   mutate: PropTypes.func,
-  isValidating: PropTypes.bool,
 };
 
 export default function Messages() {
   const { formatMessage } = useIntl();
 
-  const { locales, loading, mutate, isValidating } = useLocales();
+  const { locales, mutate } = useLanguage();
 
   return (
     <Segment>
@@ -157,11 +145,6 @@ export default function Messages() {
         </Header.Content>
       </Header>
       <Segment attached="bottom">
-        <Dimmer.Dimmable dimmed={loading}>
-          <Dimmer active={loading} inverted>
-            <Loader />
-          </Dimmer>
-        </Dimmer.Dimmable>
         <Button
           floated="right"
           primary
@@ -170,14 +153,7 @@ export default function Messages() {
           as={Link}
           to={I18N_MESSAGES_NEW}
         />
-        {!loading ? (
-          <MessagesContent
-            locales={locales}
-            loading={loading}
-            mutate={mutate}
-            isValidating={isValidating}
-          />
-        ) : null}
+        <MessagesContent locales={locales} mutate={mutate} />
       </Segment>
     </Segment>
   );

package/src/i18n/components/__tests__/Messages.spec.js

@@ -1,36 +1,27 @@
 import React from "react";
 import { render } from "@truedat/test/render";
-import en from "@truedat/core/messages/en";
+import { LangProviderWrapper } from "@truedat/core/i18n";
 import Messages from "../Messages";
 
 const renderOpts = {
-  messages: { en: { ...en, "i18n.messages.locale.manage": "manage" } },
+  messages: {},
 };
 
 jest.mock("@truedat/core/hooks", () => ({
-  useLocales: jest.fn(() => ({
-    loading: false,
-    locales: [
-      {
-        lang: "es",
-        id: 1,
-        messages: [
-          {
-            id: 1,
-            message_id: "message_id",
-            definition: "definition",
-            description: "description",
-          },
-        ],
-      },
-    ],
-  })),
   useMessagePatch: jest.fn(() => ({ trigger: jest.fn() })),
 }));
 
+const renderComponent = () =>
+  render(
+    <LangProviderWrapper langs={["es"]}>
+      <Messages />
+    </LangProviderWrapper>,
+    renderOpts
+  );
+
 describe("<Messages />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(<Messages />, renderOpts);
+    const { container } = renderComponent();
     expect(container).toMatchSnapshot();
   });
 });

package/src/i18n/components/__tests__/__snapshots__/Messages.spec.js.snap

@@ -15,32 +15,17 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
       <div
         class="content"
       >
-        Translations
+        i18n.messages.header
         <div
           class="sub header"
         >
-          Messages used in Truedat
+          i18n.messages.subheader
         </div>
       </div>
     </h2>
     <div
       class="ui bottom attached segment"
     >
-      <div
-        class="dimmable"
-      >
-        <div
-          class="ui inverted dimmer"
-        >
-          <div
-            class="content"
-          >
-            <div
-              class="ui loader"
-            />
-          </div>
-        </div>
-      </div>
       <a
         class="ui primary right floated button"
         href="/i18n/messages/new"
@@ -50,7 +35,7 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
           aria-hidden="true"
           class="add circle icon"
         />
-        Create message
+        i18n.actions.createMessage
       </a>
       <div
         class="ui pointing secondary top attached tabular menu"
@@ -58,7 +43,12 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
         <a
           class="item"
         >
-          manage
+          i18n.messages.locale.manage
+        </a>
+        <a
+          class="active item"
+        >
+          undefined ( undefined )
         </a>
       </div>
       <div
@@ -68,7 +58,7 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
         class="ui icon input"
       >
         <input
-          placeholder="Search messages"
+          placeholder="i18n.messages.search.placeholder"
           type="text"
           value=""
         />
@@ -87,7 +77,7 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
         <div
           class="content"
         >
-          No messages
+          i18n.messages.empty
         </div>
       </h4>
     </div>

package/src/i18n/index.js

@@ -0,0 +1,7 @@
+export {
+  LanguageContext,
+  useLanguage,
+  I18nProvider,
+  LangProvider,
+} from "./components/LangProvider";
+export { default as LangProviderWrapper } from "./components/LangProviderWrapper";

package/src/services/__tests__/i18nContent.spec.js

@@ -0,0 +1,164 @@
+import {
+  splitTranslatableFields,
+  formatLocales,
+  hasTranslatableFields,
+  isTranslatetableField,
+} from "../i18nContent";
+
+describe("services: i18nContent", () => {
+  describe("splitTranslatableFields", () => {
+    it("should split fields into translatable and non-translatable", () => {
+      const template = {
+        content: [
+          {
+            fields: [
+              { name: "title", widget: "string" },
+              { name: "description", widget: "enriched_text" },
+              { name: "date", widget: "date" },
+              { name: "notes", widget: "textarea" },
+            ],
+          },
+        ],
+      };
+
+      const result = splitTranslatableFields(template);
+
+      expect(result).toEqual({
+        translatable: {
+          title: { value: "", origin: "user" },
+          description: { value: {}, origin: "user" },
+          notes: { value: null, origin: "user" },
+        },
+        noTranslatable: {
+          date: { value: null, origin: "user" },
+        },
+      });
+    });
+
+    it("should handle empty template", () => {
+      const template = { content: [] };
+      const result = splitTranslatableFields(template);
+
+      expect(result).toEqual({
+        translatable: {},
+        noTranslatable: {},
+      });
+    });
+
+    it("should handle multiple groups", () => {
+      const template = {
+        content: [
+          {
+            fields: [{ name: "title", widget: "string" }],
+          },
+          {
+            fields: [
+              { name: "subtitle", widget: "string" },
+              { name: "count", widget: "number" },
+            ],
+          },
+        ],
+      };
+
+      const result = splitTranslatableFields(template);
+
+      expect(result).toEqual({
+        translatable: {
+          title: { value: "", origin: "user" },
+          subtitle: { value: "", origin: "user" },
+        },
+        noTranslatable: {
+          count: { value: null, origin: "user" },
+        },
+      });
+    });
+  });
+
+  describe("formatLocales", () => {
+    it("should format locales into default, required and enabled categories", () => {
+      const locales = [
+        { lang: "en", is_enabled: true, is_required: true, is_default: true },
+        { lang: "es", is_enabled: true, is_required: true, is_default: false },
+        { lang: "fr", is_enabled: true, is_required: false, is_default: false },
+        {
+          lang: "de",
+          is_enabled: false,
+          is_required: false,
+          is_default: false,
+        },
+      ];
+
+      const result = formatLocales(locales);
+
+      expect(result).toEqual({
+        default: [
+          { lang: "en", is_enabled: true, is_required: true, is_default: true },
+        ],
+        required: [
+          {
+            lang: "es",
+            is_enabled: true,
+            is_required: true,
+            is_default: false,
+          },
+        ],
+        enabled: [
+          {
+            lang: "fr",
+            is_enabled: true,
+            is_required: false,
+            is_default: false,
+          },
+        ],
+      });
+    });
+
+    it("should sort locales by language code", () => {
+      const locales = [
+        { lang: "zh", is_enabled: true, is_required: false, is_default: false },
+        { lang: "en", is_enabled: true, is_required: false, is_default: false },
+        { lang: "ar", is_enabled: true, is_required: false, is_default: false },
+      ];
+
+      const result = formatLocales(locales);
+
+      expect(result.enabled.map((l) => l.lang)).toEqual(["ar", "en", "zh"]);
+    });
+  });
+
+  describe("hasTranslatableFields", () => {
+    it("should return true if any field is translatable", () => {
+      const fields = [
+        { widget: "number" },
+        { widget: "string" },
+        { widget: "date" },
+      ];
+
+      expect(hasTranslatableFields(fields)).toBe(true);
+    });
+
+    it("should return false if no fields are translatable", () => {
+      const fields = [
+        { widget: "number" },
+        { widget: "date" },
+        { widget: "boolean" },
+      ];
+
+      expect(hasTranslatableFields(fields)).toBe(false);
+    });
+  });
+
+  describe("isTranslatetableField", () => {
+    it("should identify translatable fields", () => {
+      expect(isTranslatetableField({ widget: "string" })).toBe(true);
+      expect(isTranslatetableField({ widget: "enriched_text" })).toBe(true);
+      expect(isTranslatetableField({ widget: "textarea" })).toBe(true);
+    });
+
+    it("should identify non-translatable fields", () => {
+      expect(isTranslatetableField({ widget: "number" })).toBe(false);
+      expect(isTranslatetableField({ widget: "date" })).toBe(false);
+      expect(isTranslatetableField({ widget: "boolean" })).toBe(false);
+    });
+  });
+});

package/src/services/i18nContent.js

@@ -62,3 +62,13 @@ export const formatLocales = (locales) =>
       is_default: false,
     })(localeList),
   }))(locales);
+
+export const hasTranslatableFields = (fields) => {
+  return _.some((field) => translatableFieldTypes.includes(field.widget))(
+    fields
+  );
+};
+
+export const isTranslatetableField = (field) => {
+  return translatableFieldTypes.includes(field.widget);
+};