(refactor) Refactor usePatientPrograms hook to use SWR

Refactors the usePatientProgram hook to leverage a SWR hook for fetching patient programs. With this, we get:

- Automatic caching and revalidation
- Conditional fetching based on the patientUuid and the `formJson.meta.programs.hasProgramFields` property of the form
- Built-in error and loading states
- Better handling of race conditions

src/hooks/usePatientPrograms.ts

@@ -1,32 +1,33 @@
+import useSWR from 'swr';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import { useEffect, useState } from 'react';
-import { type FormSchema, type PatientProgram } from '../types';
-const customRepresentation = `custom:(uuid,display,program:(uuid,name,allWorkflows),dateEnrolled,dateCompleted,location:(uuid,display),states:(startDate,endDate,state:(uuid,name,retired,concept:(uuid),programWorkflow:(uuid)))`;
+import type { FormSchema, PatientProgram } from '../types';
 
-export const usePatientPrograms = (patientUuid: string, formJson: FormSchema) => {
-  const [patientPrograms, setPatientPrograms] = useState<Array<PatientProgram>>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
+const useActiveProgramEnrollments = (patientUuid: string) => {
+  const customRepresentation = `custom:(uuid,display,program:(uuid,name,allWorkflows),dateEnrolled,dateCompleted,location:(uuid,display),states:(startDate,endDate,state:(uuid,name,retired,concept:(uuid),programWorkflow:(uuid)))`;
+  const apiUrl = `${restBaseUrl}/programenrollment?patient=${patientUuid}&v=${customRepresentation}`;
+
+  const { data, error, isLoading } = useSWR<{ data: Array<PatientProgram> }, Error>(
+    patientUuid ? apiUrl : null,
+    openmrsFetch,
+  );
 
-  useEffect(() => {
-    if (formJson.meta?.programs?.hasProgramFields) {
-      openmrsFetch(`${restBaseUrl}/programenrollment?patient=${patientUuid}&v=${customRepresentation}`)
-        .then((response) => {
-          setPatientPrograms(response.data.results.filter((enrollment) => enrollment.dateCompleted === null));
-          setIsLoading(false);
-        })
-        .catch((error) => {
-          setError(error);
-          setIsLoading(false);
-        });
-    } else {
-      setIsLoading(false);
-    }
-  }, [formJson]);
+  const activePrograms = data?.data?.filter((enrollment) => enrollment.dateCompleted === null);
 
   return {
-    patientPrograms,
+    activePrograms,
     error,
     isLoading,
   };
 };
+
+export const usePatientPrograms = (patientUuid: string, formJson: FormSchema) => {
+  const { activePrograms, error, isLoading } = useActiveProgramEnrollments(
+    formJson.meta?.programs?.hasProgramFields ? patientUuid : null,
+  );
+
+  return {
+    patientPrograms: activePrograms,
+    errorFetchingPatientPrograms: error,
+    isLoadingPatientPrograms: isLoading,
+  };
+};

src/processors/encounter/encounter-form-processor.ts

@@ -1,17 +1,5 @@
-import {
-  type FormField,
-  type FormPage,
-  type FormProcessorContextProps,
-  type FormSchema,
-  type FormSection,
-  type ValueAndDisplay,
-} from '../../types';
-import { usePatientPrograms } from '../../hooks/usePatientPrograms';
 import { useEffect, useState } from 'react';
-import { useEncounter } from '../../hooks/useEncounter';
-import { isEmpty } from '../../validators/form-validator';
-import { type FormContextProps } from '../../provider/form-provider';
-import { FormProcessor } from '../form-processor';
+import { type OpenmrsResource, showSnackbar, translateFrom } from '@openmrs/esm-framework';
 import {
   getMutableSessionProps,
   hydrateRepeatField,
@@ -23,23 +11,32 @@ import {
   savePatientIdentifiers,
   savePatientPrograms,
 } from './encounter-processor-helper';
-import { type OpenmrsResource, showSnackbar, translateFrom } from '@openmrs/esm-framework';
-import { moduleName } from '../../globals';
+import {
+  type FormField,
+  type FormPage,
+  type FormProcessorContextProps,
+  type FormSchema,
+  type FormSection,
+  type ValueAndDisplay,
+} from '../../types';
+import { evaluateAsyncExpression, type FormNode } from '../../utils/expression-runner';
 import { extractErrorMessagesFromResponse } from '../../utils/error-utils';
+import { extractObsValueAndDisplay } from '../../utils/form-helper';
+import { FormProcessor } from '../form-processor';
 import { getPreviousEncounter, saveEncounter } from '../../api';
-import { useEncounterRole } from '../../hooks/useEncounterRole';
-import { evaluateAsyncExpression, type FormNode } from '../../utils/expression-runner';
 import { hasRendering } from '../../utils/common-utils';
-import { extractObsValueAndDisplay } from '../../utils/form-helper';
+import { isEmpty } from '../../validators/form-validator';
+import { moduleName } from '../../globals';
+import { type FormContextProps } from '../../provider/form-provider';
+import { useEncounter } from '../../hooks/useEncounter';
+import { useEncounterRole } from '../../hooks/useEncounterRole';
+import { usePatientPrograms } from '../../hooks/usePatientPrograms';
 
 function useCustomHooks(context: Partial<FormProcessorContextProps>) {
   const [isLoading, setIsLoading] = useState(true);
   const { encounter, isLoading: isLoadingEncounter } = useEncounter(context.formJson);
   const { encounterRole, isLoading: isLoadingEncounterRole } = useEncounterRole();
-  const { isLoading: isLoadingPatientPrograms, patientPrograms } = usePatientPrograms(
-    context.patient?.id,
-    context.formJson,
-  );
+  const { isLoadingPatientPrograms, patientPrograms } = usePatientPrograms(context.patient?.id, context.formJson);
 
   useEffect(() => {
     setIsLoading(isLoadingPatientPrograms || isLoadingEncounter || isLoadingEncounterRole);