@truedat/core 5.20.1 → 5.20.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.20.1",
+  "version": "5.20.3",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "a7197e02a1b1a88c375fe044dee65c7e96ccd618"
+  "gitHead": "11ee6981b87a3c8f2b99c7101b42cafc29dc4896"
 }

package/src/components/__tests__/SelectedFilters.spec.js

@@ -38,6 +38,8 @@ describe("<SelectedFilters/>", () => {
   const messages = {
     "search.clear_filters": "clean filters",
     "search.save_filters": "save filters",
+    "search.applied_filters": "applied filters",
+    "filter.empty": "empty",
   };
 
   const renderOptions = {

package/src/hooks/useLocales.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import { compile } from "path-to-regexp";
 import useSWR from "swr";
 import useSWRMutations from "swr/mutation";
@@ -8,21 +9,27 @@ import {
   apiJsonPatch,
   apiJsonPost,
 } from "../services/api";
-import _ from "lodash/fp";
 
-export const useLocales = () => {
-  const { data, error, mutate } = useSWR(API_LOCALES, apiJson);
+const toApiLocalesPath = compile(API_LOCALES);
+
+export const useLocales = (includeMessages = true) => {
+  const url = toApiLocalesPath() + "?includeMessages=" + includeMessages;
+  const { data, error, mutate, isValidating } = useSWR(url, apiJson);
+
   const locales = data?.data?.data;
-  return { locales, error, loading: !error && !data, mutate };
+  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 } = arg;
+    const { mutateData, handleDimmer } = arg;
     const payload = { id: arg.id, locale: arg };
-    apiJsonPatch(url, payload).then(() => mutateData());
+    apiJsonPatch(url, payload).then(() => {
+      mutateData();
+      handleDimmer(false);
+    });
   });
 };
 

package/src/i18n/components/Languages.js

@@ -1,13 +1,15 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { useIntl, FormattedMessage } from "react-intl";
 import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
 import {
   Button,
+  Dimmer,
   Dropdown,
   Form,
   Icon,
   Input,
+  Loader,
   Table,
   TableBody,
   TableCell,
@@ -20,9 +22,10 @@ import {
   useLocalesCreate,
   useLocalesDelete,
   useLocalesUpdate,
+  useLocales,
 } from "../../hooks/useLocales";
 
-const LanguajeRow = ({ code, local, name, config, mutate }) => {
+const LanguajeRow = ({ code, local, name, config, mutate, handleDimmer }) => {
   const { formatMessage } = useIntl();
   const { trigger } = useLocalesUpdate(config.id);
   const { trigger: triggerDelete } = useLocalesDelete(config.id);
@@ -33,7 +36,8 @@ const LanguajeRow = ({ code, local, name, config, mutate }) => {
       ...config,
       [name]: !checked,
     };
-    trigger({ ...newConfig, mutateData: mutate });
+    handleDimmer(true);
+    trigger({ ...newConfig, mutateData: mutate, handleDimmer: handleDimmer });
   };
 
   const handleDelete = () => {
@@ -95,13 +99,34 @@ LanguajeRow.propTypes = {
   name: PropTypes.string,
   config: PropTypes.object,
   mutate: PropTypes.func,
+  handleDimmer: PropTypes.func,
 };
 
-const Languages = ({ config, langs, mutate }) => {
+const Languages = () => {
+  const includeMessages = false;
+  const {
+    locales,
+    loading: loadingUseLocales,
+    mutate,
+    isValidating,
+  } = useLocales(includeMessages);
+  const langs = _.map("lang")(locales);
+
   const { formatMessage } = useIntl();
   const { all_locales, loading, error } = useAllLocales();
   const [newLocales, setNewLocales] = useState([]);
   const { trigger } = useLocalesCreate();
+  const [dimmerState, setDimmerState] = useState(false);
+
+  const handleDimmer = (isMutating) => {
+    setDimmerState(isMutating);
+  };
+
+  const langsConfig = _.flow(
+    _.map((locale) => _.omit("messages")(locale)),
+    _.groupBy("lang"),
+    _.mapValues(_.first)
+  )(locales);
 
   const options = _.flow(
     _.filter(({ code }) => {
@@ -157,49 +182,50 @@ const Languages = ({ config, langs, mutate }) => {
           })}
         </Button>
       </Form>
-      <Table collapsing striped>
-        <TableHeader>
-          <TableRow>
-            <TableCell></TableCell>
-            <TableCell textAlign="center">
-              {formatMessage({
-                id: "i18n.messages.locale.required",
-              })}
-            </TableCell>
-            <TableCell textAlign="center">
-              {formatMessage({
-                id: "i18n.messages.locale.default",
-              })}
-            </TableCell>
-            <TableCell></TableCell>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {_.flow(
-            _.filter((locale) => _.includes(locale.code)(langs)),
-            _.map(({ code, local, name }) => {
-              return (
-                <LanguajeRow
-                  key={code}
-                  code={code}
-                  local={local}
-                  name={name}
-                  config={config[code]}
-                  mutate={mutate}
-                />
-              );
-            })
-          )(all_locales)}
-        </TableBody>
-      </Table>
+
+      <Dimmer.Dimmable dimmed={isValidating || dimmerState}>
+        <Dimmer active={isValidating || dimmerState} inverted>
+          <Loader />
+        </Dimmer>
+        <Table collapsing striped>
+          <TableHeader>
+            <TableRow>
+              <TableCell></TableCell>
+              <TableCell textAlign="center">
+                {formatMessage({
+                  id: "i18n.messages.locale.required",
+                })}
+              </TableCell>
+              <TableCell textAlign="center">
+                {formatMessage({
+                  id: "i18n.messages.locale.default",
+                })}
+              </TableCell>
+              <TableCell></TableCell>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {_.flow(
+              _.filter((locale) => _.includes(locale.code)(langs)),
+              _.map(({ code, local, name }) => {
+                return (
+                  <LanguajeRow
+                    key={code}
+                    code={code}
+                    local={local}
+                    name={name}
+                    config={langsConfig[code]}
+                    mutate={mutate}
+                    handleDimmer={handleDimmer}
+                  />
+                );
+              })
+            )(all_locales)}
+          </TableBody>
+        </Table>
+      </Dimmer.Dimmable>
     </>
   );
 };
 
-Languages.propTypes = {
-  config: PropTypes.array,
-  langs: PropTypes.object,
-  mutate: PropTypes.func,
-};
-
 export default Languages;

package/src/i18n/components/Messages.js

@@ -1,5 +1,6 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
+import PropTypes from "prop-types";
 import { useIntl, FormattedMessage } from "react-intl";
 import {
   Button,
@@ -22,15 +23,13 @@ import Languages from "./Languages";
 
 const ITEMS_PER_PAGE = 30;
 
-export function MessagesContent({ locales, loading, mutate }) {
+export function MessagesContent({ locales, loading }) {
   const langs = _.map("lang")(locales);
 
-  const langsConfig = _.flow(
-    _.map((locale) => _.omit("messages")(locale)),
-    _.groupBy("lang"),
-    _.mapValues(_.first)
-  )(locales);
-  const [selectedLang, setSelectedLang] = useState(_.head(langs));
+  const [selectedLang, setSelectedLang] = useState(
+    _.head(_.filter((lang) => lang === "en" || lang === "es")(langs))
+  );
+
   const [selectedManageView, setSelectedManageView] = useState(false);
   const [page, setPage] = useState(1);
   const [filter, setFilter] = useState("");
@@ -108,15 +107,21 @@ export function MessagesContent({ locales, loading, mutate }) {
           />
         </>
       ) : (
-        <Languages langs={langs} config={langsConfig} mutate={mutate} />
+        <Languages />
       )}
     </>
   );
 }
 
+MessagesContent.propTypes = {
+  locales: PropTypes.array,
+  loading: PropTypes.bool,
+};
+
 export default function Messages() {
   const { formatMessage } = useIntl();
-  const { locales, loading, mutate } = useLocales();
+
+  const { locales, loading } = useLocales();
 
   return (
     <Segment>
@@ -144,11 +149,7 @@ export default function Messages() {
           to={I18N_MESSAGES_NEW}
         />
         {!loading ? (
-          <MessagesContent
-            locales={locales}
-            loading={loading}
-            mutate={mutate}
-          />
+          <MessagesContent locales={locales} loading={loading} />
         ) : null}
       </Segment>
     </Segment>

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

@@ -1,5 +1,4 @@
 import React from "react";
-import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
 import messages from "@truedat/core/messages";
 import MessageForm from "../MessageForm";