Merge pull request #18 from PiusKariuki/feat/refetch-queues-after-update

Feat/refetch queues after update

packages/esm-service-queues-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sjthc/esm-service-queues-app",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Outpatient front-end module for the OpenMRS SPA",
   "browser": "dist/sjthc-esm-service-queues-app.js",
   "main": "src/index.ts",

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

@@ -2,10 +2,10 @@ import React, { useCallback, useState } from 'react';
 import { Button, ButtonSkeleton, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { useMutateQueueEntries } from '../hooks/useMutateQueueEntries';
 import { type QueueEntry } from '../types';
 import { batchClearQueueEntries } from './clear-queue-entries-dialog.resource';
 import styles from './clear-queue-entries-dialog.scss';
+import {emitRefetchQueuesEvent} from "../helpers/http-events";
 
 interface ClearQueueEntriesDialogProps {
   queueEntries: Array<QueueEntry>;
@@ -14,7 +14,6 @@ interface ClearQueueEntriesDialogProps {
 
 const ClearQueueEntriesDialog: React.FC<ClearQueueEntriesDialogProps> = ({ queueEntries, closeModal }) => {
   const { t } = useTranslation();
-  const { mutateQueueEntries } = useMutateQueueEntries();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleClearQueueBatchRequest = useCallback(() => {
@@ -28,7 +27,7 @@ const ClearQueueEntriesDialog: React.FC<ClearQueueEntriesDialogProps> = ({ queue
           kind: 'success',
           subtitle: t('queuesClearedSuccessfully', 'Queues cleared successfully'),
         });
-        mutateQueueEntries();
+        emitRefetchQueuesEvent();
       },
       (error) => {
         showSnackbar({
@@ -40,7 +39,7 @@ const ClearQueueEntriesDialog: React.FC<ClearQueueEntriesDialogProps> = ({ queue
         closeModal();
       },
     );
-  }, [closeModal, mutateQueueEntries, t, queueEntries]);
+  }, [closeModal, t, queueEntries]);
 
   return (
     <div>

packages/esm-service-queues-app/src/helpers/http-events.ts

@@ -0,0 +1,4 @@
+export const emitRefetchQueuesEvent = (queueUUID: string = "") =>{
+  const event = new CustomEvent('refetchQueues', {detail: queueUUID});
+  window.dispatchEvent(event);
+}

packages/esm-service-queues-app/src/patient-search/visit-form/existing-visit-form.component.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useState } from 'react';
-import { Button, ButtonSet, Form, Row, Stack } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
+import React, {useCallback, useState} from 'react';
+import {Button, ButtonSet, Form, Row} from '@carbon/react';
+import {useTranslation} from 'react-i18next';
 import {
   type ConfigObject,
   type Visit,
@@ -10,9 +10,9 @@ import {
   useLayoutType,
 } from '@openmrs/esm-framework';
 import { addQueueEntry } from '../../active-visits/active-visits-table.resource';
-import { useMutateQueueEntries } from '../../hooks/useMutateQueueEntries';
 import styles from './visit-form.scss';
 import classNames from 'classnames';
+import {emitRefetchQueuesEvent} from "../../helpers/http-events";
 
 interface ExistingVisitFormProps {
   closePanel: () => void;
@@ -26,7 +26,6 @@ const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closePanel
 
   const config = useConfig<ConfigObject>();
   const visitQueueNumberAttributeUuid = config.visitQueueNumberAttributeUuid;
-  const { mutateQueueEntries } = useMutateQueueEntries();
 
   const handleSubmit = useCallback(
     (event) => {
@@ -51,7 +50,7 @@ const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closePanel
         queueLocation,
         visitQueueNumberAttributeUuid,
       ).then(
-        ({ status }) => {
+        ({status, data }) => {
           if (status === 201) {
             showSnackbar({
               kind: 'success',
@@ -61,7 +60,7 @@ const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closePanel
             });
             closePanel();
             setIsSubmitting(false);
-            mutateQueueEntries();
+            emitRefetchQueuesEvent(data?.uuid)
           }
         },
         (error) => {
@@ -79,7 +78,7 @@ const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closePanel
         },
       );
     },
-    [closePanel, mutateQueueEntries, visit, t, visitQueueNumberAttributeUuid],
+    [closePanel, visit, t, visitQueueNumberAttributeUuid],
   );
 
   return visit ? (

packages/esm-service-queues-app/src/patient-search/visit-form/visit-form.component.tsx

@@ -44,9 +44,9 @@ import { SearchTypes, type PatientProgram, type NewVisitPayload } from '../../ty
 import styles from './visit-form.scss';
 import { useDefaultLoginLocation } from '../hooks/useDefaultLocation';
 import isEmpty from 'lodash-es/isEmpty';
-import { useMutateQueueEntries } from '../../hooks/useMutateQueueEntries';
 import { type ConfigObject } from '../../config-schema';
 import { datePickerFormat, datePickerPlaceHolder } from '../../constants';
+import {emitRefetchQueuesEvent} from "../../helpers/http-events";
 
 interface VisitFormProps {
   toggleSearchType: (searchMode: SearchTypes, patientUuid) => void;
@@ -74,7 +74,6 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, toggleSearchType, cl
   const [ignoreChanges, setIgnoreChanges] = useState(true);
   const { activePatientEnrollment, isLoading } = useActivePatientEnrollment(patientUuid);
   const [enrollment, setEnrollment] = useState<PatientProgram>(activePatientEnrollment[0]);
-  const { mutateQueueEntries } = useMutateQueueEntries();
   const visitQueueNumberAttributeUuid = config.visitQueueNumberAttributeUuid;
   const [selectedLocation, setSelectedLocation] = useState('');
   const [visitType, setVisitType] = useState('');
@@ -139,7 +138,7 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, toggleSearchType, cl
                 queueLocation,
                 visitQueueNumberAttributeUuid,
               ).then(
-                ({ status }) => {
+                ({ status, data }) => {
                   if (status === 201) {
                     showSnackbar({
                       kind: 'success',
@@ -152,7 +151,7 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, toggleSearchType, cl
                       ),
                     });
                     closePanel();
-                    mutateQueueEntries();
+                    emitRefetchQueuesEvent(data?.uuid)
                   }
                 },
                 (error) => {
@@ -176,7 +175,6 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, toggleSearchType, cl
     },
     [
       closePanel,
-      mutateQueueEntries,
       patientUuid,
       selectedLocation,
       t,

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

@@ -25,7 +25,7 @@ This is used in the main dashboard of the queues app. (Currently behind a featur
 function DefaultQueueTable() {
   const selectedQueueUuid = useSelectedServiceUuid();
   const currentLocationUuid = useSelectedQueueLocationUuid();
-  const { queueEntries, isLoading, error } = useQueueEntries({
+  const {queueEntries, isLoading, error, mutate} = useQueueEntries({
     queue: selectedQueueUuid,
     location: currentLocationUuid,
     isEnded: false,
@@ -65,6 +65,17 @@ function DefaultQueueTable() {
     });
   }, [queueEntries, searchTerm]);
 
+  useEffect(() => {
+    const handlePatientAddedToQueue = () => mutate()
+
+
+    window.addEventListener('refetchQueues', handlePatientAddedToQueue);
+    return () => {
+      window.removeEventListener('refetchQueues', handlePatientAddedToQueue);
+    }
+
+  }, []);
+
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
   }

packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-actions-modal.component.tsx

@@ -24,10 +24,10 @@ import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { datePickerFormat, datePickerPlaceHolder, time12HourFormatRegexPattern } from '../../constants';
 import { convertTime12to24, type amPm } from '../../helpers/time-helpers';
-import { useMutateQueueEntries } from '../../hooks/useMutateQueueEntries';
 import { useQueues } from '../../hooks/useQueues';
 import { type QueueEntry } from '../../types';
 import styles from './queue-entry-actons-modal.scss';
+import {emitRefetchQueuesEvent} from "../../helpers/http-events";
 
 interface QueueEntryActionModalProps {
   queueEntry: QueueEntry;
@@ -66,7 +66,6 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
   modalParams,
 }) => {
   const { t } = useTranslation();
-  const { mutateQueueEntries } = useMutateQueueEntries();
   const {
     modalTitle,
     modalInstruction,
@@ -154,7 +153,7 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
             kind: 'success',
             subtitle: submitSuccessText,
           });
-          mutateQueueEntries();
+          emitRefetchQueuesEvent();
           closeModal();
         } else {
           throw { message: t('unexpectedServerResponse', 'Unexpected Server Response') };