diff --git a/packages/esm-service-queues-app/src/hooks/useQueueEntries.ts b/packages/esm-service-queues-app/src/hooks/useQueueEntries.ts index 73b0776a1..688e92ee9 100644 --- a/packages/esm-service-queues-app/src/hooks/useQueueEntries.ts +++ b/packages/esm-service-queues-app/src/hooks/useQueueEntries.ts @@ -3,6 +3,7 @@ import { type QueueEntry, type QueueEntrySearchCriteria } from '../types'; import useSWR from 'swr'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { useSWRConfig } from 'swr/_internal'; +import isEqual from 'lodash-es/isEqual'; type QueueEntryResponse = FetchResponse<{ results: Array; @@ -81,11 +82,37 @@ export function useQueueEntries(searchCriteria?: QueueEntrySearchCriteria, rep: const [data, setData] = useState>>([]); const [totalCount, setTotalCount] = useState(); const [currentPage, setCurrentPage] = useState(0); - const [pageUrl, setPageUrl] = useState(getInitialUrl(rep, searchCriteria)); + const [currentSearchCriteria, setCurrentSearchCriteria] = useState(searchCriteria); + const [currentRep, setCurrentRep] = useState(rep); + const [pageUrl, setPageUrl] = useState(getInitialUrl(currentRep, currentSearchCriteria)); const [error, setError] = useState(); const { mutateQueueEntries } = useMutateQueueEntries(); const [waitingForMutate, setWaitingForMutate] = useState(false); + const refetchAllData = useCallback( + (newRep: string = currentRep, newSearchCriteria: QueueEntrySearchCriteria = currentSearchCriteria) => { + setWaitingForMutate(true); + setCurrentPage(0); + setPageUrl(getInitialUrl(newRep, newSearchCriteria)); + }, + [currentRep, currentSearchCriteria], + ); + + // This hook listens to the searchCriteria and rep values and refetches the data when they change. + useEffect(() => { + const isSearchCriteriaUpdated = !isEqual(currentSearchCriteria, searchCriteria); + const isRepUpdated = currentRep !== rep; + if (isSearchCriteriaUpdated || isRepUpdated) { + if (isSearchCriteriaUpdated) { + setCurrentSearchCriteria(searchCriteria); + } + if (isRepUpdated) { + setCurrentRep(rep); + } + refetchAllData(rep, searchCriteria); + } + }, [searchCriteria, currentSearchCriteria, setCurrentSearchCriteria, currentRep, rep]); + const { data: pageData, isValidating, error: pageError } = useSWR(pageUrl, openmrsFetch); useEffect(() => { @@ -137,10 +164,8 @@ export function useQueueEntries(searchCriteria?: QueueEntrySearchCriteria, rep: }, [pageError]); const queueUpdateListener = useCallback(() => { - setWaitingForMutate(true); - setCurrentPage(0); - setPageUrl(getInitialUrl(rep, searchCriteria)); - }, [rep, searchCriteria]); + refetchAllData(); + }, [refetchAllData]); useEffect(() => { window.addEventListener('queue-entry-updated', queueUpdateListener); diff --git a/packages/esm-service-queues-app/src/queue-table/default-queue-table.component.tsx b/packages/esm-service-queues-app/src/queue-table/default-queue-table.component.tsx index 574a58510..144ad74bf 100644 --- a/packages/esm-service-queues-app/src/queue-table/default-queue-table.component.tsx +++ b/packages/esm-service-queues-app/src/queue-table/default-queue-table.component.tsx @@ -37,12 +37,16 @@ function DefaultQueueTable() { const selectedService = useSelectedService(); const currentLocationUuid = useSelectedQueueLocationUuid(); const selectedQueueStatus = useSelectedQueueStatus(); - const { queueEntries, isLoading, error, isValidating } = useQueueEntries({ - service: selectedService?.serviceUuid, - location: currentLocationUuid, - isEnded: false, - status: selectedQueueStatus?.statusUuid, - }); + const searchCriteria = useMemo( + () => ({ + service: selectedService?.serviceUuid, + location: currentLocationUuid, + isEnded: false, + status: selectedQueueStatus?.statusUuid, + }), + [selectedService?.serviceUuid, currentLocationUuid, selectedQueueStatus?.statusUuid], + ); + const { queueEntries, isLoading, error, isValidating } = useQueueEntries(searchCriteria); const { t } = useTranslation();