diff --git a/src/actions.js b/src/actions.js index 3825d22..61d5b0c 100644 --- 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 index 493b8f6..5608584 100644 --- 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 }) { }> - - {filteredUniqueWorkers.map((worker) => ( - - - - - - - handleWorkerSelection(worker)}> - - - - - ))} + {isLoading ? ( +
+ +
+ ) : ( + filteredUniqueWorkers.map((worker) => ( + + + + + + + handleWorkerSelection(worker)}> + + + + + )) + )}