@truedat/core 6.1.3 → 6.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.1.3",
+  "version": "6.1.4",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.1.3",
+    "@truedat/test": "6.1.4",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "0f50f152b947693a64e36e6eb946fac33978ea8c"
+  "gitHead": "c0ef00d553186b7601e136f3e38fa0d0d7287fd9"
 }

package/src/api.js

@@ -2,7 +2,6 @@ export const API_COMMENTS = "/api/business_concepts/comments";
 export const API_LOCALE = "/api/locales/:id";
 export const API_LOCALE_MESSAGES = "/api/locales/:lang/messages";
 export const API_LOCALES = "/api/locales";
-export const API_ALL_LOCALES = "/api/locales/all_locales";
 export const API_MESSAGE = "/api/messages/:id";
 export const API_MESSAGES = "/api/messages";
 export const API_REINDEX_GRANTS = "/api/grants/search/reindex_all";

package/src/hooks/useLocales.js

@@ -1,14 +1,8 @@
-import _ from "lodash/fp";
 import { compile } from "path-to-regexp";
 import useSWR from "swr";
 import useSWRMutations from "swr/mutation";
 import { API_LOCALES, API_LOCALE } from "../api";
-import {
-  apiJson,
-  apiJsonDelete,
-  apiJsonPatch,
-  apiJsonPost,
-} from "../services/api";
+import { apiJson, apiJsonPatch } from "../services/api";
 
 const toApiLocalesPath = compile(API_LOCALES);
 
@@ -20,32 +14,13 @@ export const useLocales = (includeMessages = true) => {
   return { locales, error, loading: !error && !data, mutate, isValidating };
 };
 
-export const useLocalesUpdate = (id) => {
-  const toApiPath = compile(API_LOCALE);
-  const url = toApiPath({ id });
-  return useSWRMutations(url, (url, { arg }) => {
-    const { mutateData, handleDimmer } = arg;
-    const payload = { id: arg.id, locale: arg };
-    apiJsonPatch(url, payload).then(() => {
+export const useLocalesUpdate = () => {
+  return useSWRMutations("api/locales", (_url, { arg }) => {
+    const { id, locale, mutateData, handleDimmer } = arg;
+    const toApiPath = compile(API_LOCALE);
+    apiJsonPatch(toApiPath({ id }), { id, locale }).then(() => {
       mutateData();
       handleDimmer(false);
     });
   });
 };
-
-export const useLocalesCreate = () => {
-  const url = API_LOCALES;
-
-  return useSWRMutations(url, (url, { arg }) => {
-    apiJsonPost(url, arg);
-  });
-};
-
-export const useLocalesDelete = (id) => {
-  const toApiPath = compile(API_LOCALE);
-  const url = toApiPath({ id });
-  return useSWRMutations(url, (url, { arg }) => {
-    const payload = { id: arg.id };
-    apiJsonDelete(url, payload);
-  });
-};

package/src/i18n/components/LangProvider.js

@@ -0,0 +1,47 @@
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
+import { IntlProvider } from "react-intl";
+import { Loading } from "@truedat/core/components";
+import { useLocales } from "../../hooks/useLocales";
+import { useMessages } from "../../hooks/useMessages";
+
+const LangProvider = ({ children, defaultMessages }) => {
+  const { locales } = useLocales(false);
+  const [lang, setLang] = useState("en");
+  const [enabledLocales, setEnabledLocales] = useState([]);
+  const { messages, loading } = useMessages(lang);
+  useEffect(() => {
+    _.flow(
+      _.filter("is_enabled"),
+      _.map("lang"),
+      setEnabledLocales
+    )(locales || []);
+  }, [locales, setEnabledLocales]);
+  useEffect(() => {
+    const language =
+      (navigator.languages && navigator.languages[0]) ||
+      navigator.language ||
+      navigator.userLanguage ||
+      "en-US";
+    const mapLocale = _.cond([
+      [(l) => _.includes(l)(enabledLocales), (l) => l],
+      [(l) => _.includes(l)(["es", "ca", "eu", "gl"]), _.constant("es")],
+      [_.stubTrue, _.constant("en")],
+    ]);
+    _.flow(_.split("-"), _.head, mapLocale, setLang)(language);
+  }, [navigator, enabledLocales, setLang]);
+
+  return loading ? (
+    <Loading />
+  ) : (
+    <IntlProvider
+      locale={lang}
+      defaultLocale={lang}
+      messages={messages || defaultMessages[lang]}
+    >
+      {children}
+    </IntlProvider>
+  );
+};
+
+export default LangProvider;

package/src/i18n/components/Languages.js

@@ -10,6 +10,7 @@ import {
   Icon,
   Input,
   Loader,
+  Popup,
   Table,
   TableBody,
   TableCell,
@@ -17,133 +18,127 @@ import {
   TableRow,
 } from "semantic-ui-react";
 import { ConfirmModal } from "@truedat/core/components";
-import { useAllLocales } from "../../hooks/useAllLocales";
-import {
-  useLocalesCreate,
-  useLocalesDelete,
-  useLocalesUpdate,
-  useLocales,
-} from "../../hooks/useLocales";
+import { useLocalesUpdate } from "../../hooks/useLocales";
 
-const LanguajeRow = ({ code, local, name, config, mutate, handleDimmer }) => {
+const LanguajeRow = ({
+  locale: { id, lang, name, local_name, is_default, is_required, trigger },
+  anyDefault,
+  mutate,
+  handleDimmer,
+}) => {
   const { formatMessage } = useIntl();
-  const { trigger } = useLocalesUpdate(config.id);
-  const { trigger: triggerDelete } = useLocalesDelete(config.id);
 
   const handleChange = (data) => {
-    const { name, checked } = data;
-    const newConfig = {
-      ...config,
-      [name]: !checked,
-    };
     handleDimmer(true);
-    trigger({ ...newConfig, mutateData: mutate, handleDimmer: handleDimmer });
-  };
-
-  const handleDelete = () => {
-    triggerDelete(config).then(() => {
-      mutate();
-    });
+    trigger(_.merge({ mutateData: mutate, handleDimmer: handleDimmer })(data));
   };
 
   return (
     <TableRow>
       <TableCell>
-        {_.upperCase(code)} | {local} ( {name} )
+        {`${name} ( ${local_name} )`}{" "}
+        {is_default ? (
+          <Popup
+            trigger={<Icon name="star" color="yellow" />}
+            content={formatMessage({
+              id: "i18n.messages.locale.default",
+            })}
+          />
+        ) : null}
       </TableCell>
       <TableCell textAlign="center">
         <Input
           type="checkbox"
           name="is_required"
-          checked={config.is_required}
-          disabled={config.is_default}
-          onChange={(_e, data) => handleChange(data)}
-        />
-      </TableCell>
-      <TableCell textAlign="center">
-        <Input
-          id={`radio-${code}`}
-          type="radio"
-          name="is_default"
-          checked={config.is_default}
-          onChange={(_e, data) => handleChange(data)}
+          checked={is_required}
+          disabled={is_default}
+          onChange={() =>
+            handleChange({ id, locale: { is_required: !is_required } })
+          }
         />
       </TableCell>
+      {!anyDefault ? (
+        <TableCell textAlign="center">
+          <Input
+            id={`radio-${lang}`}
+            type="radio"
+            name="is_default"
+            checked={is_default}
+            onChange={() => handleChange({ id, locale: { is_default: true } })}
+          />
+        </TableCell>
+      ) : null}
+
       <TableCell>
-        <ConfirmModal
-          icon="trash"
-          trigger={
-            <Icon
-              className="lang-manager-delete"
-              name="trash alternate outline"
-              color="red"
-              disabled={config.is_default || ["es", "en"].includes(code)}
-            />
-          }
-          header={formatMessage({
-            id: "i18n.messages.locale.delete.confirmation.header",
-          })}
-          content={formatMessage({
-            id: "i18n.messages.locale.delete.confirmation.content",
-          })}
-          onConfirm={() => handleDelete()}
-        />
+        {!is_default && !["es", "en"].includes(lang) ? (
+          <ConfirmModal
+            icon="trash"
+            trigger={
+              <Icon
+                className="lang-manager-delete"
+                name="trash alternate outline"
+                color="red"
+              />
+            }
+            header={formatMessage({
+              id: "i18n.messages.locale.delete.confirmation.header",
+            })}
+            content={formatMessage({
+              id: "i18n.messages.locale.delete.confirmation.content",
+            })}
+            onConfirm={() =>
+              handleChange({
+                id,
+                locale: { is_enabled: false, is_required: false },
+              })
+            }
+          />
+        ) : null}
       </TableCell>
     </TableRow>
   );
 };
 
 LanguajeRow.propTypes = {
-  code: PropTypes.string,
-  local: PropTypes.string,
-  name: PropTypes.string,
-  config: PropTypes.object,
+  locale: PropTypes.object,
+  anyDefault: PropTypes.bool,
   mutate: PropTypes.func,
   handleDimmer: PropTypes.func,
 };
 
-const Languages = () => {
-  const includeMessages = false;
-  const {
-    locales,
-    loading: loadingUseLocales,
-    mutate,
-    isValidating,
-  } = useLocales(includeMessages);
-  const langs = _.map("lang")(locales);
-
+const Languages = ({ locales, mutate, isValidating }) => {
   const { formatMessage } = useIntl();
-  const { all_locales, loading, error } = useAllLocales();
-  const [newLocales, setNewLocales] = useState([]);
-  const { trigger } = useLocalesCreate();
+  const [newLocale, setNewLocales] = useState(null);
   const [dimmerState, setDimmerState] = useState(false);
+  const { trigger } = useLocalesUpdate();
 
   const handleDimmer = (isMutating) => {
     setDimmerState(isMutating);
   };
 
-  const langsConfig = _.flow(
-    _.map((locale) => _.omit("messages")(locale)),
-    _.groupBy("lang"),
-    _.mapValues(_.first)
-  )(locales);
+  const anyDefault = !!_.find(({ is_default }) => is_default)(locales);
 
   const options = _.flow(
-    _.filter(({ code }) => {
-      return !langs.includes(code);
-    }),
-    _.map(({ code, name, local }) => {
-      return { text: `${local} (${name} | ${code})`, value: code };
+    _.filter(({ is_enabled }) => !is_enabled),
+    _.orderBy("lang", "asc"),
+    _.keyBy("lang"),
+    _.map(({ lang, name, local_name }) => {
+      return { text: `${name} ( ${local_name} )`, value: lang };
     })
-  )(all_locales);
+  )(locales);
 
   const handleOnChange = ({ value }) => {
     setNewLocales(value);
   };
 
   const handleSubmit = () => {
-    setNewLocales([]);
-    trigger({ locales: newLocales }).then(() => {
+    setNewLocales(null);
+    trigger({
+      id: locales[newLocale].id,
+      locale: { is_enabled: true },
+      mutateData: mutate,
+      handleDimmer,
+    }).then(() => {
       mutate();
     });
   };
@@ -162,12 +157,12 @@ const Languages = () => {
             defaultMessage: "Select languaje",
           })}
           name="add-locales"
-          multiple={true}
+          multiple={false}
           search={true}
           selection={true}
           options={options}
           clearable={true}
-          value={newLocales}
+          value={newLocale}
           onChange={(_e, data) => {
             handleOnChange(data);
           }}
@@ -175,7 +170,7 @@ const Languages = () => {
         <Button
           type="submit"
           className="lang-manager-button"
-          disabled={_.isEmpty(newLocales)}
+          disabled={!newLocale}
         >
           {formatMessage({
             id: "i18n.messages.locale.add_lang",
@@ -196,31 +191,36 @@ const Languages = () => {
                   id: "i18n.messages.locale.required",
                 })}
               </TableCell>
-              <TableCell textAlign="center">
-                {formatMessage({
-                  id: "i18n.messages.locale.default",
-                })}
-              </TableCell>
+              {!anyDefault ? (
+                <TableCell textAlign="center">
+                  {formatMessage({
+                    id: "i18n.messages.locale.default",
+                  })}
+                </TableCell>
+              ) : null}
               <TableCell></TableCell>
             </TableRow>
           </TableHeader>
           <TableBody>
             {_.flow(
-              _.filter((locale) => _.includes(locale.code)(langs)),
-              _.map(({ code, local, name }) => {
+              _.filter("is_enabled"),
+              _.orderBy(
+                ["is_default", "is_required", "lang"],
+                ["desc", "desc", "asc"]
+              ),
+              _.map((locale) => {
                 return (
                   <LanguajeRow
-                    key={code}
-                    code={code}
-                    local={local}
-                    name={name}
-                    config={langsConfig[code]}
+                    key={locale.lang}
+                    locale={{ ...locale, trigger }}
+                    locales={locales}
+                    anyDefault={anyDefault}
                     mutate={mutate}
                     handleDimmer={handleDimmer}
                   />
                 );
               })
-            )(all_locales)}
+            )(locales)}
           </TableBody>
         </Table>
       </Dimmer.Dimmable>
@@ -228,4 +228,10 @@ const Languages = () => {
   );
 };
 
+Languages.propTypes = {
+  locales: PropTypes.array,
+  mutate: PropTypes.func,
+  isValidating: PropTypes.bool,
+};
+
 export default Languages;

package/src/i18n/components/MessageForm.js

@@ -9,7 +9,7 @@ import { useLocales } from "@truedat/core/hooks";
 
 export const LangForm = ({
   control,
-  lang: { lang, id },
+  locale: { id, lang, name, local_name },
   errors,
   formatMessage,
 }) => {
@@ -17,7 +17,10 @@ export const LangForm = ({
     <Segment>
       <Header
         as="h4"
-        content={formatMessage({ id: `i18n.messages.locale.${lang}` })}
+        content={formatMessage({
+          id: `i18n.messages.locale.${lang}`,
+          defaultMessage: `${name} ( ${local_name} )`,
+        })}
       />
       <Controller
         control={control}
@@ -63,6 +66,13 @@ export const LangForm = ({
   );
 };
 
+LangForm.propTypes = {
+  control: PropTypes.object,
+  locale: PropTypes.object,
+  errors: PropTypes.object,
+  formatMessage: PropTypes.func,
+};
+
 export const MessageForm = ({ onSubmit, isSubmitting }) => {
   const { locales, loading } = useLocales();
   const { formatMessage } = useIntl();
@@ -104,17 +114,22 @@ export const MessageForm = ({ onSubmit, isSubmitting }) => {
         )}
       />
 
-      {locales
-        .filter(({ lang }) => lang === "en" || lang === "es")
-        .map((lang, i) => (
+      {_.flow(
+        _.filter("is_enabled"),
+        _.orderBy(
+          ["is_default", "is_required", "lang"],
+          ["desc", "desc", "asc"]
+        ),
+        _.map((locale) => (
           <LangForm
-            key={i}
+            key={locale.lang}
             control={control}
-            lang={lang}
+            locale={locale}
             errors={errors}
             formatMessage={formatMessage}
           />
-        ))}
+        ))
+      )(locales)}
 
       <div className="actions">
         <Button
@@ -135,7 +150,6 @@ export const MessageForm = ({ onSubmit, isSubmitting }) => {
 };
 
 MessageForm.propTypes = {
-  message: PropTypes.object,
   onSubmit: PropTypes.func,
   isSubmitting: PropTypes.bool,
 };

package/src/i18n/components/Messages.js

@@ -23,11 +23,12 @@ import Languages from "./Languages";
 
 const ITEMS_PER_PAGE = 30;
 
-export function MessagesContent({ locales, loading }) {
-  const langs = _.map("lang")(locales);
-
+export function MessagesContent({ locales, loading, mutate, isValidating }) {
   const [selectedLang, setSelectedLang] = useState(
-    _.head(_.filter((lang) => lang === "en" || lang === "es")(langs))
+    _.flow(
+      _.find(({ is_default }) => is_default),
+      _.pathOr("en", "lang")
+    )(locales)
   );
 
   const [selectedManageView, setSelectedManageView] = useState(false);
@@ -43,6 +44,7 @@ export function MessagesContent({ locales, loading }) {
   const messages = _.flow(
     _.find({ lang: selectedLang }),
     _.prop("messages"),
+    _.orderBy("message_id", "asc"),
     _.filter(({ message_id, definition, description }) => {
       const deburrFilter = lowerDeburrTrim(filter);
       return (
@@ -70,20 +72,28 @@ export function MessagesContent({ locales, loading }) {
         >
           <FormattedMessage id="i18n.messages.locale.manage" />
         </Menu.Item>
-        {langs
-          .filter((lang) => lang === "en" || lang === "es")
-          .map((lang, i) => (
+        {_.flow(
+          _.filter("is_enabled"),
+          _.orderBy(
+            ["is_default", "is_required", "lang"],
+            ["desc", "desc", "asc"]
+          ),
+          _.map(({ lang, name, local_name }) => (
             <Menu.Item
-              key={i}
+              key={lang}
               active={lang === selectedLang && !selectedManageView}
               onClick={() => {
                 setSelectedLang(lang);
                 setSelectedManageView(false);
               }}
             >
-              <FormattedMessage id={`i18n.messages.locale.${lang}`} />
+              <FormattedMessage
+                id={`i18n.messages.locale.${lang}`}
+                defaultMessage={`${name} ( ${local_name} )`}
+              />
             </Menu.Item>
-          ))}
+          ))
+        )(locales)}
       </Menu>
       <Divider hidden />
       {!selectedManageView ? (
@@ -107,7 +117,11 @@ export function MessagesContent({ locales, loading }) {
           />
         </>
       ) : (
-        <Languages />
+        <Languages
+          locales={_.keyBy("lang")(locales)}
+          mutate={mutate}
+          isValidating={isValidating}
+        />
       )}
     </>
   );
@@ -116,12 +130,14 @@ export function MessagesContent({ locales, loading }) {
 MessagesContent.propTypes = {
   locales: PropTypes.array,
   loading: PropTypes.bool,
+  mutate: PropTypes.func,
+  isValidating: PropTypes.bool,
 };
 
 export default function Messages() {
   const { formatMessage } = useIntl();
 
-  const { locales, loading } = useLocales();
+  const { locales, loading, mutate, isValidating } = useLocales();
 
   return (
     <Segment>
@@ -149,7 +165,12 @@ export default function Messages() {
           to={I18N_MESSAGES_NEW}
         />
         {!loading ? (
-          <MessagesContent locales={locales} loading={loading} />
+          <MessagesContent
+            locales={locales}
+            loading={loading}
+            mutate={mutate}
+            isValidating={isValidating}
+          />
         ) : null}
       </Segment>
     </Segment>

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

@@ -23,50 +23,6 @@ exports[`<MessageForm /> matches the latest snapshot 1`] = `
         />
       </div>
     </div>
-    <div
-      class="ui segment"
-    >
-      <h4
-        class="ui header"
-      >
-        Spanish
-      </h4>
-      <div
-        class="required field"
-      >
-        <label>
-          Definition
-        </label>
-        <div
-          class="ui input"
-        >
-          <input
-            autocomplete="off"
-            placeholder="Definition"
-            required=""
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        class="field"
-      >
-        <label>
-          Description
-        </label>
-        <div
-          class="ui input"
-        >
-          <input
-            autocomplete="off"
-            placeholder="Description"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
     <div
       class="actions"
     >

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

@@ -60,11 +60,6 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
         >
           manage
         </a>
-        <a
-          class="active item"
-        >
-          Spanish
-        </a>
       </div>
       <div
         class="ui hidden divider"
@@ -82,116 +77,19 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
           class="search link icon"
         />
       </div>
-      <table
-        class="ui table"
+      <h4
+        class="ui header"
       >
-        <thead
-          class=""
-        >
-          <tr
-            class=""
-          >
-            <th
-              class=""
-            >
-              Message ID
-            </th>
-            <th
-              class=""
-            >
-              Definition
-            </th>
-            <th
-              class=""
-            >
-              Description
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          class=""
-        >
-          <tr
-            class=""
-          >
-            <td
-              class="six wide"
-            >
-              message_id
-            </td>
-            <td
-              class="five wide cursor-pointer"
-            >
-              definition
-            </td>
-            <td
-              class="five wide cursor-pointer"
-            >
-              description
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div
-        aria-label="Pagination Navigation"
-        class="ui pagination menu"
-        role="navigation"
-      >
-        <a
-          aria-current="false"
-          aria-disabled="true"
-          aria-label="First item"
-          class="disabled item"
-          tabindex="-1"
-          type="firstItem"
-          value="1"
-        >
-          «
-        </a>
-        <a
-          aria-current="false"
-          aria-disabled="true"
-          aria-label="Previous item"
-          class="disabled item"
-          tabindex="-1"
-          type="prevItem"
-          value="1"
-        >
-          ⟨
-        </a>
-        <a
-          aria-current="true"
-          aria-disabled="true"
-          class="active disabled item"
-          tabindex="-1"
-          type="pageItem"
-          value="1"
-        >
-          1
-        </a>
-        <a
-          aria-current="false"
-          aria-disabled="true"
-          aria-label="Next item"
-          class="disabled item"
-          tabindex="-1"
-          type="nextItem"
-          value="1"
-        >
-          ⟩
-        </a>
-        <a
-          aria-current="false"
-          aria-disabled="true"
-          aria-label="Last item"
-          class="disabled item"
-          tabindex="-1"
-          type="lastItem"
-          value="1"
+        <i
+          aria-hidden="true"
+          class="search icon"
+        />
+        <div
+          class="content"
         >
-          »
-        </a>
-      </div>
+          No messages
+        </div>
+      </h4>
     </div>
   </div>
 </div>

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

@@ -58,50 +58,6 @@ exports[`<NewMessage /> matches the latest snapshot 1`] = `
           />
         </div>
       </div>
-      <div
-        class="ui segment"
-      >
-        <h4
-          class="ui header"
-        >
-          Spanish
-        </h4>
-        <div
-          class="required field"
-        >
-          <label>
-            Definition
-          </label>
-          <div
-            class="ui input"
-          >
-            <input
-              autocomplete="off"
-              placeholder="Definition"
-              required=""
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-        <div
-          class="field"
-        >
-          <label>
-            Description
-          </label>
-          <div
-            class="ui input"
-          >
-            <input
-              autocomplete="off"
-              placeholder="Description"
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
       <div
         class="actions"
       >

package/src/i18n/components/index.js

@@ -1,3 +1,4 @@
 import I18nRoutes from "./I18nRoutes";
+import LangProvider from "./LangProvider";
 
-export { I18nRoutes };
+export { I18nRoutes, LangProvider };

package/src/hooks/useAllLocales.js

@@ -1,9 +0,0 @@
-import useSWR from "swr";
-import { API_ALL_LOCALES } from "../api";
-import { apiJson } from "../services/api";
-
-export const useAllLocales = () => {
-  const { data, loading, error, mutate } = useSWR(API_ALL_LOCALES, apiJson);
-  const all_locales = data?.data?.data;
-  return { all_locales, error, loading, mutate };
-};