@truedat/core 7.2.11 → 7.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "7.2.11",
+  "version": "7.3.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.2.11",
+    "@truedat/test": "7.3.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": "74eb04f81dd49275229cf3050b56b897ff78410e"
+  "gitHead": "7101536d0432c47d5045efaf2cbb3f87d77c4c95"
 }

package/src/components/LanguagesTabs.js

@@ -0,0 +1,84 @@
+import _ from "lodash/fp";
+import React, { useEffect, useMemo, useState } from "react";
+import PropTypes from "prop-types";
+import { Tab } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+
+const LanguagesTabs = ({
+  altLangs = [],
+  requiredLangs = [],
+  selectedLang,
+  onLangChange,
+}) => {
+  const [translationTabs, setTranslationTabs] = useState([]);
+  const [initLang, setInitLang] = useState(selectedLang);
+  const { formatMessage } = useIntl();
+
+  // Create the translation tabs
+  useMemo(() => {
+    const updatedTranslationTabs = [
+      // First add required languages
+      ...requiredLangs
+        .filter((lang) => altLangs.includes(lang))
+        .sort((a, b) => a.localeCompare(b))
+        .map((lang) => ({
+          lang,
+          menuItem: `${formatMessage({
+            id: `i18n.messages.locale.${lang}`,
+            defaultMessage: lang,
+          })} *`,
+        })),
+      // Then add non-required languages
+      ...altLangs
+        .filter((lang) => !requiredLangs.includes(lang))
+        .sort((a, b) => a.localeCompare(b))
+        .map((lang) => ({
+          lang,
+          menuItem: formatMessage({
+            id: `i18n.messages.locale.${lang}`,
+            defaultMessage: lang,
+          }),
+        })),
+    ];
+    const initSelectedLang = _.head(updatedTranslationTabs);
+    setTranslationTabs(updatedTranslationTabs);
+    initSelectedLang?.lang !== initLang && setInitLang(initSelectedLang?.lang);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [requiredLangs, altLangs, formatMessage]);
+
+  useEffect(() => {
+    initLang !== selectedLang && onLangChange(initLang);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initLang]);
+
+  // Return null if there are no alternate languages
+  if (!altLangs || altLangs.length === 0) {
+    return null;
+  }
+
+  return (
+    <Tab
+      className="attached-tab"
+      attached="top"
+      panes={translationTabs}
+      onTabChange={(e, { activeIndex }) => {
+        const selected = translationTabs[activeIndex]?.lang;
+        if (selected) {
+          onLangChange(selected);
+        }
+      }}
+      activeIndex={translationTabs.findIndex(
+        (tab) => tab.lang === selectedLang
+      )}
+    />
+  );
+};
+
+LanguagesTabs.propTypes = {
+  altLangs: PropTypes.arrayOf(PropTypes.string),
+  requiredLangs: PropTypes.arrayOf(PropTypes.string),
+  selectedLang: PropTypes.string,
+  onLangChange: PropTypes.func.isRequired,
+};
+
+export default LanguagesTabs;

package/src/components/index.js

@@ -28,6 +28,7 @@ import GroupActions from "./GroupActions";
 import HierarchySelector from "./HierarchySelector";
 import HistoryBackButton from "./HistoryBackButton";
 import IngestMenu from "./IngestMenu";
+import LanguagesTabs from "./LanguagesTabs";
 import LineageMenu from "./LineageMenu";
 import Loading from "./Loading";
 import MembersMenu from "./MembersMenu";
@@ -85,6 +86,7 @@ export {
   HierarchySelector,
   HistoryBackButton,
   IngestMenu,
+  LanguagesTabs,
   LineageMenu,
   Loading,
   MembersMenu,

package/src/hooks/useLocales.js

@@ -8,6 +8,7 @@ const toApiLocalesPath = compile(API_LOCALES);
 
 export const useLocales = (includeMessages = true) => {
   const url = toApiLocalesPath() + "?includeMessages=" + includeMessages;
+
   const { data, error, mutate, isValidating, isLoading } = useSWR(
     url,
     apiJson,

package/src/i18n/components/LangProvider.js

@@ -25,6 +25,7 @@ const defaultContext = {
   locales: [{ lang: "en", messages: {} }],
   localesError: null,
   mutate: () => {},
+  setAltLang: () => {},
 };
 
 export const LanguageContext = createContext(defaultContext);
@@ -44,10 +45,10 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
   } = useLocales(false);
 
   const loading = loadingLocales || loadingAllLocales;
-  const mutate = () => {
+  const mutate = useCallback(() => {
     mutateLocales();
     mutateAllLocales();
-  };
+  }, [mutateLocales, mutateAllLocales]);
 
   const langsOf = _.map(({ lang }) => lang);
   const enabledLangs = useMemo(
@@ -56,16 +57,17 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
         _.filter(({ is_enabled }) => is_enabled),
         langsOf
       )(locales),
-    [locales]
+    [locales, langsOf]
   );
 
   const altLangs = useMemo(
     () =>
       _.flow(
         _.filter(({ is_enabled, is_default }) => is_enabled && !is_default),
+        _.orderBy(["is_required", "lang"], ["desc", "asc"]),
         langsOf
       )(locales),
-    [locales]
+    [locales, langsOf]
   );
 
   const requiredLangs = useMemo(
@@ -74,7 +76,7 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
         _.filter(({ is_required }) => is_required),
         langsOf
       )(locales),
-    [locales]
+    [locales, langsOf]
   );
 
   const defaultLang = useMemo(
@@ -97,7 +99,7 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
         _.map(({ lang, messages }) => [lang, mapMessages(messages)]),
         _.fromPairs
       )(locales),
-    [locales]
+    [locales, mapMessages]
   );
 
   const [lang, setLang] = useState(defaultLang);
@@ -131,7 +133,6 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
     [
       defaultLang,
       altLangs,
-      enabledLangs,
       allLocales,
       locales,
       enabledLangs,
@@ -161,6 +162,7 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
         setAltLang(firstNonDefaultLang);
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enabledLangs, altLang]);
 
   if (loading || !lang) return <Loading />;

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

@@ -2,7 +2,7 @@ import {
   splitTranslatableFields,
   formatLocales,
   hasTranslatableFields,
-  isTranslatetableField,
+  isTranslatableField,
 } from "../i18nContent";
 
 describe("services: i18nContent", () => {
@@ -148,17 +148,17 @@ describe("services: i18nContent", () => {
     });
   });
 
-  describe("isTranslatetableField", () => {
+  describe("isTranslatableField", () => {
     it("should identify translatable fields", () => {
-      expect(isTranslatetableField({ widget: "string" })).toBe(true);
-      expect(isTranslatetableField({ widget: "enriched_text" })).toBe(true);
-      expect(isTranslatetableField({ widget: "textarea" })).toBe(true);
+      expect(isTranslatableField({ widget: "string" })).toBe(true);
+      expect(isTranslatableField({ widget: "enriched_text" })).toBe(true);
+      expect(isTranslatableField({ 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);
+      expect(isTranslatableField({ widget: "number" })).toBe(false);
+      expect(isTranslatableField({ widget: "date" })).toBe(false);
+      expect(isTranslatableField({ widget: "boolean" })).toBe(false);
     });
   });
 });

package/src/services/i18nContent.js

@@ -69,6 +69,6 @@ export const hasTranslatableFields = (fields) => {
   );
 };
 
-export const isTranslatetableField = (field) => {
+export const isTranslatableField = (field) => {
   return translatableFieldTypes.includes(field.widget);
 };