(fix) O3-3015: Fetch all the queue entries to support filters on the …

…frontend (#1124)

* Fetching all the queue entries since fetching is happening on the frontend

* UI improvements

* Review changes

* Typescript fixes

packages/esm-service-queues-app/src/clear-queue-entries-dialog/clear-queue-entries-dialog.scss

@@ -6,9 +6,3 @@
   @include type.type-style('heading-compact-01');
   color: $ui-05;
 }
-
-.clearBtn {
-  margin-left: spacing.$spacing-05;
-  height: spacing.$spacing-09;
-  border: 0.063rem solid #a2191f;
-}

packages/esm-service-queues-app/src/clear-queue-entries-dialog/clear-queue-entries.component.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@carbon/react';
 import { TrashCan } from '@carbon/react/icons';
-import { showModal } from '@openmrs/esm-framework';
+import { isDesktop, showModal, useLayoutType } from '@openmrs/esm-framework';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { type QueueEntry } from '../types';
@@ -19,6 +19,7 @@ interface ClearQueueEntriesProps {
  */
 const ClearQueueEntries: React.FC<ClearQueueEntriesProps> = ({ queueEntries }) => {
   const { t } = useTranslation();
+  const layout = useLayoutType();
 
   const launchClearAllQueueEntriesModal = useCallback(() => {
     const dispose = showModal('clear-all-queue-entries', {
@@ -29,9 +30,8 @@ const ClearQueueEntries: React.FC<ClearQueueEntriesProps> = ({ queueEntries }) =
 
   return (
     <Button
-      size="sm"
+      size={isDesktop(layout) ? 'sm' : 'lg'}
       kind="danger--tertiary"
-      className={styles.clearBtn}
       renderIcon={(props) => <TrashCan size={16} {...props} />}
       onClick={launchClearAllQueueEntriesModal}
       iconDescription={t('clearQueue', 'Clear queue')}>

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

@@ -1,30 +1,77 @@
-import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { type QueueEntry, type QueueEntrySearchCriteria } from '../types';
+import useSWRInfinite from 'swr/infinite';
 import useSWR from 'swr';
+import { useCallback, useEffect, useState } from 'react';
+
+type QueueEntryResponse = FetchResponse<{
+  results: Array<QueueEntry>;
+  links: Array<{
+    rel: 'prev' | 'next';
+    uri: string;
+  }>;
+  totalCount: number;
+}>;
 
 const repString =
   'custom:(uuid,display,queue,status,patient:(uuid,display,person,identifiers:(uuid,display,identifier,identifierType)),visit:(uuid,display,startDatetime,encounters:(uuid,display,diagnoses,encounterDatetime,encounterType,obs,encounterProviders,voided)),priority,priorityComment,sortWeight,startedAt,endedAt,locationWaitingFor,queueComingFrom,providerWaitingFor,previousQueueEntry)';
 
 export function useQueueEntries(searchCriteria?: QueueEntrySearchCriteria, rep: string = repString) {
-  const searchParam = new URLSearchParams();
-  for (let [key, value] of Object.entries(searchCriteria)) {
-    if (value != null) {
-      searchParam.append(key, value?.toString());
-    }
-  }
+  const [totalCount, setTotalCount] = useState<number>();
+
+  const getUrl = useCallback(
+    (pageIndex: number, previousPageData: QueueEntryResponse) => {
+      if (pageIndex && !previousPageData?.data?.links?.some((link) => link.rel === 'next')) {
+        return null;
+      }
+
+      if (previousPageData?.data?.links?.some((link) => link.rel === 'next')) {
+        const nextUrl = new URL(previousPageData.data.links.find((link) => link.rel === 'next')?.uri);
+        // default for production
+        if (nextUrl.origin === window.location.origin) {
+          return nextUrl;
+        }
 
-  searchParam.append('v', rep);
-  searchParam.append('totalCount', 'true');
+        // in development, the request should be funnelled through the local proxy
+        return new URL(`${nextUrl.pathname}${nextUrl.search ? nextUrl.search : ''}`, window.location.origin).toString();
+      }
 
-  const apiUrl = `${restBaseUrl}/queue-entry?` + searchParam.toString();
-  const { data, ...rest } = useSWR<{ data: { results: Array<QueueEntry>; totalCount: number } }, Error>(
-    apiUrl,
-    openmrsFetch,
+      const apiUrl = `${restBaseUrl}/queue-entry`;
+      const searchParam = new URLSearchParams();
+      searchParam.append('v', rep);
+      searchParam.append('totalCount', 'true');
+
+      for (let [key, value] of Object.entries(searchCriteria)) {
+        if (value != null) {
+          searchParam.append(key, value?.toString());
+        }
+      }
+
+      return `${apiUrl}?${searchParam.toString()}`;
+    },
+    [searchCriteria, rep],
   );
 
+  const { data, size, setSize, ...rest } = useSWRInfinite<QueueEntryResponse, Error>(getUrl, openmrsFetch);
+
+  useEffect(() => {
+    if (data && data.length && data?.[data?.length - 1]?.data?.links?.some((link) => link.rel === 'next')) {
+      // Calling for the next set of data
+      setSize((prev) => prev + 1);
+    }
+  }, [data, setSize]);
+
+  useEffect(() => {
+    if (data?.[0]?.data?.totalCount && data[0].data.totalCount !== totalCount) {
+      setTotalCount(data[0].data.totalCount);
+    }
+  }, [data?.[0], totalCount, setTotalCount]);
+
+  const allResults: QueueEntry[] = data ? [].concat(...data?.map((response) => response?.data?.results)) : [];
+
   return {
-    queueEntries: data?.data?.results, // note that results can be paginated, thus, result.length != totalCount
-    totalCount: data?.data?.totalCount,
+    queueEntries: allResults,
+    totalCount,
     ...rest,
   };
 }

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

@@ -109,7 +109,7 @@ function DefaultQueueTable() {
             className={styles.search}
             onChange={(e) => setSearchTerm(e.target.value)}
             placeholder={t('searchThisList', 'Search this list')}
-            size="sm"
+            size={isDesktop(layout) ? 'sm' : 'lg'}
           />,
           <ClearQueueEntries queueEntries={filteredQueueEntries} />,
         ]}
@@ -121,6 +121,7 @@ function DefaultQueueTable() {
 
 function QueueDropdownFilter() {
   const { t } = useTranslation();
+  const layout = useLayoutType();
   const currentQueueLocation = useSelectedQueueLocationUuid();
   const { queues } = useQueues(currentQueueLocation);
   const currentServiceName = useSelectedServiceName();
@@ -140,7 +141,7 @@ function QueueDropdownFilter() {
           items={[{ display: `${t('all', 'All')}` }, ...queues]}
           itemToString={(item) => (item ? item.display : '')}
           onChange={handleServiceChange}
-          size="sm"
+          size={isDesktop(layout) ? 'sm' : 'lg'}
         />
       </div>
     </>

packages/esm-service-queues-app/src/queue-table/queue-table.scss

@@ -78,15 +78,11 @@
 
   .toolbarContent {
     display: flex;
-    align-items: baseline;
-    height: spacing.$spacing-07;
-    margin-bottom: spacing.$spacing-02;
     z-index: 1; // prevent dropdown from getting covered by table elements
   }
 
   :global(.cds--table-toolbar) {
     position: static;
-    height: 3rem;
     overflow: visible;
   }
 }