Merge pull request #908 from opensrp/900-fix-card-support-location-hi…

…erarchy-2
onaio · Jan 19, 2022 · 831b9e5 · 831b9e5
2 parents f2cefaf + 3cfc6d2
commit 831b9e5
Show file tree

Hide file tree

Showing 7 changed files with 220 additions and 166 deletions.
diff --git a/app/src/App/tests/App.test.tsx b/app/src/App/tests/App.test.tsx
@@ -21,6 +21,7 @@ import {
 } from '@opensrp/product-catalogue';
 import { ACTIVE_PLANS_LIST_VIEW_URL } from '@opensrp/plans';
 import { URL_DOWNLOAD_CLIENT_DATA } from '../../constants';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
 jest.mock('../../configs/env');
 
@@ -221,12 +222,18 @@ describe('App - authenticated', () => {
     const envModule = require('../../configs/env');
     envModule.DEFAULT_HOME_MODE = 'tunisia';
     history.push(URL_DOWNLOAD_CLIENT_DATA);
+
+    // card support uses react query (component at history.push)
+    const queryClient = new QueryClient();
+
     const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <App />
-        </Router>
-      </Provider>
+      <QueryClientProvider client={queryClient}>
+        <Provider store={store}>
+          <Router history={history}>
+            <App />
+          </Router>
+        </Provider>
+      </QueryClientProvider>
     );
 
     await act(async () => {

diff --git a/packages/card-support/src/components/DownloadClientData/index.tsx b/packages/card-support/src/components/DownloadClientData/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import moment from 'moment';
 import { Button, Card, Typography, Form, Select, TreeSelect, DatePicker, Tooltip } from 'antd';
@@ -12,10 +12,11 @@ import {
   ParsedHierarchyNode,
 } from '@opensrp/location-management';
 import reducerRegistry from '@onaio/redux-reducer-registry';
-import { submitForm, handleCardOrderDateChange, UserAssignment } from './utils';
-import { OPENSRP_URL_LOCATION_HIERARCHY, OPENSRP_URL_USER_ASSIGNMENT } from '../../constants';
+import { submitForm, handleCardOrderDateChange } from './utils';
+import { OPENSRP_URL_LOCATION_HIERARCHY, SECURITY_AUTHENTICATE } from '../../constants';
 import { sendErrorNotification } from '@opensrp/notifications';
 import lang from '../../lang';
+import { useQuery } from 'react-query';
 
 reducerRegistry.register(locationHierachyDucks.reducerName, locationHierachyDucks.reducer);
 
@@ -59,9 +60,8 @@ export const initialFormValues: Partial<DownloadClientDataFormFields> = {
  */
 const DownloadClientData: React.FC<DownloadClientDataProps> = (props: DownloadClientDataProps) => {
   const { opensrpBaseURL, opensrpServiceClass, fetchAllHierarchiesActionCreator } = props;
-  const [cardOrderDate, setCardOrderDate] = React.useState<[string, string]>(['', '']);
-  const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
-  const [defaultLocationId, setDefaultLocationId] = React.useState<string>('');
+  const [cardOrderDate, setCardOrderDate] = useState<[string, string]>(['', '']);
+  const [isSubmitting, setSubmitting] = useState<boolean>(false);
   const locationHierarchies = useSelector((state) =>
     locationHierachyDucks.getAllHierarchiesArray(state)
   );
@@ -93,40 +93,45 @@ const DownloadClientData: React.FC<DownloadClientDataProps> = (props: DownloadCl
     return current > moment().startOf('day');
   };
 
-  React.useEffect(() => {
-    const serve = new opensrpServiceClass(accessToken, opensrpBaseURL, OPENSRP_URL_USER_ASSIGNMENT);
-    serve
-      .list()
-      .then((assignment: UserAssignment) => {
-        const { jurisdictions } = assignment;
-        const defaultLocationId = jurisdictions[0];
-        setDefaultLocationId(defaultLocationId);
-        const serve = new opensrpServiceClass(
-          accessToken,
-          opensrpBaseURL,
-          OPENSRP_URL_LOCATION_HIERARCHY
-        );
-        serve
-          // eslint-disable-next-line @typescript-eslint/camelcase
-          .read(defaultLocationId, { is_jurisdiction: true })
-          .then((res: RawOpenSRPHierarchy) => {
-            const hierarchy = generateJurisdictionTree(res);
-            dispatch(fetchAllHierarchiesActionCreator([hierarchy.model]));
-          })
-          .catch((_: Error) => {
-            sendErrorNotification(lang.ERROR_OCCURRED);
-          });
-      })
-      .catch((_: Error) => {
-        sendErrorNotification(lang.ERROR_OCCURRED);
-      });
-  }, [
-    accessToken,
-    opensrpBaseURL,
-    fetchAllHierarchiesActionCreator,
-    opensrpServiceClass,
-    dispatch,
-  ]);
+  interface DefaultLocation {
+    display: string;
+    name: string;
+    uuid: string;
+  }
+
+  // remove '/rest' from base opensrp url (https://some.open.opensrp.url/opensrp/rest/)
+  const BASE_URL = opensrpBaseURL.replace('/rest', '');
+
+  // fetch logged in user data including team assigned to and location assigned to the team
+  const userLocSettings = useQuery(
+    SECURITY_AUTHENTICATE,
+    () => new opensrpServiceClass(accessToken, BASE_URL, SECURITY_AUTHENTICATE).list(),
+    {
+      onError: () => sendErrorNotification(lang.USER_NOT_ASSIGNED_AND_USERS_TEAM_NOT_ASSIGNED),
+      select: (res: { team: { team: { location: DefaultLocation } } }) => res.team.team.location,
+    }
+  );
+
+  // fetch location hierarchy for location assigned to the team
+  useQuery(
+    OPENSRP_URL_LOCATION_HIERARCHY,
+    () =>
+      new opensrpServiceClass(
+        accessToken,
+        opensrpBaseURL,
+        OPENSRP_URL_LOCATION_HIERARCHY
+        // eslint-disable-next-line @typescript-eslint/camelcase
+      ).read(userLocSettings?.data?.uuid ?? '', { is_jurisdiction: true }),
+    {
+      // start fetching when userLocSettings hook succeeds
+      enabled: userLocSettings.isSuccess && userLocSettings.data.uuid.length > 0,
+      onError: () => sendErrorNotification(lang.ERROR_OCCURRED),
+      onSuccess: (res: RawOpenSRPHierarchy) => {
+        const hierarchy = generateJurisdictionTree(res);
+        dispatch(fetchAllHierarchiesActionCreator([hierarchy.model]));
+      },
+    }
+  );
 
   /** Function to parse the hierarchy tree into TreeSelect node format
    *
@@ -152,7 +157,9 @@ const DownloadClientData: React.FC<DownloadClientDataProps> = (props: DownloadCl
             submitForm(
               {
                 ...values,
-                clientLocation: values.clientLocation ? values.clientLocation : defaultLocationId,
+                clientLocation: values.clientLocation
+                  ? values.clientLocation
+                  : userLocSettings?.data?.uuid ?? '',
                 cardOrderDate,
               },
               accessToken,

diff --git a/packages/card-support/src/components/DownloadClientData/tests/fixtures.ts b/packages/card-support/src/components/DownloadClientData/tests/fixtures.ts
@@ -245,8 +245,15 @@ export const locationTreeNode3 = {
 
 export const locations = [locationTreeNode1];
 
-export const userAssignment = {
-  organizationIds: [2],
-  jurisdictions: ['e2b4a441-21b5-4d03-816b-09d45b17cad7'],
-  plans: [],
+export const sampleTeamAssignment = {
+  team: {
+    team: {
+      teamName: 'Weekly Call',
+      uuid: '903594cf-7890-4c64-9e12-143fda948a72',
+      location: {
+        name: 'Nairobi',
+        uuid: 'e2b4a441-21b5-4d03-816b-09d45b17cad7',
+      },
+    },
+  },
 };