O3-2812: Appointments: Refactoring and Code Cleanup

packages/esm-appointments-app/src/appointments-calendar/patient-list/calendar-patient-list.component.tsx

@@ -21,7 +21,7 @@ import { ExtensionSlot, formatDate, formatDatetime } from '@openmrs/esm-framewor
 import { downloadAppointmentsAsExcel } from '../../helpers/excel';
 import { Download } from '@carbon/react/icons';
 import styles from './calenar-patient-list.scss';
-import { useAppointments } from '../../appointments/appointments-table.resource';
+import { useAppointments } from '../../hooks/useAppointments';
 
 interface CalendarPatientListProps {}
 

packages/esm-appointments-app/src/appointments.component.tsx

@@ -5,7 +5,7 @@ import AppointmentsHeader from './appointments-header/appointments-header.compon
 import AppointmentMetrics from './appointments-metrics/appointments-metrics.component';
 import Overlay from './overlay.component';
 
-const ClinicalAppointments: React.FC = () => {
+const Appointments: React.FC = () => {
   const { t } = useTranslation();
   const [appointmentServiceType, setAppointmentServiceType] = useState<string>('');
 
@@ -19,4 +19,4 @@ const ClinicalAppointments: React.FC = () => {
   );
 };
 
-export default ClinicalAppointments;
+export default Appointments;

packages/esm-appointments-app/src/appointments/forms/forms.resource.ts

@@ -22,15 +22,6 @@ export function useServices() {
     isValidating,
   };
 }
-
-export function getAppointmentService(uuid: string) {
-  const abortController = new AbortController();
-
-  return openmrsFetch(`/ws/rest/v1/appointmentService?uuid=` + uuid, {
-    signal: abortController.signal,
-  });
-}
-
 export function useProviders() {
   const { data, error, isLoading } = useSWR<{ data: { results: Array<Provider> } }, Error>(
     `/ws/rest/v1/provider`,
@@ -86,6 +77,9 @@ export const useAppointmentSummary = (fromDate: Date, serviceUuid: string): Arra
     }))
     .sort((dateA, dateB) => new Date(dateA.date).getTime() - new Date(dateB.date).getTime());
 };
+
+
+// NOTE: I don't think this is used anywhere?
 export const checkAppointmentConflict = async (appointmentPayload: AppointmentPayload) => {
   return await openmrsFetch('/ws/rest/v1/appointments/conflicts', {
     method: 'POST',

packages/esm-appointments-app/src/home-appointments/appointments-list.component.tsx

@@ -32,7 +32,7 @@ import { EmptyDataIllustration } from './empty-data-illustration.component';
 import { launchCheckInAppointmentModal, handleComplete } from './common';
 import { SeeAllAppointmentsLink, AddAppointmentLink, ViewCalendarLink } from './links.component';
 import { type Appointment, type MappedHomeAppointment } from '../types';
-import { useTodaysAppointments } from './appointments-table.resource';
+import { useTodaysAppointments } from './home-appointments.resource';
 import styles from './appointments-list.scss';
 import { type ConfigObject } from '../config-schema';
 

packages/esm-appointments-app/src/home-appointments/appointments-list.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { mockSession } from '__mocks__';
 import { usePagination } from '@openmrs/esm-framework';
-import { useTodaysAppointments } from './appointments-table.resource';
+import { useTodaysAppointments } from './home-appointments.resource';
 import AppointmentsBaseTable from './appointments-list.component';
 
 const useTodaysAppointmentsMock = useTodaysAppointments as jest.Mock;

packages/esm-appointments-app/src/home-appointments/check-in-modal/check-in-modal.component.tsx

@@ -4,7 +4,7 @@ import { Button, Layer, ModalBody, ModalFooter, ModalHeader, TimePicker } from '
 import { useSWRConfig } from 'swr';
 import { useTranslation } from 'react-i18next';
 import { showNotification, showActionableNotification } from '@openmrs/esm-framework';
-import { updateAppointmentStatus } from '../appointments-table.resource';
+import { updateAppointmentStatus } from '../home-appointments.resource';
 import { handleUndoAction } from '../common';
 import styles from './check-in-modal.scss';
 

packages/esm-appointments-app/src/home-appointments/check-in-modal/check-in-modal.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { updateAppointmentStatus } from '../appointments-table.resource';
+import { updateAppointmentStatus } from '../home-appointments.resource';
 import { showActionableNotification, showNotification } from '@openmrs/esm-framework';
 import CheckInAppointmentModal from './check-in-modal.component';
 

packages/esm-appointments-app/src/home-appointments/common.ts

@@ -1,5 +1,5 @@
 import { showModal, showNotification, showActionableNotification } from '@openmrs/esm-framework';
-import { updateAppointmentStatus, undoAppointmentStatus } from './appointments-table.resource';
+import { updateAppointmentStatus, undoAppointmentStatus } from './home-appointments.resource';
 
 export const launchCheckInAppointmentModal = (appointmentUuid: string) => {
   const dispose = showModal('check-in-appointment-modal', {

packages/esm-appointments-app/src/hooks/useAppointments.ts

@@ -3,13 +3,38 @@ import dayjs from 'dayjs';
 import useSWR from 'swr';
 import { omrsDateFormat } from '../constants';
 import { type Appointment, DurationPeriod } from '../types';
+import { getAppointment, useAppointmentDate } from '../helpers';
+import isEmpty from 'lodash-es/isEmpty';
+import { useMemo } from 'react';
 
 interface AppointmentsReturnType {
   isLoading: boolean;
   appointments: Array<Appointment>;
   error: Error;
 }
 
+export function useAppointments(status?: string, forDate?: string) {
+  const { currentAppointmentDate } = useAppointmentDate();
+  const startDate = forDate ? forDate : currentAppointmentDate;
+  const apiUrl = `/ws/rest/v1/appointment/appointmentStatus?forDate=${startDate}&status=${status}`;
+  const allAppointmentsUrl = `/ws/rest/v1/appointment/all?forDate=${startDate}`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: Array<Appointment> }, Error>(
+    isEmpty(status) ? allAppointmentsUrl : apiUrl,
+    openmrsFetch,
+  );
+
+  const appointments = useMemo(() => data?.data?.map((appointment) => getAppointment(appointment)) ?? [], [data?.data]);
+
+  return {
+    appointments,
+    isLoading,
+    isError: error,
+    isValidating,
+    mutate,
+  };
+}
+
 export const useDailyAppointments = (startDateTime: string, durationPeriod: DurationPeriod) => {
   const url = `/ws/rest/v1/appointment/all?forDate=${startDateTime}`;
   const { data, error, isLoading } = useSWR<{ data: Array<Appointment> }>(startDateTime ? url : null, openmrsFetch);

packages/esm-appointments-app/src/patient-queue/visit-form/visit-form.component.tsx

@@ -38,7 +38,7 @@ import { type amPm, convertTime12to24, useAppointmentDate } from '../../helpers'
 import { closeOverlay } from '../../hooks/useOverlay';
 import { saveQueueEntry } from './queue.resource';
 import { type MappedAppointment } from '../../types';
-import { useAppointments } from '../../appointments/appointments-table.resource';
+import { useAppointments } from '../../hooks/useAppointments';
 import { useDefaultLoginLocation } from '../../hooks/useDefaultLocation';
 import { useVisits } from '../../hooks/useVisits';
 import styles from './visit-form.scss';

packages/esm-appointments-app/src/root.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { SWRConfig } from 'swr';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import AppointmentsCalendarView from './appointments-calendar/appointments-calendar-view.component';
-import ClinicalAppointments from './appointments.component';
+import Appointments from './appointments.component';
 import CalendarPatientList from './appointments-calendar/patient-list/calendar-patient-list.component';
 
 const swrConfiguration = {
@@ -17,7 +17,7 @@ const RootComponent: React.FC = () => {
       <SWRConfig value={swrConfiguration}>
         <BrowserRouter basename={appointmentsBasename}>
           <Routes>
-            <Route path="/" element={<ClinicalAppointments />} />
+            <Route path="/" element={<Appointments />} />
             <Route path="/calendar" element={<AppointmentsCalendarView />} />
             <Route path="/list/:dateTime/:serviceName" element={<CalendarPatientList />} />
           </Routes>