@truedat/core 6.13.4 → 6.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.13.4",
+  "version": "6.13.5",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "3fd777c739ce6c9c78d505a85877e0ef6059b19c"
+  "gitHead": "8a56d5172d91597712cdeab607983c2b3282eb25"
 }

package/src/components/index.js

@@ -3,7 +3,6 @@ import AdminMenu from "./AdminMenu";
 import Alert from "./Alert";
 import Authorized from "./Authorized";
 import AvailableFilters from "./AvailableFilters";
-import BranchViewer from "./BranchViewer";
 import CardGroupsAccordion from "./CardGroupsAccordion";
 import CatalogMenu from "./CatalogMenu";
 import Comments from "./Comments";
@@ -60,7 +59,6 @@ export {
   Alert,
   Authorized,
   AvailableFilters,
-  BranchViewer,
   CardGroupsAccordion,
   CatalogMenu,
   Comments,

package/src/i18n/components/LangProvider.js

@@ -4,6 +4,7 @@ import { IntlProvider } from "react-intl";
 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);
@@ -18,19 +19,9 @@ const LangProvider = ({ children, defaultMessages }) => {
     )(locales || []);
   }, [locales, setEnabledLocales]);
   useEffect(() => {
-    const language =
-      (navigator.languages && navigator.languages[0]) ||
-      navigator.language ||
-      navigator.userLanguage ||
-      "en-US";
-    const mapLocale = _.cond([
-      [() => _.size(enabledLocales) === 1, () => _.first(enabledLocales)],
-      [(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]);
+    const navigatorLang = getNavigatorLanguage(enabledLocales);
+    if (navigatorLang !== lang) setLang(navigatorLang);
+  }, [enabledLocales, setLang, lang]);
 
   return loading ? (
     <Loading />

package/src/messages/en.js

@@ -47,7 +47,6 @@ export default {
   "dateFilter.weeks": "weeks ago",
   "dateFilter.months": "months ago",
   "dateFilter.years": "years ago",
-  "domains.notExist": "There are no domains",
   emptyBucket: "(Empty)",
   "error.content": "Please report this error to the Truedat team.",
   "error.duplicated": "duplicated",

package/src/messages/es.js

@@ -48,7 +48,6 @@ export default {
   "dateFilter.weeks": "semanas",
   "dateFilter.months": "meses",
   "dateFilter.years": "años",
-  "domains.notExist": "No existen dominios",
   emptyBucket: "(Vacío)",
   "error.content": "Por favor, coméntaselo al equipo de Truedat.",
   "error.duplicated": "duplicado",
@@ -64,6 +63,7 @@ export default {
   "hierarchy.multiple.placeholder": "Seleccionar Jerarquías",
   "hierarchy.selector.placeholder": "Seleccionar Jerarquía",
   "i18n.actions.createMessage": "Crear mensaje",
+
   "i18n.message.form.messageId.placeholder": "Id del mensaje",
   "i18n.message.form.definition.placeholder": "Definición",
   "i18n.message.form.description.placeholder": "Descripción",

package/src/services/axios.js

@@ -1,6 +1,7 @@
 import _ from "lodash/fp";
 import axios from "axios";
 import { clearToken, readToken } from "./storage";
+import { getNavigatorLanguage } from "./i18n";
 
 // If no authorization header is present and token exists in local storage, put
 // the bearer token authorization header
@@ -21,6 +22,18 @@ const maybePutAuthorization = (config) => {
   }
 };
 
+const putLanguage = (config) => {
+  const lang = getNavigatorLanguage();
+
+  return {
+    ...config,
+    headers: {
+      ...config.headers,
+      "Accept-Language": lang,
+    },
+  };
+};
+
 // If an unauthorized response is received, remove token from local storage
 const maybeClearToken = (error) => {
   if (error?.response?.status === 401) {
@@ -30,6 +43,7 @@ const maybeClearToken = (error) => {
 };
 
 axios.interceptors.request.use(maybePutAuthorization, Promise.reject);
+axios.interceptors.request.use(putLanguage, Promise.reject);
 axios.interceptors.response.use(_.identity, maybeClearToken);
 
 export default axios;

package/src/services/graphql.js

@@ -3,6 +3,7 @@ import { setContext } from "@apollo/client/link/context";
 import { onError } from "@apollo/client/link/error";
 import { unauthorized, logError } from "../routines";
 import { readToken } from "./storage";
+import { getNavigatorLanguage } from "./i18n";
 
 const authLink = setContext((_, { headers }) => {
   const token = readToken();
@@ -16,6 +17,17 @@ const authLink = setContext((_, { headers }) => {
     : { headers };
 });
 
+const langLink = setContext((_, { headers }) => {
+  const lang = getNavigatorLanguage();
+
+  return {
+    headers: {
+      ...headers,
+      "Accept-Language": lang,
+    },
+  };
+});
+
 const httpLink = createHttpLink({ uri: "/api/v2" });
 
 const errorLink = ({ dispatch }) =>
@@ -32,5 +44,5 @@ const errorLink = ({ dispatch }) =>
 export const createClient = (store) =>
   new ApolloClient({
     cache: new InMemoryCache({}),
-    link: authLink.concat(errorLink(store)).concat(httpLink),
+    link: authLink.concat(langLink).concat(errorLink(store)).concat(httpLink),
   });

package/src/services/i18n.js

@@ -10,3 +10,18 @@ export const makeOption = (translations, filter) => (value) =>
         value: value,
         text: translate(translations, filter)(value),
       };
+
+export const getNavigatorLanguage = (localesAllowed = []) => {
+  const language =
+    (navigator.languages && navigator.languages[0]) ||
+    navigator.language ||
+    navigator.userLanguage ||
+    "en-US";
+  const mapLocale = _.cond([
+    [() => _.size(localesAllowed) === 1, () => _.first(localesAllowed)],
+    [(l) => _.includes(l)(localesAllowed), (l) => l],
+    [(l) => _.includes(l)(["es", "ca", "eu", "gl"]), _.constant("es")],
+    [_.stubTrue, _.constant("en")],
+  ]);
+  return _.flow(_.split("-"), _.head, mapLocale)(language);
+};

package/src/components/BranchViewer.js

@@ -1,289 +0,0 @@
-import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
-import { linkTo } from "@truedat/core/routes";
-import {
-  Card,
-  Grid,
-  Header,
-  Icon,
-  Input,
-  Label,
-  Segment,
-} from "semantic-ui-react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { LocalSearchInput } from "./LocalSearchInput";
-import { LocalCustomSearch } from "./LocalCustomSearch";
-
-import "../styles/BranchViewer.less";
-
-const organizeBranches = (branches) => {
-  const grouped = branches.reduce((acc, branch) => {
-    const { parent_id } = branch;
-
-    return {
-      ...acc,
-      [parent_id]: [
-        ...(acc[parent_id] || []),
-        {
-          ...branch,
-          parents: [],
-        },
-      ],
-    };
-  }, {});
-
-  const buildParents = (branch, accParents = []) => {
-    if (branch.parent_id === null) {
-      return [...accParents];
-    }
-
-    const parentBranch = Object.values(grouped)
-      .flat()
-      .find((b) => b.id === branch.parent_id);
-
-    return parentBranch
-      ? buildParents(parentBranch, [branch.parent_id, ...accParents])
-      : accParents;
-  };
-
-  const buildBranch = (parentId) => {
-    const children = grouped[parentId] || [];
-
-    return children.map((element) => {
-      const parents = buildParents(element);
-      const childs = buildBranch(element.id);
-
-      const child = {
-        ...element,
-        parents,
-        childs,
-      };
-
-      return { ...child, path: createPathDescription(child) };
-    });
-  };
-
-  const createPathDescription = (branch) => {
-    const results = [];
-    const { parents } = branch;
-
-    for (const parent_id of parents) {
-      const { name } = branches.find((branch) => branch.id === parent_id);
-      results.push(name);
-    }
-
-    return results.length == 0 ? "" : results.join(" > ");
-  };
-
-  return buildBranch(null);
-};
-
-const ListBranchItem = ({ branch, handleRedirect, selectedBranch }) => {
-  const { id, name } = branch;
-  const [expanded, setExpanded] = useState(false);
-  const generation = branch.childs;
-  const hasChildren = !generation.length == 0;
-
-  useEffect(() => {
-    if (selectedBranch?.parents?.includes(id)) {
-      setExpanded(!expanded);
-    }
-
-    if (id === selectedBranch?.id) {
-      setExpanded(true);
-    }
-  }, []);
-
-  return (
-    <li key={id}>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "self-start",
-        }}
-        onClick={() => handleRedirect(id)}
-      >
-        <Input
-          labelPosition="left"
-          type="text"
-          value={name == null ? "" : name}
-          className="hierarchyNode"
-          disabled={true}
-        >
-          {hasChildren ? (
-            <Label
-              basic
-              onClick={(e) => {
-                e.stopPropagation();
-                setExpanded(!expanded);
-              }}
-              style={{ cursor: "pointer" }}
-            >
-              <Icon fitted name={expanded ? "dot circle outline" : "circle"} />
-            </Label>
-          ) : null}
-          <input
-            className={id === selectedBranch?.id ? "selectedBranch" : " "}
-          />
-        </Input>
-      </div>
-      {generation.length == 0 || !expanded ? null : (
-        <ListBranch
-          childs={branch.childs}
-          parentId={id}
-          handleRedirect={handleRedirect}
-          selectedBranch={selectedBranch}
-        />
-      )}
-    </li>
-  );
-};
-
-ListBranchItem.propTypes = {
-  key: PropTypes.number,
-  branch: PropTypes.object,
-  handleRedirect: PropTypes.func.isRequired,
-  selectedBranch: PropTypes.object,
-};
-
-const ListBranch = ({ childs, handleRedirect, selectedBranch }) => {
-  return _.isEmpty(childs) ? null : (
-    <ul className="wtree expanded">
-      {childs.map((child) => {
-        return (
-          <ListBranchItem
-            key={child.id}
-            branch={child}
-            handleRedirect={handleRedirect}
-            selectedBranch={selectedBranch}
-          />
-        );
-      })}
-    </ul>
-  );
-};
-
-ListBranch.propTypes = {
-  childs: PropTypes.object,
-  handleRedirect: PropTypes.func.isRequired,
-  selectedBranch: PropTypes.object,
-};
-
-export const BranchViewer = ({
-  branches = [],
-  handleRedirect,
-  idSelectedBranch,
-}) => {
-  useIntl();
-
-  const [filteredBranches, setFilteredBranches] = useState([]);
-  const [selectedBranch, setSelectedBranch] = useState({});
-  const organizedBranches = _.isNull(branches)
-    ? []
-    : organizeBranches(branches);
-  const searchFields = ["name", "childs"];
-
-  const checkSearchEnabled = () => {
-    return !_.equals(organizedBranches, filteredBranches);
-  };
-
-  useEffect(() => {
-    if (_.isEmpty(filteredBranches) && checkSearchEnabled()) {
-      setFilteredBranches(organizedBranches);
-    }
-
-    if (!_.isUndefined(idSelectedBranch)) {
-      LocalCustomSearch(
-        organizedBranches,
-        idSelectedBranch,
-        setSelectedBranch,
-        ["id", "childs"],
-        true
-      );
-    }
-  }, [branches]);
-
-  return (
-    <Segment
-      style={{
-        overflow: "auto",
-      }}
-    >
-      <Grid>
-        <Grid.Row>
-          <Grid.Column width={16}>
-            <LocalSearchInput
-              collection={organizedBranches}
-              callback={setFilteredBranches}
-              searchFields={searchFields}
-              searchFunction={LocalCustomSearch}
-              enabled={checkSearchEnabled()}
-            />
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.Row>
-          <Grid.Column width={16}>
-            {!_.isEmpty(branches) ? (
-              filteredBranches.map((branch) => (
-                <Grid.Column key={branch.id}>
-                  <Grid.Row>
-                    <ul
-                      style={{
-                        listStyleType: "none",
-                        padding: 0,
-                      }}
-                    >
-                      {checkSearchEnabled(branches) ? (
-                        <Card
-                          key={branch.id}
-                          link
-                          as={Link}
-                          to={linkTo.DOMAIN_MEMBERS({
-                            id: _.get("id")(branch),
-                          })}
-                        >
-                          <Card.Content>
-                            <Card.Header className="brancheViewerSearchResultHeader">
-                              {_.get("name")(branch)}
-                            </Card.Header>
-                            <Card.Meta className="brancheViewerSearchResultMeta">
-                              {_.get("path")(branch)}
-                            </Card.Meta>
-                          </Card.Content>
-                        </Card>
-                      ) : (
-                        <ListBranchItem
-                          branch={branch}
-                          handleRedirect={handleRedirect}
-                          selectedBranch={selectedBranch}
-                        />
-                      )}
-                    </ul>
-                  </Grid.Row>
-                </Grid.Column>
-              ))
-            ) : (
-              <Header as="h4">
-                <Icon name="cube" />
-                <Header.Content>
-                  <FormattedMessage id="domains.notExist" />
-                </Header.Content>
-              </Header>
-            )}
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
-    </Segment>
-  );
-};
-
-BranchViewer.propTypes = {
-  branches: PropTypes.array,
-  handleRedirect: PropTypes.func.isRequired,
-  idSelectedBranch: PropTypes.number,
-};
-
-export default BranchViewer;

package/src/components/LocalCustomSearch.js

@@ -1,58 +0,0 @@
-import _ from "lodash/fp";
-import PropTypes from "prop-types";
-
-export const LocalCustomSearch = (
-  collection,
-  searchString = "",
-  callback,
-  searchFields,
-  getOneOrMany = false
-) => {
-  const results = [];
-
-  const recursiveSearch = (item) => {
-    if (_.isObject(item) && !_.isNull(item)) {
-      for (const field of searchFields) {
-        const value = item[field];
-        if (_.isArray(value) && !_.isEmpty(value)) {
-          value.forEach(recursiveSearch);
-        } else if (_.isNumber(value) && searchString == value) {
-          results.push(item);
-        } else if (
-          _.isString(value) &&
-          value.toLowerCase().includes(searchString.toString().toLowerCase())
-        ) {
-          results.push(item);
-        }
-      }
-    }
-  };
-
-  const applyFilter = (data) => {
-    callback(getOneOrMany ? _.head(data) : data);
-  };
-
-  if (
-    searchFields === undefined ||
-    searchFields === null ||
-    searchFields.length === 0
-  ) {
-    return -1;
-  } else if (_.isEmpty(searchString.toString())) {
-    applyFilter(collection);
-    return collection.length;
-  } else {
-    collection.forEach(recursiveSearch);
-    applyFilter(results);
-    return results.length;
-  }
-};
-
-LocalCustomSearch.propTypes = {
-  collection: PropTypes.array,
-  query: PropTypes.string,
-  callback: PropTypes.func,
-  searchFields: PropTypes.array,
-  getOneOrMany: PropTypes.bool,
-};
-export default LocalCustomSearch;

package/src/components/LocalSearchInput.js

@@ -1,67 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { Header, Icon, Input } from "semantic-ui-react";
-import { FormattedMessage, useIntl } from "react-intl";
-
-import "../styles/LocalSearchInput.less";
-
-export const LocalSearchInput = ({
-  loading,
-  query,
-  collection,
-  callback,
-  searchFields,
-  searchFunction,
-  enabled,
-}) => {
-  const { formatMessage } = useIntl();
-  const [countSearch, setCountSearch] = useState(0);
-
-  const onChange = (value) => {
-    setCountSearch(searchFunction(collection, value, callback, searchFields));
-  };
-
-  return (
-    <>
-      <Input
-        value={query}
-        className="searchbox"
-        onChange={(_e, { value }) => onChange(value)}
-        icon={{ name: "search", link: true }}
-        loading={loading}
-        placeholder={formatMessage({ id: "search.input.placeholder" })}
-      />
-      {enabled ? (
-        <Header as="h4">
-          <Icon name="search" />
-          <Header.Content>
-            {countSearch == -1 && (
-              <FormattedMessage id="domains.search.error.fields" />
-            )}
-            {countSearch == 0 && (
-              <FormattedMessage id="domains.search.results.empty" />
-            )}
-            {countSearch > 0 && (
-              <FormattedMessage
-                id="domains.search.results.count"
-                values={{ count: countSearch }}
-              />
-            )}
-          </Header.Content>
-        </Header>
-      ) : null}
-    </>
-  );
-};
-
-LocalSearchInput.propTypes = {
-  loading: PropTypes.bool,
-  query: PropTypes.string,
-  collection: PropTypes.array,
-  callback: PropTypes.func,
-  searchFields: PropTypes.array,
-  searchFunction: PropTypes.func,
-  enabled: PropTypes.bool,
-};
-
-export default LocalSearchInput;