@dhis2-ui/organisation-unit-tree 7.16.1 → 8.0.0

package/build/cjs/organisation-unit-node/organisation-unit-node.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OrganisationUnitNode = void 0;
 
-var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _loader = require("@dhis2-ui/loader");
-
 var _node = require("@dhis2-ui/node");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -21,36 +17,22 @@ var _index2 = _interopRequireDefault(require("../locales/index.js"));
 
 var _propTypes2 = require("../prop-types.js");
 
-var _computeChildNodes = require("./compute-child-nodes.js");
-
 var _errorMessage = require("./error-message.js");
 
 var _hasDescendantSelectedPaths = require("./has-descendant-selected-paths.js");
 
 var _index3 = require("./label/index.js");
 
+var _loadingSpinner = require("./loading-spinner.js");
+
+var _organisationUnitNodeChildren = require("./organisation-unit-node-children.js");
+
 var _useOpenState = require("./use-open-state.js");
 
 var _index4 = require("./use-org-data/index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const loadingSpinnerStyles = {
-  styles: /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "358163430"
-  }, [".extrasmall.jsx-358163430{display:block;margin:3px 0;}"]),
-  className: "jsx-358163430"
-};
-
-const LoadingSpinner = () => /*#__PURE__*/_react.default.createElement("div", {
-  className: "jsx-2503342345"
-}, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
-  extrasmall: true,
-  className: loadingSpinnerStyles.className
-}), /*#__PURE__*/_react.default.createElement("style", null, loadingSpinnerStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2503342345"
-}, ["div.jsx-2503342345{width:24px;}"]));
-
 const OrganisationUnitNode = ({
   autoExpandLoadingError,
   dataTest,
@@ -72,22 +54,20 @@ const OrganisationUnitNode = ({
   onCollapse,
   onExpand
 }) => {
-  const {
-    loading,
-    error,
-    data
-  } = (0, _index4.useOrgData)(id, {
+  const orgData = (0, _index4.useOrgData)(id, {
     isUserDataViewFallback,
-    suppressAlphabeticalSorting,
-    displayName,
-    onComplete: onChildrenLoaded
+    displayName
   });
   const strippedPath = (0, _index.leftTrimToRootId)(path, rootId);
-  const node = { ...data,
+  const node = {
+    // guarantee that displayName and id are avaiable before data loaded
+    displayName,
+    id,
+    ...(orgData.data || {}),
+    // do not override strippedPath with path from loaded data
     path: strippedPath
   };
-  const childNodes = !loading && !error ? (0, _computeChildNodes.computeChildNodes)(node, filter) : [];
-  const hasChildren = !!childNodes.length;
+  const hasChildren = !!node.children && node.children > 0;
   const hasSelectedDescendants = (0, _hasDescendantSelectedPaths.hasDescendantSelectedPaths)(strippedPath, selected, rootId);
   const isHighlighted = highlighted.includes(path);
   const {
@@ -95,7 +75,7 @@ const OrganisationUnitNode = ({
     onToggleOpen
   } = (0, _useOpenState.useOpenState)({
     autoExpandLoadingError,
-    errorMessage: error && error.toString(),
+    errorMessage: orgData.error && orgData.error.toString(),
     path: strippedPath,
     expanded,
     onExpand,
@@ -106,14 +86,14 @@ const OrganisationUnitNode = ({
     disableSelection,
     hasChildren,
     hasSelectedDescendants,
-    loading,
-    error,
+    loading: orgData.loading,
+    error: orgData.error,
     selected,
     open,
     path,
     singleSelection,
     node,
-    label: node.displayName,
+    label: displayName,
     checked: isSelected,
     highlighted: isHighlighted
   });
@@ -122,7 +102,7 @@ const OrganisationUnitNode = ({
     node: node,
     fullPath: path,
     open: open,
-    loading: loading,
+    loading: orgData.loading,
     checked: isSelected,
     rootId: rootId,
     onChange: onChange,
@@ -147,45 +127,40 @@ const OrganisationUnitNode = ({
    */
 
 
-  const showPlaceholder = hasChildren && !open && !error;
-  const showChildNodes = hasChildren && open && !error;
+  const showPlaceholder = hasChildren && !open && !orgData.error;
+  const showChildNodes = hasChildren && open && !orgData.error;
   return /*#__PURE__*/_react.default.createElement(_node.Node, {
     dataTest: `${dataTest}-node`,
     open: open,
     onOpen: onToggleOpen,
     onClose: onToggleOpen,
     component: label,
-    icon: loading && /*#__PURE__*/_react.default.createElement(LoadingSpinner, null)
-  }, error && /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    icon: orgData.loading && /*#__PURE__*/_react.default.createElement(_loadingSpinner.LoadingSpinner, null)
+  }, orgData.error && /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
     dataTest: dataTest
   }, _index2.default.t('Could not load children')), showPlaceholder && /*#__PURE__*/_react.default.createElement("span", {
     "data-test": `${dataTest}-placeholder`
-  }), showChildNodes && childNodes.map(child => {
-    const childPath = `${path}/${child.id}`;
-    const grandChildNodes = (0, _computeChildNodes.computeChildNodes)(child, filter);
-    return /*#__PURE__*/_react.default.createElement(OrganisationUnitNode, {
-      autoExpandLoadingError: autoExpandLoadingError,
-      childNodes: grandChildNodes,
-      dataTest: dataTest,
-      disableSelection: disableSelection,
-      displayName: child.displayName,
-      expanded: expanded,
-      filter: filter,
-      highlighted: highlighted,
-      id: child.id,
-      isUserDataViewFallback: isUserDataViewFallback,
-      key: childPath,
-      onChange: onChange,
-      onChildrenLoaded: onChildrenLoaded,
-      onCollapse: onCollapse,
-      onExpand: onExpand,
-      path: childPath,
-      renderNodeLabel: renderNodeLabel,
-      rootId: rootId,
-      selected: selected,
-      singleSelection: singleSelection,
-      suppressAlphabeticalSorting: suppressAlphabeticalSorting
-    });
+  }), showChildNodes && /*#__PURE__*/_react.default.createElement(_organisationUnitNodeChildren.OrganisationUnitNodeChildren // Prevent cirular imports
+  , {
+    OrganisationUnitNode: OrganisationUnitNode,
+    node: node,
+    autoExpandLoadingError: autoExpandLoadingError,
+    dataTest: dataTest,
+    disableSelection: disableSelection,
+    expanded: expanded,
+    filter: filter,
+    highlighted: highlighted,
+    isUserDataViewFallback: isUserDataViewFallback,
+    onChange: onChange,
+    onChildrenLoaded: onChildrenLoaded,
+    onCollapse: onCollapse,
+    onExpand: onExpand,
+    parentPath: path,
+    renderNodeLabel: renderNodeLabel,
+    rootId: rootId,
+    selected: selected,
+    singleSelection: singleSelection,
+    suppressAlphabeticalSorting: suppressAlphabeticalSorting
   }));
 };
 

package/build/cjs/organisation-unit-node/use-org-children.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOrgChildren = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _react = require("react");
+
+var _index = require("../helpers/index.js");
+
+const ORG_DATA_QUERY = {
+  orgUnit: {
+    resource: `organisationUnits`,
+    id: ({
+      id
+    }) => id,
+    params: {
+      fields: 'children[id,path,displayName]'
+    }
+  }
+};
+/**
+ * @param {string[]} ids
+ * @param {Object} options
+ * @param {string} options.displayName
+ * @param {boolean} [options.withChildren]
+ * @returns {Object}
+ */
+
+const useOrgChildren = ({
+  node,
+  suppressAlphabeticalSorting,
+  onComplete
+}) => {
+  const onCompleteCalledRef = (0, _react.useRef)(false);
+  const {
+    called,
+    loading,
+    error,
+    data
+  } = (0, _appRuntime.useDataQuery)(ORG_DATA_QUERY, {
+    variables: {
+      id: node.id
+    }
+  });
+  const orgChildren = (0, _react.useMemo)(() => {
+    if (!data) {
+      return undefined;
+    } // undefined or zero
+
+
+    if (!node.children) {
+      return [];
+    }
+
+    const {
+      orgUnit
+    } = data;
+    return suppressAlphabeticalSorting ? orgUnit.children : (0, _index.sortNodeChildrenAlphabetically)(orgUnit.children);
+  }, [data, suppressAlphabeticalSorting]);
+  (0, _react.useEffect)(() => {
+    if (onComplete && orgChildren && !onCompleteCalledRef.current) {
+      // For backwards compatibility: Pass entire node incl. children
+      onComplete({ ...node,
+        children: orgChildren
+      });
+      onCompleteCalledRef.current = true;
+    }
+  }, [onComplete, orgChildren, onCompleteCalledRef]);
+  return {
+    called,
+    loading,
+    error: error || null,
+    data: orgChildren
+  };
+};
+
+exports.useOrgChildren = useOrgChildren;

package/build/cjs/organisation-unit-node/use-org-children.test.js

@@ -0,0 +1,319 @@
+"use strict";
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useOrgChildren = require("./use-org-children.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('OrganisationUnitTree - useOrgChildren', () => {
+  const dataProviderData = {
+    organisationUnits: jest.fn((type, {
+      id
+    }) => {
+      if (id === 'A0000000000') {
+        return {
+          children: [{
+            id: 'A0000000001',
+            path: '/A0000000000/A0000000001',
+            children: [],
+            displayName: 'Org Unit 2'
+          }]
+        };
+      }
+
+      return Promise.reject(`No org unit with id "${id}"`);
+    })
+  };
+
+  const wrapper = ({
+    children
+  }) => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+    data: dataProviderData
+  }, children);
+
+  const node = {
+    id: 'A0000000000',
+    path: '/A0000000000',
+    displayName: 'Org Unit 1',
+    children: 1
+  };
+  it('should respond with `loading: true`, `error: null` and `data: null` initially', async () => {
+    const {
+      result,
+      waitForNextUpdate
+    } = (0, _reactHooks.renderHook)(() => (0, _useOrgChildren.useOrgChildren)({
+      node
+    }), {
+      wrapper
+    });
+    expect(result.current).toEqual({
+      called: true,
+      loading: true,
+      error: null,
+      data: undefined
+    }); // Prevent the following error log with
+    // "Warning: An update to TestComponent inside a test was not wrapped
+    // in act(...)."
+
+    await waitForNextUpdate();
+  });
+  it('should provide the org unit data', async () => {
+    const {
+      result,
+      waitForNextUpdate
+    } = (0, _reactHooks.renderHook)(() => (0, _useOrgChildren.useOrgChildren)({
+      node
+    }), {
+      wrapper
+    });
+    await waitForNextUpdate();
+    expect(result.current).toEqual({
+      called: true,
+      loading: false,
+      error: null,
+      data: [{
+        id: 'A0000000001',
+        path: '/A0000000000/A0000000001',
+        children: [],
+        displayName: 'Org Unit 2'
+      }]
+    });
+  });
+  it('should provide the error', async () => {
+    const errorWrapper = ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+      data: {
+        organisationUnits: async () => {
+          throw new Error('Error message');
+        }
+      }
+    }, children);
+
+    const {
+      result,
+      waitForNextUpdate
+    } = (0, _reactHooks.renderHook)(() => (0, _useOrgChildren.useOrgChildren)({
+      node
+    }), {
+      wrapper: errorWrapper
+    });
+    await waitForNextUpdate();
+    expect(result.current).toEqual({
+      called: true,
+      loading: false,
+      error: new Error('Error message'),
+      data: undefined
+    });
+  });
+  it('should call the onComplete callback', async () => {
+    const onComplete = jest.fn();
+    const options = {
+      onComplete,
+      node
+    };
+    const {
+      waitForNextUpdate
+    } = (0, _reactHooks.renderHook)(() => (0, _useOrgChildren.useOrgChildren)(options), {
+      wrapper
+    });
+    await waitForNextUpdate();
+    expect(onComplete).toHaveBeenCalledWith({
+      id: 'A0000000000',
+      path: '/A0000000000',
+      displayName: 'Org Unit 1',
+      children: [{
+        id: 'A0000000001',
+        path: '/A0000000000/A0000000001',
+        children: [],
+        displayName: 'Org Unit 2'
+      }]
+    });
+  });
+  it("should sort the node's children alphabetically by default", async () => {
+    const dataProviderDataWithUnsortedChildren = {
+      organisationUnits: jest.fn((type, {
+        id
+      }) => {
+        if (id === 'A0000000000') {
+          return {
+            children: [{
+              id: 'A0000000002',
+              path: '/A0000000000/A0000000002',
+              children: [],
+              displayName: 'Org Unit 3'
+            }, {
+              id: 'A0000000001',
+              path: '/A0000000000/A0000000001',
+              children: [],
+              displayName: 'Org Unit 2'
+            }]
+          };
+        }
+
+        return Promise.reject(`No org unit with id "${id}"`);
+      })
+    };
+
+    const wrapperWithUnsortedChildren = ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
+
+    const {
+      result,
+      waitForNextUpdate
+    } = (0, _reactHooks.renderHook)(() => (0, _useOrgChildren.useOrgChildren)({
+      node: { ...node,
+        children: 2
+      }
+    }), {
+      wrapper: wrapperWithUnsortedChildren
+    });
+    await waitForNextUpdate();
+    expect(result.current).toEqual({
+      called: true,
+      loading: false,
+      error: null,
+      data: [{
+        id: 'A0000000001',
+        path: '/A0000000000/A0000000001',
+        children: [],
+        displayName: 'Org Unit 2'
+      }, {
+        id: 'A0000000002',
+        path: '/A0000000000/A0000000002',
+        children: [],
+        displayName: 'Org Unit 3'
+      }]
+    });
+  });
+  it(`should not sort the node's children alphabetically when "suppressAlphabeticalSorting" is true`, async () => {
+    const dataProviderDataWithUnsortedChildren = {
+      organisationUnits: jest.fn((type, {
+        id
+      }) => {
+        if (id === 'A0000000000') {
+          return {
+            children: [{
+              id: 'A0000000002',
+              path: '/A0000000000/A0000000002',
+              children: [],
+              displayName: 'Org Unit 3'
+            }, {
+              id: 'A0000000001',
+              path: '/A0000000000/A0000000001',
+              children: [],
+              displayName: 'Org Unit 2'
+            }]
+          };
+        }
+
+        return Promise.reject(`No org unit with id "${id}"`);
+      })
+    };
+
+    const wrapperWithUnsortedChildren = ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
+
+    const options = {
+      node: { ...node,
+        children: 2
+      },
+      suppressAlphabeticalSorting: true
+    };
+    const {
+      result,
+      waitForNextUpdate
+    } = (0, _reactHooks.renderHook)(() => (0, _useOrgChildren.useOrgChildren)(options), {
+      wrapper: wrapperWithUnsortedChildren
+    });
+    await waitForNextUpdate();
+    expect(result.current).toEqual({
+      called: true,
+      loading: false,
+      error: null,
+      data: [{
+        id: 'A0000000002',
+        path: '/A0000000000/A0000000002',
+        children: [],
+        displayName: 'Org Unit 3'
+      }, {
+        id: 'A0000000001',
+        path: '/A0000000000/A0000000001',
+        children: [],
+        displayName: 'Org Unit 2'
+      }]
+    });
+  });
+  it(`should not sort the node's children alphabetically when "suppressAlphabeticalSorting" is true`, async () => {
+    const dataProviderDataWithUnsortedChildren = {
+      organisationUnits: jest.fn((type, {
+        id
+      }) => {
+        if (id === 'A0000000000') {
+          return {
+            children: [{
+              id: 'A0000000002',
+              path: '/A0000000000/A0000000002',
+              children: [],
+              displayName: 'Org Unit 3'
+            }, {
+              id: 'A0000000001',
+              path: '/A0000000000/A0000000001',
+              children: [],
+              displayName: 'Org Unit 2'
+            }]
+          };
+        }
+
+        return Promise.reject(`No org unit with id "${id}"`);
+      })
+    };
+
+    const wrapperWithUnsortedChildren = ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
+
+    const options = {
+      node: { ...node,
+        children: 2
+      },
+      suppressAlphabeticalSorting: true
+    };
+    const {
+      result,
+      waitForNextUpdate
+    } = (0, _reactHooks.renderHook)(() => (0, _useOrgChildren.useOrgChildren)(options), {
+      wrapper: wrapperWithUnsortedChildren
+    });
+    await waitForNextUpdate();
+    expect(result.current).toEqual({
+      called: true,
+      loading: false,
+      error: null,
+      data: [{
+        id: 'A0000000002',
+        path: '/A0000000000/A0000000002',
+        children: [],
+        displayName: 'Org Unit 3'
+      }, {
+        id: 'A0000000001',
+        path: '/A0000000000/A0000000001',
+        children: [],
+        displayName: 'Org Unit 2'
+      }]
+    });
+  });
+});

package/build/cjs/organisation-unit-node/use-org-data/use-org-data.js

@@ -7,10 +7,6 @@ exports.useOrgData = void 0;
 
 var _appRuntime = require("@dhis2/app-runtime");
 
-var _react = require("react");
-
-var _index = require("../../helpers/index.js");
-
 const ORG_DATA_QUERY = {
   orgUnit: {
     resource: `organisationUnits`,
@@ -21,7 +17,7 @@ const ORG_DATA_QUERY = {
       isUserDataViewFallback
     }) => ({
       isUserDataViewFallback,
-      fields: ['id', 'path', 'children[id,path,displayName]']
+      fields: ['path', 'children::size']
     })
   }
 };
@@ -29,24 +25,18 @@ const ORG_DATA_QUERY = {
  * @param {string[]} ids
  * @param {Object} options
  * @param {string} options.displayName
- * @param {boolean} [options.withChildren]
+ * @param {bool} options.isUserDataViewFallback
  * @returns {Object}
  */
 
 const useOrgData = (id, {
-  isUserDataViewFallback,
-  suppressAlphabeticalSorting,
-  onComplete,
-  displayName
+  displayName,
+  isUserDataViewFallback
 }) => {
   if (!displayName) {
     throw new Error('"displayName" is required');
   }
 
-  const defaultData = {
-    id,
-    displayName
-  };
   const variables = {
     id,
     isUserDataViewFallback
@@ -54,31 +44,18 @@ const useOrgData = (id, {
   const {
     loading,
     error,
-    data
+    data = {}
   } = (0, _appRuntime.useDataQuery)(ORG_DATA_QUERY, {
     variables
   });
-  const transformedData = (0, _react.useMemo)(() => {
-    if (!data) {
-      return defaultData;
-    }
-
-    const {
-      orgUnit: node
-    } = data;
-    const transformed = suppressAlphabeticalSorting ? node : (0, _index.sortNodeChildrenAlphabetically)(node);
-    const merged = { ...defaultData,
-      ...transformed
-    };
-    return merged;
-  }, [data, suppressAlphabeticalSorting, id, displayName]);
-  (0, _react.useEffect)(() => {
-    onComplete && onComplete(transformedData);
-  }, [onComplete, transformedData]);
   return {
     loading,
     error: error || null,
-    data: transformedData
+    data: {
+      id,
+      displayName,
+      ...data.orgUnit
+    }
   };
 };