@truedat/core 7.5.7 → 7.5.10

package/src/components/__tests__/__snapshots__/TemplateSelector.spec.js.snap

@@ -6,7 +6,7 @@ exports[`<TemplateSelector /> matches the latest snapshot (loading) 1`] = `
     class="field"
   >
     <label>
-      Template
+      template.selector.label
     </label>
     <div
       class="field"
@@ -32,7 +32,7 @@ exports[`<TemplateSelector /> matches the latest snapshot (loading) 1`] = `
           class="divider default text"
           role="alert"
         >
-          loading...
+          loading
         </div>
         <i
           aria-hidden="true"
@@ -60,7 +60,7 @@ exports[`<TemplateSelector /> matches the latest snapshot 1`] = `
     class="field"
   >
     <label>
-      Template
+      template.selector.label
     </label>
     <div
       class="field"
@@ -86,7 +86,7 @@ exports[`<TemplateSelector /> matches the latest snapshot 1`] = `
           class="divider default text"
           role="alert"
         >
-          Select a template...
+          template.selector.placeholder
         </div>
         <i
           aria-hidden="true"
@@ -135,11 +135,11 @@ exports[`<TemplateSelector /> matches the latest snapshot when required 1`] = `
     class="required field"
   >
     <label>
-      Template
+      template.selector.label
       <div
         class="ui left pointing label"
       >
-        Empty required field
+        template.form.validation.empty_required
       </div>
     </label>
     <div
@@ -166,7 +166,7 @@ exports[`<TemplateSelector /> matches the latest snapshot when required 1`] = `
           class="divider default text"
           role="alert"
         >
-          Select a template...
+          template.selector.placeholder
         </div>
         <i
           aria-hidden="true"

package/src/components/common/SearchContextWrapper.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import SearchContext from "@truedat/core/search/SearchContext";
 import SearchContextProvider from "@truedat/core/search/SearchContext";
@@ -36,9 +35,7 @@ export default function SearchContextWrapper({
   };
 
   return provider ? (
-    <SearchContext.Provider value={searchProps}>
-      {children}
-    </SearchContext.Provider>
+    <SearchContext value={searchProps}>{children}</SearchContext>
   ) : (
     <SearchContextProvider {...searchProps}>{children}</SearchContextProvider>
   );

package/src/hooks/__mocks__/useAuthorized.js

@@ -0,0 +1,2 @@
+export const useAuthorized = jest.fn(() => true);
+export const useAuthorizedItems = jest.fn((items) => items);

package/src/hooks/__mocks__/useUserFilters.js

@@ -0,0 +1,17 @@
+export const mutateUserFilters = jest.fn();
+export const useUserFilters = jest.fn(() => ({
+  userFilters: [],
+  loading: false,
+  mutate: jest.fn(),
+}));
+
+export const useUserFiltersCreate = jest.fn(() => ({
+  trigger: jest.fn(() => ({
+    then: jest.fn(),
+  })),
+}));
+export const useUserFiltersDelete = jest.fn(() => ({
+  trigger: jest.fn(() => ({
+    then: jest.fn(),
+  })),
+}));

package/src/hooks/__tests__/{useAclEntries.spec.js → useAclEntries.spec.js.disabled}

@@ -1,6 +1,6 @@
 import { compile } from "path-to-regexp";
 import { waitFor } from "@testing-library/react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import { API_ACL_RESOURCE_ENTRIES, API_ACL_ENTRY } from "../../api";
 import { apiJsonPost, apiJsonPatch, apiJsonDelete } from "../../services/api";
 import {

package/src/hooks/__tests__/useAuthorized.spec.js

@@ -1,7 +1,7 @@
 import { useAuthorized } from "../useAuthorized";
 
 jest.mock("react-redux", () => ({
-  useSelector: jest.fn(() => ({ groups: ["foo"] }))
+  useSelector: jest.fn(() => ({ groups: ["foo"] })),
 }));
 
 describe("hooks: useAuthorized", () => {

package/src/hooks/useAclEntries.js

@@ -13,7 +13,10 @@ import {
 } from "../services/api";
 
 export const useAclEntries = (resource) => {
-  const url = compile(API_ACL_RESOURCE_ENTRIES)(resource);
+  const url = compile(API_ACL_RESOURCE_ENTRIES)({
+    type: resource.type,
+    id: `${resource.id}`,
+  });
   const { data, error, loading, mutate } = useSWR(url, apiJson);
   const aclEntries = _.flow(
     _.pathOr([], "_embedded.acl_entries"),
@@ -34,11 +37,11 @@ export const useAclEntryCreate = (resource) => {
 };
 
 export const useAclEntryUpdate = (id) => {
-  const url = compile(API_ACL_ENTRY)({ id });
+  const url = compile(API_ACL_ENTRY)({ id: `${id}` });
   return useSWRMutation(url, (url, { arg }) => apiJsonPatch(url, arg));
 };
 
 export const useAclEntryDelete = (id) => {
-  const url = compile(API_ACL_ENTRY)({ id });
+  const url = compile(API_ACL_ENTRY)({ id: `${id}` });
   return useSWRMutation(url, (url) => apiJsonDelete(url, JSON_OPTS));
 };

package/src/hooks/useActiveRoute.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
-import { useRouteMatch } from "react-router-dom";
+import { useMatch } from "react-router";
 
 export const useActiveRoute = (props) => {
-  const match = useRouteMatch(props);
-  return _.has("path")(match);
+  const match = useMatch(props);
+  return !_.isEmpty(match);
 };

package/src/hooks/useActiveRoutes.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { BUCKETS_VIEW } from "@truedat/core/routes";
 import { matchPath } from "react-router";
 
@@ -11,7 +11,7 @@ export const useActiveRoutes = (route, navFilter) => {
   return _.flow(
     _.map((route) => ({
       route,
-      filterMatch: matchPath(route, { path: BUCKETS_VIEW }),
+      filterMatch: matchPath({ path: BUCKETS_VIEW }, route),
     })),
     _.reduce(
       (acc, { route, filterMatch }) => {
@@ -21,8 +21,8 @@ export const useActiveRoutes = (route, navFilter) => {
           _.includes(filterMatch?.params?.propertyPath, Object.keys(navFilter))
           ? { ...acc, filterMatchRoutes: route }
           : route === pathname || _.startsWith(`${route}/`)(pathname)
-          ? { ...acc, pathMatchRoutes: route }
-          : { filterMatchRoutes, pathMatchRoutes };
+            ? { ...acc, pathMatchRoutes: route }
+            : { filterMatchRoutes, pathMatchRoutes };
       },
       { filterMatchRoutes: null, pathMatchRoutes: null }
     ),

package/src/hooks/useHierarchies.js

@@ -0,0 +1,112 @@
+import _ from "lodash/fp";
+import { compile } from "path-to-regexp";
+import { mutate } from "swr";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import {
+  apiJson,
+  apiJsonPatch,
+  apiJsonPost,
+  apiJsonDelete,
+} from "@truedat/core/services/api";
+import { API_HIERARCHIES, API_HIERARCHY } from "@truedat/core/api";
+
+const newHierarchy = {
+  name: "",
+  description: null,
+  nodes: [],
+};
+
+export const useHierarchies = () => {
+  const toApiPath = compile(API_HIERARCHIES);
+  const url = toApiPath();
+  const { data, error } = useSWR(url, apiJson);
+  return { data: data?.data?.data, error, loading: !error && !data };
+};
+
+export const useInitialHiearchy = () => {
+  return {
+    data: newHierarchy,
+    error: null,
+    loading: false,
+  };
+};
+
+export const useHierarchy = (id) => {
+  const toApiPath = compile(API_HIERARCHY);
+  const url = toApiPath({ id: `${id}` });
+  const { data, error } = useSWR(url, apiJson);
+  const back_hierarchy = data?.data?.data;
+  const front_hierarchy = toFront(back_hierarchy);
+  return { data: front_hierarchy, error, loading: !error && !data };
+};
+
+export const useHierarchyPatch = (id, callback) => {
+  const toApiPath = compile(API_HIERARCHY);
+  const url = toApiPath({ id: `${id}` });
+  return useSWRMutations(url, (url, { arg }) =>
+    apiJsonPatch(url, toBack(arg)).then(
+      ({ data }) =>
+        mutate(API_HIERARCHIES) && mutate(url, data) && callback(data?.data)
+    )
+  );
+};
+
+export const useHierarchyPost = (callback) => {
+  return useSWRMutations(API_HIERARCHIES, (url, { arg }) =>
+    apiJsonPost(url, toBack(arg)).then(
+      ({ data }) => mutate(API_HIERARCHIES) && callback(data?.data)
+    )
+  );
+};
+
+export const useHierarchyDelete = (id, callback) => {
+  const toApiPath = compile(API_HIERARCHY);
+  const url = toApiPath({ id: `${id}` });
+  return useSWRMutations(url, (url, { arg }) =>
+    apiJsonDelete(url, toBack(arg)).then(
+      ({ data }) => mutate(API_HIERARCHIES) && callback(data?.data)
+    )
+  );
+};
+
+const toFront = (hierarchy) => {
+  return hierarchy
+    ? {
+        ...hierarchy,
+        nodes: _.flow(
+          _.pathOr([], "nodes"),
+          _.map((node) => {
+            return {
+              id: node.node_id,
+              key: node.key,
+              parentId: node.parent_id,
+              name: node.name,
+              description: node.description,
+            };
+          })
+        )(hierarchy),
+      }
+    : hierarchy;
+};
+
+const toBack = (hierarchy) => {
+  return hierarchy
+    ? {
+        hierarchy: {
+          ...hierarchy,
+          nodes: _.flow(
+            _.pathOr([], "nodes"),
+            _.map((node) => {
+              return {
+                node_id: node.id,
+                parent_id: node.parentId,
+                name: node.name,
+                description: node.description,
+              };
+            })
+          )(hierarchy),
+        },
+      }
+    : hierarchy;
+};

package/src/hooks/useLocales.js

@@ -38,6 +38,6 @@ export const useLocalesUpdate = () => {
   return useSWRMutations("api/locales", (_url, { arg }) => {
     const { id, locale } = arg;
     const toApiPath = compile(API_LOCALE);
-    return apiJsonPatch(toApiPath({ id }), { id, locale });
+    return apiJsonPatch(toApiPath({ id: `${id}` }), { id, locale });
   });
 };

package/src/hooks/useMessages.js

@@ -20,7 +20,7 @@ export const useMessages = (lang) => {
 };
 
 export const useMessagePatch = (id) => {
-  const url = toApiMessagePath({ id });
+  const url = toApiMessagePath({ id: `${id}` });
   return useSWRMutations(url, (url, { arg }) =>
     apiJsonPatch(url, arg).then(() => mutate(API_LOCALES))
   );

package/src/hooks/usePath.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
-import { useRouteMatch } from "react-router-dom";
+import { useLocation } from "react-router";
 
-export const usePath = (props) => {
-  const match = useRouteMatch(props);
-  return _.prop("path")(match);
+export const usePath = () => {
+  const { pathname } = useLocation();
+  return pathname;
 };

package/src/hooks/useUserFilters.js

@@ -39,6 +39,6 @@ export const useUserFiltersCreate = (type) => {
 };
 
 export const useUserFiltersDelete = (id, type) => {
-  const url = compile(API_USER_FILTER)({ id, type });
+  const url = compile(API_USER_FILTER)({ id: `${id}`, type });
   return useSWRMutations(url, (url, { arg }) => apiJsonDelete(url, arg));
 };

package/src/i18n/components/EditableCell.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React, { useState } from "react";
+import { useState } from "react";
 import { Table, Input } from "semantic-ui-react";
 
 const MAX_LENGTH = 255;

package/src/i18n/components/I18nRoutes.js

@@ -1,24 +1,19 @@
 import React from "react";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
-import { I18N, I18N_MESSAGES, I18N_MESSAGES_NEW } from "@truedat/core/routes";
+import { Route, Routes } from "react-router";
+import { ProtectedRoute } from "@truedat/core/router";
 import Messages from "./Messages";
 import NewMessage from "./NewMessage";
 
-export const AuthorizedI18nRoutes = () => (
-  <Switch>
-    <Route exact path={I18N_MESSAGES} render={() => <Messages />} />
-    <Route exact path={I18N_MESSAGES_NEW} render={() => <NewMessage />} />
-  </Switch>
-);
-
 export default function I18nRoutes() {
-  const authorized = useAuthorized();
   return (
-    <Route
-      path={I18N}
-      render={() => (authorized ? <AuthorizedI18nRoutes /> : <Unauthorized />)}
-    />
+    <Routes>
+      <Route path={"i18n"} element={<ProtectedRoute />}>
+        <Route path={"messages"}>
+          <Route index element={<Messages />} />
+          <Route path={"new"} element={<NewMessage />} />
+        </Route>
+      </Route>
+      <Route path="*" element={null} />
+    </Routes>
   );
 }

package/src/i18n/components/LangProvider.js

@@ -1,12 +1,5 @@
 import _ from "lodash/fp";
-import React, {
-  useCallback,
-  useContext,
-  createContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { use, createContext, useEffect, useState } from "react";
 import { IntlProvider } from "react-intl";
 import PropTypes from "prop-types";
 import { Loading } from "@truedat/core/components";
@@ -26,10 +19,11 @@ const defaultContext = {
   localesError: null,
   mutate: () => {},
   setAltLang: () => {},
+  onIntlError: () => {},
 };
 
 export const LanguageContext = createContext(defaultContext);
-export const useLanguage = () => useContext(LanguageContext);
+export const useLanguage = () => use(LanguageContext);
 
 const LanguageContextProvider = ({ children, defaultMessages }) => {
   const {
@@ -45,106 +39,70 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
   } = useLocales(false);
 
   const loading = loadingLocales || loadingAllLocales;
-  const mutate = useCallback(() => {
+  const mutate = () => {
     mutateLocales();
     mutateAllLocales();
-  }, [mutateLocales, mutateAllLocales]);
+  };
 
   const langsOf = _.map(({ lang }) => lang);
-  const enabledLangs = useMemo(
-    () =>
-      _.flow(
-        _.filter(({ is_enabled }) => is_enabled),
-        langsOf
-      )(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, langsOf]
-  );
-
-  const requiredLangs = useMemo(
-    () =>
-      _.flow(
-        _.filter(({ is_required }) => is_required),
-        langsOf
-      )(locales),
-    [locales, langsOf]
-  );
-
-  const defaultLang = useMemo(
-    () =>
-      _.flow(
-        _.find(({ is_default }) => is_default),
-        _.prop("lang")
-      )(locales),
-    [locales]
-  );
+  const enabledLangs = _.flow(
+    _.filter(({ is_enabled }) => is_enabled),
+    langsOf
+  )(locales);
+
+  const altLangs = _.flow(
+    _.filter(({ is_enabled, is_default }) => is_enabled && !is_default),
+    _.orderBy(["is_required", "lang"], ["desc", "asc"]),
+    langsOf
+  )(locales);
+
+  const requiredLangs = _.flow(
+    _.filter(({ is_required }) => is_required),
+    langsOf
+  )(locales);
+
+  const defaultLang = _.flow(
+    _.find(({ is_default }) => is_default),
+    _.prop("lang"),
+    _.defaultTo("en")
+  )(locales);
 
   const mapMessages = _.flow(
     _.map(({ message_id, definition }) => [message_id, definition]),
     _.fromPairs
   );
 
-  const messages = useMemo(
-    () =>
-      _.flow(
-        _.map(({ lang, messages }) => [lang, mapMessages(messages)]),
-        _.fromPairs
-      )(locales),
-    [locales, mapMessages]
-  );
+  const messages = _.flow(
+    _.map(({ lang, messages }) => [lang, mapMessages(messages)]),
+    _.fromPairs
+  )(locales);
 
   const [lang, setLang] = useState(defaultLang);
   const [altLang, setAltLang] = useState();
 
-  const getMessagesForLang = useCallback(
-    (requestedLang) => {
-      if (loading || !requestedLang) return null;
-      return messages[requestedLang] || defaultMessages[requestedLang];
-    },
-    [loading, messages, defaultMessages]
-  );
-
-  const context = useMemo(
-    () => ({
-      defaultLang,
-      altLangs,
-      requiredLangs,
-      enabledLangs,
-      isMultilingual: enabledLangs.length > 1,
-      setAltLang,
-      altLang,
-      getMessagesForLang,
-      lang,
-      loading,
-      allLocales,
-      locales,
-      localesError,
-      mutate,
-    }),
-    [
-      defaultLang,
-      altLangs,
-      allLocales,
-      locales,
-      enabledLangs,
-      altLang,
-      requiredLangs,
-      lang,
-      loading,
-      getMessagesForLang,
-      localesError,
-      mutate,
-    ]
-  );
+  const getMessagesForLang = (requestedLang) => {
+    if (loading || !requestedLang) return null;
+    return messages[requestedLang] || defaultMessages[requestedLang];
+  };
+
+  const context = {
+    defaultLang,
+    altLangs,
+    requiredLangs,
+    enabledLangs,
+    isMultilingual: enabledLangs.length > 1,
+    setAltLang,
+    altLang,
+    getMessagesForLang,
+    lang,
+    loading,
+    allLocales,
+    locales,
+    localesError,
+    mutate,
+    // onIntlError: console.error,
+    onIntlError: () => {},
+  };
 
   useEffect(() => {
     if (enabledLangs.length > 0) {
@@ -169,11 +127,7 @@ const LanguageContextProvider = ({ children, defaultMessages }) => {
 
   if (localesError) return <div>Error loading language data</div>;
 
-  return (
-    <LanguageContext.Provider value={context}>
-      {children}
-    </LanguageContext.Provider>
-  );
+  return <LanguageContext value={context}>{children}</LanguageContext>;
 };
 
 LanguageContextProvider.propTypes = {
@@ -182,11 +136,12 @@ LanguageContextProvider.propTypes = {
 };
 
 export const I18nProvider = ({ children, lang }) => {
-  const { lang: contextLang, getMessagesForLang } = useLanguage();
+  const { lang: contextLang, getMessagesForLang, onIntlError } = useLanguage();
   const currentLang = lang || contextLang;
 
   return (
     <IntlProvider
+      onError={onIntlError}
       locale={currentLang}
       defaultLocale={currentLang}
       messages={getMessagesForLang(currentLang)}

package/src/i18n/components/LangProviderWrapper.js

@@ -1,44 +1,37 @@
 import _ from "lodash/fp";
-import React, { useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import { LanguageContext } from "./LangProvider";
 
 const LangProviderWrapper = ({ children, langs }) => {
-  const getMessagesForLang = useCallback(() => ({}));
+  const getMessagesForLang = () => ({});
 
-  const locales = useMemo(() => {
-    return langs.map((lang, idx) => ({
-      lang,
-      messages: {},
-      id: idx + 1,
-      is_default: idx === 0,
-      is_required: idx < 2,
-      is_enabled: true,
-    }));
-  }, [langs]);
+  const locales = langs.map((lang, idx) => ({
+    lang,
+    name: lang,
+    local_name: lang,
+    messages: {},
+    id: idx + 1,
+    is_default: idx === 0,
+    is_required: idx < 2,
+    is_enabled: true,
+  }));
 
-  const context = useMemo(
-    () => ({
-      defaultLang: _.first(langs),
-      altLangs: langs,
-      requiredLangs: langs,
-      enabledLangs: langs,
-      isMultilingual: langs.length > 1,
-      getMessagesForLang,
-      lang: _.first(langs),
-      loading: false,
-      locales,
-      localesError: null,
-      mutate: () => {},
-    }),
-    [langs]
-  );
+  const context = {
+    defaultLang: _.first(langs),
+    altLangs: langs,
+    requiredLangs: langs,
+    enabledLangs: langs,
+    isMultilingual: langs.length > 1,
+    getMessagesForLang,
+    lang: _.first(langs),
+    loading: false,
+    locales,
+    localesError: null,
+    mutate: () => {},
+    onIntlError: () => {},
+  };
 
-  return (
-    <LanguageContext.Provider value={context}>
-      {children}
-    </LanguageContext.Provider>
-  );
+  return <LanguageContext value={context}>{children}</LanguageContext>;
 };
 
 LangProviderWrapper.propTypes = {