@truedat/core 7.2.8 → 7.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "7.2.8",
+  "version": "7.2.9",
   "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.8",
+    "@truedat/test": "7.2.9",
     "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": "1afa9892e13cd85f546e008f36008c4d25a6be2f"
+  "gitHead": "208c632f7f18e209553299cfe267fbe43d1de285"
 }

package/src/hooks/useLocales.js

@@ -8,21 +8,22 @@ const toApiLocalesPath = compile(API_LOCALES);
 
 export const useLocales = (includeMessages = true) => {
   const url = toApiLocalesPath() + "?includeMessages=" + includeMessages;
-  const { data, error, mutate, isValidating } = useSWR(url, apiJson, {
-    revalidateOnFocus: false,
-  });
+  const { data, error, mutate, isValidating, isLoading } = useSWR(
+    url,
+    apiJson,
+    {
+      revalidateOnFocus: false,
+    }
+  );
 
   const locales = data?.data?.data;
-  return { locales, error, loading: !error && !data, mutate, isValidating };
+  return { locales, error, loading: isValidating || isLoading, mutate };
 };
 
 export const useLocalesUpdate = () => {
   return useSWRMutations("api/locales", (_url, { arg }) => {
-    const { id, locale, mutateData, handleDimmer } = arg;
+    const { id, locale } = arg;
     const toApiPath = compile(API_LOCALE);
-    apiJsonPatch(toApiPath({ id }), { id, locale }).then(() => {
-      mutateData();
-      handleDimmer(false);
-    });
+    return apiJsonPatch(toApiPath({ id }), { id, locale });
   });
 };

package/src/i18n/components/LangProvider.js

@@ -33,10 +33,21 @@ export const useLanguage = () => useContext(LanguageContext);
 const LanguageContextProvider = ({ children, defaultMessages }) => {
   const {
     locales,
-    mutate,
+    mutate: mutateLocales,
     error: localesError,
-    isValidating: loading,
+    loading: loadingLocales,
   } = useLocales();
+  const {
+    locales: allLocales,
+    mutate: mutateAllLocales,
+    loading: loadingAllLocales,
+  } = useLocales(false);
+
+  const loading = loadingLocales || loadingAllLocales;
+  const mutate = () => {
+    mutateLocales();
+    mutateAllLocales();
+  };
 
   const langsOf = _.map(({ lang }) => lang);
   const enabledLangs = useMemo(
@@ -112,6 +123,7 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
       getMessagesForLang,
       lang,
       loading,
+      allLocales,
       locales,
       localesError,
       mutate,
@@ -120,6 +132,7 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
       defaultLang,
       altLangs,
       enabledLangs,
+      allLocales,
       locales,
       enabledLangs,
       altLang,
@@ -128,6 +141,7 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
       loading,
       getMessagesForLang,
       localesError,
+      mutate,
     ]
   );
 

package/src/i18n/components/Languages.js

@@ -19,18 +19,20 @@ import {
 } from "semantic-ui-react";
 import { ConfirmModal } from "@truedat/core/components";
 import { useLocalesUpdate } from "../../hooks/useLocales";
+import { useLanguage } from "./LangProvider";
 
-const LanguajeRow = ({
-  locale: { id, lang, name, local_name, is_default, is_required, trigger },
+const LanguageRow = ({
+  locale: { id, lang, name, local_name, is_default, is_required },
   anyDefault,
-  mutate,
-  handleDimmer,
 }) => {
   const { formatMessage } = useIntl();
+  const { trigger } = useLocalesUpdate();
+  const { mutate } = useLanguage();
 
   const handleChange = (data) => {
-    handleDimmer(true);
-    trigger(_.merge({ mutateData: mutate, handleDimmer: handleDimmer })(data));
+    trigger(data).then(() => {
+      mutate();
+    });
   };
 
   return (
@@ -112,31 +114,25 @@ const LanguajeRow = ({
   );
 };
 
-LanguajeRow.propTypes = {
+LanguageRow.propTypes = {
   locale: PropTypes.object,
   anyDefault: PropTypes.bool,
-  mutate: PropTypes.func,
-  handleDimmer: PropTypes.func,
 };
 
-const Languages = ({ locales, mutate, isValidating }) => {
-  const { formatMessage } = useIntl();
-  const [newLocale, setNewLocales] = useState(null);
-  const [dimmerState, setDimmerState] = useState(false);
+const Languages = () => {
+  const { allLocales: locales, mutate, loading } = useLanguage();
   const { trigger } = useLocalesUpdate();
 
-  const handleDimmer = (isMutating) => {
-    setDimmerState(isMutating);
-  };
+  const { formatMessage } = useIntl();
+  const [newLocale, setNewLocales] = useState(null);
 
   const anyDefault = !!_.find(({ is_default }) => is_default)(locales);
 
   const options = _.flow(
     _.filter(({ is_enabled }) => !is_enabled),
     _.orderBy("lang", "asc"),
-    _.keyBy("lang"),
-    _.map(({ lang, name, local_name }) => {
-      return { text: `${name} ( ${local_name} )`, value: lang };
+    _.map(({ id, name, local_name }) => {
+      return { text: `${name} ( ${local_name} )`, value: id };
     })
   )(locales);
 
@@ -147,10 +143,8 @@ const Languages = ({ locales, mutate, isValidating }) => {
   const handleSubmit = () => {
     setNewLocales(null);
     trigger({
-      id: locales[newLocale].id,
+      id: newLocale,
       locale: { is_enabled: true },
-      mutateData: mutate,
-      handleDimmer,
     }).then(() => {
       mutate();
     });
@@ -190,9 +184,8 @@ const Languages = ({ locales, mutate, isValidating }) => {
           })}
         </Button>
       </Form>
-
-      <Dimmer.Dimmable dimmed={isValidating || dimmerState}>
-        <Dimmer active={isValidating || dimmerState} inverted>
+      <Dimmer.Dimmable dimmed={loading}>
+        <Dimmer active={loading} inverted>
           <Loader />
         </Dimmer>
         <Table collapsing striped>
@@ -221,18 +214,13 @@ const Languages = ({ locales, mutate, isValidating }) => {
                 ["is_default", "is_required", "lang"],
                 ["desc", "desc", "asc"]
               ),
-              _.map((locale) => {
-                return (
-                  <LanguajeRow
-                    key={locale.lang}
-                    locale={{ ...locale, trigger }}
-                    locales={locales}
-                    anyDefault={anyDefault}
-                    mutate={mutate}
-                    handleDimmer={handleDimmer}
-                  />
-                );
-              })
+              _.map((locale) => (
+                <LanguageRow
+                  key={locale.lang}
+                  locale={locale}
+                  anyDefault={anyDefault}
+                />
+              ))
             )(locales)}
           </TableBody>
         </Table>
@@ -241,10 +229,4 @@ const Languages = ({ locales, mutate, isValidating }) => {
   );
 };
 
-Languages.propTypes = {
-  locales: PropTypes.array,
-  mutate: PropTypes.func,
-  isValidating: PropTypes.bool,
-};
-
 export default Languages;

package/src/i18n/components/Messages.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
-import PropTypes from "prop-types";
+import { Link, useLocation, useHistory } from "react-router-dom";
 import { useIntl, FormattedMessage } from "react-intl";
 import {
   Button,
@@ -10,10 +10,9 @@ import {
   Segment,
   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 { I18N_MESSAGES_NEW } from "@truedat/core/routes";
+import { I18N_MESSAGES, I18N_MESSAGES_NEW } from "@truedat/core/routes";
 import { Pagination } from "@truedat/core/components";
 import { useLanguage } from "./LangProvider";
 import MessagesTable from "./MessagesTable";
@@ -21,38 +20,55 @@ import Languages from "./Languages";
 
 const ITEMS_PER_PAGE = 30;
 
-export function MessagesContent({ locales, mutate }) {
-  const [selectedLang, setSelectedLang] = useState(
-    _.flow(
-      _.find(({ is_default }) => is_default),
-      _.pathOr("en", "lang")
-    )(locales)
-  );
+export function MessagesContent() {
+  const { locales, loading } = useLanguage();
+
+  const history = useHistory();
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const selectedLang = searchParams.get("lang");
+  const filter = searchParams.get("filter") || "";
+
+  const urlTo = (props) => {
+    const queryParams = _.flow(
+      _.toPairs,
+      _.filter(([_, value]) => value),
+      _.fromPairs,
+      (params) => new URLSearchParams(params)
+    )({
+      lang: selectedLang,
+      filter,
+      ...props,
+    });
+
+    return `${I18N_MESSAGES}?${queryParams.toString()}`;
+  };
 
-  const [selectedManageView, setSelectedManageView] = useState(false);
   const [page, setPage] = useState(1);
-  const [filter, setFilter] = useState("");
   const { formatMessage } = useIntl();
 
   const handleSearch = (_e, data) => {
-    _.flow(_.propOr("", "value"), setFilter)(data);
+    const filter = _.propOr("", "value")(data);
     setPage(1);
+    history.push(urlTo({ filter }));
   };
 
-  const messages = _.flow(
-    _.find({ lang: selectedLang }),
-    _.prop("messages"),
-    _.orderBy("message_id", "asc"),
-    _.filter(({ message_id, definition, description }) => {
-      const deburrFilter = lowerDeburrTrim(filter);
-      return (
-        deburrFilter == "" ||
-        lowerDeburrTrim(message_id).includes(deburrFilter) ||
-        lowerDeburrTrim(definition).includes(deburrFilter) ||
-        lowerDeburrTrim(description).includes(deburrFilter)
-      );
-    })
-  )(locales);
+  const messages = selectedLang
+    ? _.flow(
+        _.find({ lang: selectedLang }),
+        _.prop("messages"),
+        _.orderBy("message_id", "asc"),
+        _.filter(({ message_id, definition, description }) => {
+          const deburrFilter = lowerDeburrTrim(filter);
+          return (
+            deburrFilter == "" ||
+            lowerDeburrTrim(message_id).includes(deburrFilter) ||
+            lowerDeburrTrim(definition).includes(deburrFilter) ||
+            lowerDeburrTrim(description).includes(deburrFilter)
+          );
+        })
+      )(locales)
+    : [];
 
   const totalPages = Math.ceil(messages.length / ITEMS_PER_PAGE);
   const paginatedMessages = _.flow(
@@ -65,8 +81,9 @@ export function MessagesContent({ locales, mutate }) {
       <Menu attached="top" secondary pointing tabular>
         <Menu.Item
           key={0}
-          active={selectedManageView}
-          onClick={() => setSelectedManageView(true)}
+          active={!selectedLang}
+          as={Link}
+          to={urlTo({ lang: null })}
         >
           <FormattedMessage id="i18n.messages.locale.manage" />
         </Menu.Item>
@@ -79,11 +96,9 @@ export function MessagesContent({ locales, mutate }) {
           _.map(({ lang, name, local_name }) => (
             <Menu.Item
               key={lang}
-              active={lang === selectedLang && !selectedManageView}
-              onClick={() => {
-                setSelectedLang(lang);
-                setSelectedManageView(false);
-              }}
+              active={lang === selectedLang}
+              as={Link}
+              to={urlTo({ lang })}
             >
               <FormattedMessage
                 id={`i18n.messages.locale.${lang}`}
@@ -94,7 +109,7 @@ export function MessagesContent({ locales, mutate }) {
         )(locales)}
       </Menu>
       <Divider hidden />
-      {!selectedManageView ? (
+      {selectedLang ? (
         <>
           <SearchInput
             onChange={handleSearch}
@@ -103,7 +118,7 @@ export function MessagesContent({ locales, mutate }) {
             })}
             value={filter}
           />
-          <MessagesTable messages={paginatedMessages} locales={locales} />
+          <MessagesTable messages={paginatedMessages} loading={loading} />
           <Pagination
             totalPages={totalPages}
             activePage={page}
@@ -111,21 +126,15 @@ export function MessagesContent({ locales, mutate }) {
           />
         </>
       ) : (
-        <Languages locales={_.keyBy("lang")(locales)} mutate={mutate} />
+        <Languages />
       )}
     </>
   );
 }
 
-MessagesContent.propTypes = {
-  locales: PropTypes.array,
-  mutate: PropTypes.func,
-};
-
 export default function Messages() {
   const { formatMessage } = useIntl();
-
-  const { locales, mutate } = useLanguage();
+  const { mutate } = useLanguage();
 
   return (
     <Segment>
@@ -145,6 +154,13 @@ export default function Messages() {
         </Header.Content>
       </Header>
       <Segment attached="bottom">
+        <Button
+          floated="right"
+          content={formatMessage({ id: "i18n.actions.refreshMessages" })}
+          onClick={() => {
+            mutate();
+          }}
+        />
         <Button
           floated="right"
           primary
@@ -153,7 +169,7 @@ export default function Messages() {
           as={Link}
           to={I18N_MESSAGES_NEW}
         />
-        <MessagesContent locales={locales} mutate={mutate} />
+        <MessagesContent />
       </Segment>
     </Segment>
   );

package/src/i18n/components/NewMessage.js

@@ -5,15 +5,19 @@ import { useIntl, FormattedMessage } from "react-intl";
 import { useHistory, Link } from "react-router-dom";
 import { useMessagePost } from "@truedat/core/hooks";
 import { I18N_MESSAGES } from "@truedat/core/routes";
+import { useLanguage } from "./LangProvider";
 import MessageForm from "./MessageForm";
 
 const NewMessage = () => {
   const { formatMessage } = useIntl();
   const { trigger } = useMessagePost();
+  const { mutate } = useLanguage();
   const history = useHistory();
 
   const onSubmit = (message) => {
-    trigger({ message });
+    trigger({ message }).then(() => {
+      mutate();
+    });
     history.push(I18N_MESSAGES);
   };
 

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

@@ -4,7 +4,11 @@ import { LangProviderWrapper } from "@truedat/core/i18n";
 import Messages from "../Messages";
 
 const renderOpts = {
-  messages: {},
+  messages: {
+    en: {
+      "i18n.actions.refreshMessages": "Refresh messages",
+    },
+  },
 };
 
 jest.mock("@truedat/core/hooks", () => ({

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

@@ -26,6 +26,11 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
     <div
       class="ui bottom attached segment"
     >
+      <button
+        class="ui right floated button"
+      >
+        Refresh messages
+      </button>
       <a
         class="ui primary right floated button"
         href="/i18n/messages/new"
@@ -41,12 +46,14 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
         class="ui pointing secondary top attached tabular menu"
       >
         <a
-          class="item"
+          class="active item"
+          href="/i18n/messages"
         >
           i18n.messages.locale.manage
         </a>
         <a
-          class="active item"
+          class="item"
+          href="/i18n/messages?lang=es"
         >
           undefined ( undefined )
         </a>
@@ -54,32 +61,102 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
       <div
         class="ui hidden divider"
       />
-      <div
-        class="ui icon input"
+      <form
+        class="ui form"
       >
-        <input
-          placeholder="i18n.messages.search.placeholder"
-          type="text"
-          value=""
-        />
-        <i
-          aria-hidden="true"
-          class="search link icon"
-        />
-      </div>
-      <h4
-        class="ui header"
+        <div
+          aria-expanded="false"
+          class="ui search selection dropdown lang-manager-dropdown"
+          name="add-locales"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            Select languaje
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            aria-multiselectable="false"
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+        <button
+          class="ui disabled button lang-manager-button"
+          disabled=""
+          tabindex="-1"
+          type="submit"
+        >
+          i18n.messages.locale.add_lang
+        </button>
+      </form>
+      <div
+        class="dimmable"
       >
-        <i
-          aria-hidden="true"
-          class="search icon"
-        />
         <div
-          class="content"
+          class="ui inverted dimmer"
         >
-          i18n.messages.empty
+          <div
+            class="content"
+          >
+            <div
+              class="ui loader"
+            />
+          </div>
         </div>
-      </h4>
+        <table
+          class="ui collapsing striped table"
+        >
+          <thead
+            class=""
+          >
+            <tr
+              class=""
+            >
+              <td
+                class=""
+              />
+              <td
+                class="center aligned"
+              >
+                i18n.messages.locale.required
+              </td>
+              <td
+                class="center aligned"
+              >
+                i18n.messages.locale.default
+              </td>
+              <td
+                class=""
+              />
+            </tr>
+          </thead>
+          <tbody
+            class=""
+          />
+        </table>
+      </div>
     </div>
   </div>
 </div>