Merge pull request openmrs#31 from makombe/queue-fixes-latest

Fix queues to filter services correctly by locations

Author: makombe

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<QueueEntry>;
@@ -84,11 +85,37 @@ export function useQueueEntries(searchCriteria?: QueueEntrySearchCriteria, rep:
   const [data, setData] = useState<Array<Array<QueueEntry>>>([]);
   const [totalCount, setTotalCount] = useState<number>();
   const [currentPage, setCurrentPage] = useState<number>(0);
-  const [pageUrl, setPageUrl] = useState<string>(getInitialUrl(rep, searchCriteria));
+  const [currentSearchCriteria, setCurrentSearchCriteria] = useState(searchCriteria);
+  const [currentRep, setCurrentRep] = useState(rep);
+  const [pageUrl, setPageUrl] = useState<string>(getInitialUrl(currentRep, currentSearchCriteria));
   const [error, setError] = useState<Error>();
   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<QueueEntryResponse, Error>(pageUrl, openmrsFetch);
 
   useEffect(() => {
@@ -99,10 +126,10 @@ export function useQueueEntries(searchCriteria?: QueueEntrySearchCriteria, rep:
     }
     if (pageData && !isValidating && !stillWaitingForMutate) {
       // We've got results! Time to update the data array and move on to the next page.
-      if (pageData?.data?.totalCount && pageData?.data?.totalCount !== totalCount) {
+      if (pageData?.data?.totalCount > -1 && pageData?.data?.totalCount !== totalCount) {
         setTotalCount(pageData?.data?.totalCount);
       }
-      if (pageData?.data?.results?.length) {
+      if (pageData?.data?.results) {
         const newData = [...data];
         newData[currentPage] = pageData?.data?.results;
         setData(newData);
@@ -140,10 +167,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);
@@ -157,7 +182,7 @@ export function useQueueEntries(searchCriteria?: QueueEntrySearchCriteria, rep:
   return {
     queueEntries,
     totalCount,
-    isLoading: !totalCount || (totalCount && queueEntries.length < totalCount),
+    isLoading: totalCount === undefined || (totalCount && queueEntries.length < totalCount),
     isValidating: isValidating || currentPage < data.length,
     error,
     mutate: mutateQueueEntries,

packages/esm-service-queues-app/src/hooks/useQueueService.ts

@@ -2,8 +2,8 @@ import { getLocale } from '@openmrs/esm-framework';
 import { useMemo } from 'react';
 import { useQueues } from './useQueues';
 
-function useQueueServices() {
-  const { queues, isLoading } = useQueues();
+function useQueueServices(locationUuid?: string) {
+  const { queues, isLoading } = useQueues(locationUuid);
 
   const results = useMemo(
     () => ({

packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx

@@ -21,7 +21,7 @@ function ClinicMetrics() {
   const layout = useLayoutType();
   const mutate = useMutateQueueEntries();
   const currentQueueLocation = useSelectedQueueLocationUuid();
-  const { services } = useQueueServices();
+  const { services } = useQueueServices(currentQueueLocation);
   const currentService = useSelectedService();
   const { serviceCount } = useServiceMetricsCount(currentService?.serviceUuid, currentQueueLocation);
   const [initialSelectedItem, setInitialSelectItem] = useState(() => {
@@ -66,6 +66,7 @@ function ClinicMetrics() {
           <Dropdown
             id="inline"
             type="inline"
+            label={currentService?.serviceDisplay ?? t('all', 'All')}
             items={[{ display: `${t('all', 'All')}` }, ...(services ?? [])]}
             itemToString={(item) =>
               item ? `${item.display} ${item.location?.display ? `- ${item.location.display}` : ''}` : ''

packages/esm-service-queues-app/src/queue-table/default-queue-table.component.tsx

@@ -37,12 +37,17 @@ 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();
 
   useEffect(() => {