@dhis2-ui/organisation-unit-tree 7.16.3 → 8.0.2

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

@@ -0,0 +1,311 @@
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+import { useOrgChildren } from './use-org-children.js';
+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.createElement(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
+    } = renderHook(() => 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
+    } = renderHook(() => 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.createElement(CustomDataProvider, {
+      data: {
+        organisationUnits: async () => {
+          throw new Error('Error message');
+        }
+      }
+    }, children);
+
+    const {
+      result,
+      waitForNextUpdate
+    } = renderHook(() => 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
+    } = renderHook(() => 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.createElement(CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
+
+    const {
+      result,
+      waitForNextUpdate
+    } = renderHook(() => 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.createElement(CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
+
+    const options = {
+      node: { ...node,
+        children: 2
+      },
+      suppressAlphabeticalSorting: true
+    };
+    const {
+      result,
+      waitForNextUpdate
+    } = renderHook(() => 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.createElement(CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
+
+    const options = {
+      node: { ...node,
+        children: 2
+      },
+      suppressAlphabeticalSorting: true
+    };
+    const {
+      result,
+      waitForNextUpdate
+    } = renderHook(() => 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/es/organisation-unit-node/use-org-data/use-org-data.js

@@ -1,6 +1,4 @@
 import { useDataQuery } from '@dhis2/app-runtime';
-import { useMemo, useEffect } from 'react';
-import { sortNodeChildrenAlphabetically } from '../../helpers/index.js';
 const ORG_DATA_QUERY = {
   orgUnit: {
     resource: `organisationUnits`,
@@ -11,7 +9,7 @@ const ORG_DATA_QUERY = {
       isUserDataViewFallback
     }) => ({
       isUserDataViewFallback,
-      fields: ['id', 'path', 'children[id,path,displayName]']
+      fields: ['path', 'children::size']
     })
   }
 };
@@ -19,24 +17,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}
  */
 
 export 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
@@ -44,30 +36,17 @@ export const useOrgData = (id, {
   const {
     loading,
     error,
-    data
+    data = {}
   } = useDataQuery(ORG_DATA_QUERY, {
     variables
   });
-  const transformedData = useMemo(() => {
-    if (!data) {
-      return defaultData;
-    }
-
-    const {
-      orgUnit: node
-    } = data;
-    const transformed = suppressAlphabeticalSorting ? node : sortNodeChildrenAlphabetically(node);
-    const merged = { ...defaultData,
-      ...transformed
-    };
-    return merged;
-  }, [data, suppressAlphabeticalSorting, id, displayName]);
-  useEffect(() => {
-    onComplete && onComplete(transformedData);
-  }, [onComplete, transformedData]);
   return {
     loading,
     error: error || null,
-    data: transformedData
+    data: {
+      id,
+      displayName,
+      ...data.orgUnit
+    }
   };
 };

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

@@ -23,13 +23,7 @@ describe('OrganisationUnitTree - useOrgData', () => {
         return {
           id: 'A0000000000',
           path: '/A0000000000',
-          displayName: 'Org Unit 1',
-          children: [{
-            id: 'A0000000001',
-            path: '/A0000000000/A0000000001',
-            children: [],
-            displayName: 'Org Unit 2'
-          }]
+          displayName: 'Org Unit 1'
         };
       }
 
@@ -43,7 +37,7 @@ describe('OrganisationUnitTree - useOrgData', () => {
     data: dataProviderData
   }, children);
 
-  it('should respond with `loading: false`, `error: null` and `data: { displayName, id }` initially', () => {
+  it('should respond with `loading: true`, `error: null` and `data: { displayName, id }` initially', () => {
     const {
       result
     } = renderHook(() => useOrgData('A0000000000', {
@@ -76,13 +70,7 @@ describe('OrganisationUnitTree - useOrgData', () => {
       data: {
         id: 'A0000000000',
         path: '/A0000000000',
-        displayName: 'Org Unit 1',
-        children: [{
-          id: 'A0000000001',
-          path: '/A0000000000/A0000000001',
-          children: [],
-          displayName: 'Org Unit 2'
-        }]
+        displayName: 'Org Unit 1'
       }
     });
   });
@@ -115,30 +103,6 @@ describe('OrganisationUnitTree - useOrgData', () => {
       }
     });
   });
-  it('should call the onComplete callback', async () => {
-    const onComplete = jest.fn();
-    const options = {
-      onComplete,
-      displayName: 'Display name'
-    };
-    const {
-      waitForNextUpdate
-    } = renderHook(() => useOrgData('A0000000000', 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 send the "isUserDataViewFallback" parameter with value "undefined"', async () => {
     const options = {
       displayName: 'Display name'
@@ -174,134 +138,4 @@ describe('OrganisationUnitTree - useOrgData', () => {
     }), expect.objectContaining({}) // contains the `signal`
     );
   });
-  it("should sort the node's children alphabetically by default", async () => {
-    const dataProviderDataWithUnsortedChildren = {
-      organisationUnits: jest.fn((type, {
-        id
-      }) => {
-        if (id === 'A0000000000') {
-          return {
-            id: 'A0000000000',
-            path: '/A0000000000',
-            displayName: 'Org Unit 1',
-            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.createElement(CustomDataProvider, {
-      data: dataProviderDataWithUnsortedChildren
-    }, children);
-
-    const {
-      result,
-      waitForNextUpdate
-    } = renderHook(() => useOrgData('A0000000000', {
-      displayName: 'Display name'
-    }), {
-      wrapper: wrapperWithUnsortedChildren
-    });
-    await waitForNextUpdate();
-    expect(result.current).toEqual({
-      loading: false,
-      error: null,
-      data: {
-        id: 'A0000000000',
-        path: '/A0000000000',
-        displayName: 'Org Unit 1',
-        children: [{
-          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 {
-            id: 'A0000000000',
-            path: '/A0000000000',
-            displayName: 'Org Unit 1',
-            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.createElement(CustomDataProvider, {
-      data: dataProviderDataWithUnsortedChildren
-    }, children);
-
-    const options = {
-      displayName: 'Display name',
-      suppressAlphabeticalSorting: true
-    };
-    const {
-      result,
-      waitForNextUpdate
-    } = renderHook(() => useOrgData('A0000000000', options), {
-      wrapper: wrapperWithUnsortedChildren
-    });
-    await waitForNextUpdate();
-    expect(result.current).toEqual({
-      loading: false,
-      error: null,
-      data: {
-        id: 'A0000000000',
-        path: '/A0000000000',
-        displayName: 'Org Unit 1',
-        children: [{
-          id: 'A0000000002',
-          path: '/A0000000000/A0000000002',
-          children: [],
-          displayName: 'Org Unit 3'
-        }, {
-          id: 'A0000000001',
-          path: '/A0000000000/A0000000001',
-          children: [],
-          displayName: 'Org Unit 2'
-        }]
-      }
-    });
-  });
 });

package/build/es/organisation-unit-tree/organisation-unit-tree.js

@@ -37,6 +37,7 @@ const OrganisationUnitTree = ({
   const reloadId = useForceReload(forceReload);
   const [prevReloadId, setPrevReloadId] = useState(reloadId);
   const {
+    called,
     loading,
     error,
     data,
@@ -66,11 +67,12 @@ const OrganisationUnitTree = ({
 
     return () => console.warn('@TODO: Why does this component unmount after a force reload?');
   }, [reloadId, prevReloadId, refetch]);
+  const isLoading = !called || loading;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest
-  }, loading && /*#__PURE__*/React.createElement(RootLoading, null), error && /*#__PURE__*/React.createElement(RootError, {
+  }, isLoading && /*#__PURE__*/React.createElement(RootLoading, null), error && /*#__PURE__*/React.createElement(RootError, {
     error: error
-  }), !error && !loading && rootIds.map(rootId => {
+  }), !error && !isLoading && rootIds.map(rootId => {
     const rootNode = data[rootId];
     return /*#__PURE__*/React.createElement(OrganisationUnitNode, {
       key: rootNode.path,

package/build/es/organisation-unit-tree/use-root-org-data/use-root-org-data.js

@@ -9,8 +9,7 @@ export const createRootQuery = ids => ids.reduce((query, id) => ({ ...query,
       isUserDataViewFallback
     }) => ({
       isUserDataViewFallback,
-      fields: ['displayName', 'path', 'id'],
-      paging: false
+      fields: ['displayName', 'path', 'id']
     })
   }
 }), {});
@@ -29,18 +28,21 @@ export const useRootOrgData = (ids, {
   const variables = {
     isUserDataViewFallback
   };
+  const rootOrgUnits = useDataQuery(query, {
+    variables
+  });
   const {
+    called,
     loading,
     error,
     data,
     refetch
-  } = useDataQuery(query, {
-    variables
-  });
+  } = rootOrgUnits;
   const patchedData = useMemo(() => {
     return data ? patchMissingDisplayName(data) : data;
   }, [data]);
   return {
+    called,
     loading,
     error: error || null,
     data: patchedData || null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/organisation-unit-tree",
-    "version": "7.16.3",
+    "version": "8.0.2",
     "description": "UI OrganisationUnitTree",
     "repository": {
         "type": "git",
@@ -34,10 +34,10 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/checkbox": "7.16.3",
-        "@dhis2-ui/loader": "7.16.3",
-        "@dhis2-ui/node": "7.16.3",
-        "@dhis2/ui-constants": "7.16.3",
+        "@dhis2-ui/checkbox": "8.0.2",
+        "@dhis2-ui/loader": "8.0.2",
+        "@dhis2-ui/node": "8.0.2",
+        "@dhis2/ui-constants": "8.0.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },