OM-3355: fetch all workers in groups (#85)

openimis · Oct 29, 2024 · b110602 · b110602
1 parent 6e5ef65
commit b110602
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 57 deletions.
diff --git a/src/actions.js b/src/actions.js
@@ -26,13 +26,7 @@ const WORKER_VOUCHER_PROJECTION = (modulesManager) => [
   `policyholder ${modulesManager.getProjection('policyHolder.PolicyHolderPicker.projection')}`,
 ];
 
-const WORKER_VOUCHER_CHECK_PROJECTION = [
-  'isExisted',
-  'isValid',
-  'assignedDate',
-  'employerCode',
-  'employerName',
-];
+const WORKER_VOUCHER_CHECK_PROJECTION = ['isExisted', 'isValid', 'assignedDate', 'employerCode', 'employerName'];
 
 const VOUCHER_PRICE_PROJECTION = () => ['id', 'uuid', 'key', 'value', 'dateValidFrom', 'dateValidTo', 'isDeleted'];
 
@@ -334,12 +328,8 @@ const processCategoryData = (category, data, allData) => {
   return { hasNextPage: false, endCursor: null };
 };
 
-export async function fetchAllPages(dispatch, query, variables) {
-  const allData = {
-    allAvailableWorkers: [],
-    previousWorkers: [],
-    previousDayWorkers: [],
-  };
+export async function fetchAllPages(dispatch, query, variables, categories) {
+  const allData = Object.fromEntries(categories.map((category) => [category, []]));
   let hasNextPage = true;
   let after = 'YXJyYXljb25uZWN0aW9uOi0x'; // arrayconnection:-1
 
@@ -351,23 +341,13 @@ export async function fetchAllPages(dispatch, query, variables) {
       );
       const data = response?.payload?.data || {};
 
-      const allAvailableWorkersInfo = processCategoryData('allAvailableWorkers', data, allData);
-      const previousWorkersInfo = processCategoryData('previousWorkers', data, allData);
-      const previousDayWorkersInfo = processCategoryData('previousDayWorkers', data, allData);
+      const pageInfos = categories.map((category) => processCategoryData(category, data, allData));
 
-      hasNextPage = allAvailableWorkersInfo.hasNextPage
-        || previousWorkersInfo.hasNextPage
-        || previousDayWorkersInfo.hasNextPage;
+      hasNextPage = pageInfos.some((pageInfo) => pageInfo.hasNextPage);
 
-      after = allAvailableWorkersInfo.endCursor
-        || previousWorkersInfo.endCursor
-        || previousDayWorkersInfo.endCursor;
+      after = pageInfos.find((info) => info.hasNextPage)?.endCursor;
 
-      if (
-        !allAvailableWorkersInfo.hasNextPage
-        && !previousWorkersInfo.hasNextPage
-        && !previousDayWorkersInfo.hasNextPage
-      ) {
+      if (!hasNextPage) {
         hasNextPage = false;
       }
     } catch (error) {
@@ -434,7 +414,40 @@ export async function fetchAllAvailableWorkers(dispatch, economicUnitCode, dateR
       }
     }  
   `;
-  const response = await fetchAllPages(dispatch, query, { economicUnitCode, dateRange });
+  const response = await fetchAllPages(
+    dispatch,
+    query,
+    { economicUnitCode, dateRange },
+    ['allAvailableWorkers', 'previousWorkers', 'previousDayWorkers'],
+  );
+
+  return response;
+}
+
+export async function fetchAllAvailableWorkersInBatches(dispatch, economicUnitCode) {
+  const query = `
+    query getAllAvailableWorkers($economicUnitCode: String!, $after: String!) {
+      allAvailableWorkers: worker(economicUnitCode: $economicUnitCode, after: $after) {
+        edges {
+          node {
+            id
+            uuid
+            chfId
+            lastName
+            otherNames
+            dob
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  `;
+
+  const response = await fetchAllPages(dispatch, query, { economicUnitCode }, ['allAvailableWorkers']);
+
   return response;
 }
 

diff --git a/src/components/groups/GroupWorkerManagePanel.js b/src/components/groups/GroupWorkerManagePanel.js
@@ -1,7 +1,7 @@
+import _debounce from 'lodash/debounce';
 import React, {
-  useCallback, useEffect, useState, useRef,
+  useCallback, useEffect, useRef, useState,
 } from 'react';
-import _debounce from 'lodash/debounce';
 import { useDispatch, useSelector } from 'react-redux';
 
 import {
@@ -28,17 +28,15 @@ import { makeStyles } from '@material-ui/styles';
 import {
   FormattedMessage,
   ProgressOrError,
-  parseData,
+  historyPush,
+  useHistory,
   useModulesManager,
   useTranslations,
-  useHistory,
-  historyPush,
 } from '@openimis/fe-core';
-import { fetchWorkers } from '../../actions';
+import { fetchAllAvailableWorkersInBatches } from '../../actions';
 import {
   DEFAULT_DEBOUNCE_TIME, EMPTY_STRING, MODULE_NAME, REF_ROUTE_GROUP_LIST,
 } from '../../constants';
-import { ACTION_TYPE } from '../../reducer';
 
 const useStyles = makeStyles((theme) => ({
   paper: { ...theme.paper.paper, width: '100%' },
@@ -99,11 +97,8 @@ function GroupWorkerManagePanel({ edited, onChange }) {
   const fetchAllAvailableWorkers = useCallback(async () => {
     setIsLoading(true);
     try {
-      const workerData = await dispatch(
-        fetchWorkers(modulesManager, [`economicUnitCode:"${economicUnit.code}"`], ACTION_TYPE.REQUEST),
-      );
-      const parsedWorkers = parseData(workerData.payload.data.worker);
-      setAllWorkers(parsedWorkers);
+      const workerData = await fetchAllAvailableWorkersInBatches(dispatch, economicUnit.code);
+      setAllWorkers(workerData.allAvailableWorkers);
     } catch (error) {
       throw new Error(`[GROUP_WORKER_MANAGE_PANEL] Error fetching workers: ${error}`);
     } finally {
@@ -195,23 +190,35 @@ function GroupWorkerManagePanel({ edited, onChange }) {
             </Grid>
             <Paper>
               <List className={classes.list} subheader={<li />}>
-                <ProgressOrError progress={isLoading} />
-                {filteredUniqueWorkers.map((worker) => (
-                  <ListItem button divider key={worker.uuid}>
-                    <ListItemAvatar>
-                      <Avatar alt={`${worker.firstName} ${worker.lastName} Avatar`} src={worker.photo} />
-                    </ListItemAvatar>
-                    <ListItemText
-                      className={classes.listItemText}
-                      primary={`${worker.chfId} ${worker.otherNames} ${worker.lastName}`}
-                    />
-                    <ListItemSecondaryAction>
-                      <IconButton onClick={() => handleWorkerSelection(worker)}>
-                        <PersonAddIcon color="primary" />
-                      </IconButton>
-                    </ListItemSecondaryAction>
-                  </ListItem>
-                ))}
+                {isLoading ? (
+                  <div
+                    style={{
+                      height: '100%',
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <ProgressOrError progress={isLoading} />
+                  </div>
+                ) : (
+                  filteredUniqueWorkers.map((worker) => (
+                    <ListItem button divider key={worker.uuid}>
+                      <ListItemAvatar>
+                        <Avatar alt={`${worker.firstName} ${worker.lastName} Avatar`} src={worker.photo} />
+                      </ListItemAvatar>
+                      <ListItemText
+                        className={classes.listItemText}
+                        primary={`${worker.chfId} ${worker.otherNames} ${worker.lastName}`}
+                      />
+                      <ListItemSecondaryAction>
+                        <IconButton onClick={() => handleWorkerSelection(worker)}>
+                          <PersonAddIcon color="primary" />
+                        </IconButton>
+                      </ListItemSecondaryAction>
+                    </ListItem>
+                  ))
+                )}
               </List>
             </Paper>
           </Grid>