@openmrs/esm-form-engine-lib 3.0.0 → 3.0.1-pre.1652

package/src/components/group/obs-group.component.tsx

@@ -9,13 +9,13 @@ import { useTranslation } from 'react-i18next';
 
 export const ObsGroup: React.FC<FormFieldInputProps> = ({ field, ...restProps }) => {
   const { t } = useTranslation();
-  const { formFieldAdapters } = useFormProviderContext();
-  const showLabel = useMemo(() => field.questions?.length > 1, [field]);
+  const { formFieldAdapters, formFields } = useFormProviderContext();
 
   const content = useMemo(
     () =>
       field.questions
-        ?.filter((child) => !child.isHidden)
+        .map((child) => formFields.find((field) => field.id === child.id))
+        .filter((child) => !child.isHidden)
         .map((child, index) => {
           const key = `${child.id}_${index}`;
 
@@ -35,12 +35,12 @@ export const ObsGroup: React.FC<FormFieldInputProps> = ({ field, ...restProps })
             );
           }
         }),
-    [field],
+    [field, formFields],
   );
 
   return (
     <div className={styles.groupContainer}>
-      {showLabel ? (
+      {content.length > 1 ? (
         <FormGroup legendText={t(field.label)} className={styles.boldLegend}>
           {content}
         </FormGroup>

package/src/components/inputs/content-switcher/content-switcher.component.tsx

@@ -60,7 +60,12 @@ const ContentSwitcher: React.FC<FormFieldInputProps> = ({ field, value, errors,
           className={styles.selectedOption}
           size="md">
           {field.questionOptions.answers.map((option, index) => (
-            <Switch name={option.concept || option.value} text={option.label} key={index} disabled={field.isDisabled} />
+            <Switch
+              name={option.concept || option.value}
+              text={t(option.label)}
+              key={index}
+              disabled={field.isDisabled}
+            />
           ))}
         </CdsContentSwitcher>
       </FormGroup>

package/src/components/inputs/date/date.component.tsx

@@ -113,7 +113,7 @@ const DateField: React.FC<FormFieldInputProps> = ({ field, value: dateValue, err
                 id={field.id}
                 labelText={timePickerLabel}
                 placeholder="HH:MM"
-                pattern="(1[012]|[1-9]):[0-5][0-9])$"
+                pattern="(1[012]|[1-9]):[0-5][0-9]$"
                 type="time"
                 disabled={field.datePickerFormat === 'timer' ? field.isDisabled : !dateValue ? true : false}
                 invalid={errors.length > 0}

package/src/components/inputs/multi-select/multi-select.component.tsx

@@ -22,7 +22,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
     .map((answer, index) => ({
       id: `${field.id}-${answer.concept}`,
       concept: answer.concept,
-      label: answer.label,
+      label: t(answer.label),
       key: index,
       disabled: answer.disable?.isDisabled,
       readonly: isTrue(field.readonly),
@@ -97,14 +97,14 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
           <Layer>
             {isSearchable ? (
               <FilterableMultiSelect
+                id={field.id}
+                key={field.id}
                 placeholder={t('search', 'Search') + '...'}
                 onChange={handleSelectItemsChange}
-                id={t(field.label)}
                 items={selectOptions}
                 initialSelectedItems={initiallySelectedQuestionItems}
                 label={''}
                 titleText={label}
-                key={field.id}
                 itemToString={(item) => (item ? item.label : ' ')}
                 disabled={field.isDisabled}
                 invalid={errors.length > 0}
@@ -120,7 +120,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                     <Checkbox
                       key={`${field.id}-${value.concept}`}
                       className={styles.checkbox}
-                      labelText={value.label}
+                      labelText={t(value.label)}
                       id={`${field.id}-${value.concept}`}
                       onChange={() => {
                         handleSelectCheckbox(value);

package/src/components/inputs/number/number.component.tsx

@@ -70,14 +70,14 @@ const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
           onBlur={onBlur}
           allowEmpty={true}
           size="lg"
-          hideSteppers={true}
+          hideSteppers={field.hideSteppers ?? false}
           onWheel={(e) => e.target.blur()}
           disabled={field.isDisabled}
           readOnly={isTrue(field.readonly)}
           className={classNames(styles.controlWidthConstrained, styles.boldedLabel)}
           warn={warnings.length > 0}
           warnText={warnings[0]?.message}
-          step={0.01}
+          step={field.questionOptions.step ?? 0.01}
         />
       </Layer>
     )

package/src/components/inputs/radio/radio.component.tsx

@@ -50,7 +50,7 @@ const Radio: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings,
               return (
                 <RadioButton
                   id={`${field.id}-${answer.label}`}
-                  labelText={answer.label ?? ''}
+                  labelText={t(answer.label) ?? ''}
                   value={answer.concept}
                   key={index}
                   onClick={(e) => {

package/src/components/inputs/select/dropdown.component.tsx

@@ -27,9 +27,9 @@ const Dropdown: React.FC<FormFieldInputProps> = ({ field, value, errors, warning
       let answer = field.questionOptions.answers.find((opt) => {
         return opt.value ? opt.value == item : opt.concept == item;
       });
-      return answer?.label;
+      return answer ? t(answer.label) : '';
     },
-    [field.questionOptions.answers],
+    [field.questionOptions.answers, t],
   );
 
   const items = useMemo(() => {

package/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx

@@ -1,21 +1,21 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { debounce } from 'lodash-es';
 import { ComboBox, DropdownSkeleton, Layer, InlineLoading } from '@carbon/react';
-import { isTrue } from '../../../utils/boolean-utils';
 import { useTranslation } from 'react-i18next';
-import { getRegisteredDataSource } from '../../../registry/registry';
+import { useWatch } from 'react-hook-form';
+import { type OpenmrsResource } from '@openmrs/esm-framework';
 import { getControlTemplate } from '../../../registry/inbuilt-components/control-templates';
-import { type DataSource, type FormFieldInputProps } from '../../../types';
+import { getRegisteredDataSource } from '../../../registry/registry';
 import { isEmpty } from '../../../validators/form-validator';
+import { isTrue } from '../../../utils/boolean-utils';
+import { isViewMode } from '../../../utils/common-utils';
 import { shouldUseInlineLayout } from '../../../utils/form-helper';
-import FieldValueView from '../../value/view/field-value-view.component';
-import styles from './ui-select-extended.scss';
+import { type DataSource, type FormFieldInputProps } from '../../../types';
 import { useFormProviderContext } from '../../../provider/form-provider';
-import FieldLabel from '../../field-label/field-label.component';
-import { useWatch } from 'react-hook-form';
 import useDataSourceDependentValue from '../../../hooks/useDataSourceDependentValue';
-import { isViewMode } from '../../../utils/common-utils';
-import { type OpenmrsResource } from '@openmrs/esm-framework';
+import FieldLabel from '../../field-label/field-label.component';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './ui-select-extended.scss';
 
 const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();
@@ -49,6 +49,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
 
   const debouncedSearch = debounce((searchTerm: string, dataSource: DataSource<OpenmrsResource>) => {
     setIsSearching(true);
+
     dataSource
       .fetchData(searchTerm, config)
       .then((dataItems) => {
@@ -86,22 +87,33 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
   }, [field.questionOptions?.datasource]);
 
   useEffect(() => {
+    let ignore = false;
+
     // If not searchable, preload the items
     if (dataSource && !isTrue(field.questionOptions.isSearchable)) {
       setItems([]);
       setIsLoading(true);
+
       dataSource
         .fetchData(null, { ...config, referencedValue: dataSourceDependentValue })
         .then((dataItems) => {
-          setItems(dataItems.map(dataSource.toUuidAndDisplay));
-          setIsLoading(false);
+          if (!ignore) {
+            setItems(dataItems.map(dataSource.toUuidAndDisplay));
+            setIsLoading(false);
+          }
         })
         .catch((err) => {
-          console.error(err);
-          setIsLoading(false);
-          setItems([]);
+          if (!ignore) {
+            console.error(err);
+            setIsLoading(false);
+            setItems([]);
+          }
         });
     }
+
+    return () => {
+      ignore = true;
+    };
   }, [dataSource, config, dataSourceDependentValue]);
 
   useEffect(() => {
@@ -111,19 +123,28 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
   }, [dataSource, searchTerm, config]);
 
   useEffect(() => {
+    let ignore = false;
     if (value && !isDirty && dataSource && isSearchable && sessionMode !== 'enter' && !items.length) {
       // While in edit mode, search-based instances should fetch the initial item (previously selected value) to resolve its display property
       setIsLoading(true);
       try {
         dataSource.fetchSingleItem(value).then((item) => {
-          setItems([dataSource.toUuidAndDisplay(item)]);
-          setIsLoading(false);
+          if (!ignore) {
+            setItems([dataSource.toUuidAndDisplay(item)]);
+            setIsLoading(false);
+          }
         });
       } catch (error) {
-        console.error(error);
-        setIsLoading(false);
+        if (!ignore) {
+          console.error(error);
+          setIsLoading(false);
+        }
       }
     }
+
+    return () => {
+      ignore = true;
+    };
   }, [value, isDirty, sessionMode, dataSource, isSearchable, items]);
 
   if (isLoading) {

package/src/components/inputs/ui-select-extended/ui-select-extended.test.tsx

@@ -14,7 +14,6 @@ const mockUsePatient = jest.mocked(usePatient);
 const mockUseSession = jest.mocked(useSession);
 global.ResizeObserver = require('resize-observer-polyfill');
 
-jest.mock('../../../hooks/useRestMaxResultsCount', () => jest.fn().mockReturnValue({ systemSetting: { value: '50' } }));
 jest.mock('lodash-es/debounce', () => jest.fn((fn) => fn));
 
 jest.mock('lodash-es', () => ({

package/src/components/inputs/workspace-launcher/workspace-launcher.component.tsx

@@ -28,7 +28,9 @@ const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
       <div>
         <div className={styles.label}>{t(field.label)}</div>
         <div className={styles.workspaceButton}>
-          <Button disabled={isTrue(field.readonly)}  onClick={handleLaunchWorkspace}>{field.questionOptions?.buttonLabel ?? t('launchWorkspace')}</Button>
+          <Button disabled={isTrue(field.readonly)} onClick={handleLaunchWorkspace}>
+            {t(field.questionOptions?.buttonLabel) ?? t('launchWorkspace', 'Launch Workspace')}
+          </Button>
         </div>
       </div>
     )

package/src/components/sidebar/sidebar.component.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@carbon/react';
-import { type FormPage, type SessionMode } from '../../types';
-import styles from './sidebar.scss';
-import { usePageObserver } from './usePageObserver';
-import { useCurrentActivePage } from './useCurrentActivePage';
+import { Button, InlineLoading } from '@carbon/react';
 import { isPageContentVisible } from '../../utils/form-helper';
-import { InlineLoading } from '@carbon/react';
+import { useCurrentActivePage } from './useCurrentActivePage';
+import { usePageObserver } from './usePageObserver';
+import type { FormPage, SessionMode } from '../../types';
+import styles from './sidebar.scss';
 
 interface SidebarProps {
   defaultPage: string;

package/src/components/sidebar/sidebar.scss

@@ -1,4 +1,5 @@
 @use '@carbon/colors';
+@use '@carbon/layout';
 @use '@carbon/type';
 
 .pageLink {
@@ -95,6 +96,10 @@
 .saveButton {
   @extend .button;
   margin-bottom: 0.625rem;
+
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
 }
 
 .closeButton {

package/src/components/value/value.component.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import styles from './value.scss';
+import { useTranslation } from 'react-i18next';
 
 export const ValueEmpty = () => {
+  const { t } = useTranslation();
+
   return (
     <div>
-      <span className={styles.empty}>(Blank)</span>
+      <span className={styles.empty}>({t('blank', 'Blank')})</span>
     </div>
   );
 };

package/src/form-engine.component.tsx

@@ -1,24 +1,24 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { FormField, FormSchema, SessionMode } from './types';
-import { useSession, type Visit } from '@openmrs/esm-framework';
-import { isEmpty, useFormJson } from '.';
-import FormProcessorFactory from './components/processor-factory/form-processor-factory.component';
-import Loader from './components/loaders/loader.component';
-import { usePatientData } from './hooks/usePatientData';
-import { FormFactoryProvider } from './provider/form-factory-provider';
 import classNames from 'classnames';
-import styles from './form-engine.scss';
 import { Button, ButtonSet, InlineLoading } from '@carbon/react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
-import PatientBanner from './components/patient-banner/patient-banner.component';
-import MarkdownWrapper from './components/inputs/markdown/markdown-wrapper.component';
+import { useSession, type Visit } from '@openmrs/esm-framework';
+import { FormFactoryProvider } from './provider/form-factory-provider';
 import { init, teardown } from './lifecycle';
-import { reportError } from './utils/error-utils';
+import { isEmpty, useFormJson } from '.';
 import { moduleName } from './globals';
+import { reportError } from './utils/error-utils';
 import { useFormCollapse } from './hooks/useFormCollapse';
-import Sidebar from './components/sidebar/sidebar.component';
 import { useFormWorkspaceSize } from './hooks/useFormWorkspaceSize';
 import { usePageObserver } from './components/sidebar/usePageObserver';
+import { usePatientData } from './hooks/usePatientData';
+import type { FormField, FormSchema, SessionMode } from './types';
+import FormProcessorFactory from './components/processor-factory/form-processor-factory.component';
+import Loader from './components/loaders/loader.component';
+import MarkdownWrapper from './components/inputs/markdown/markdown-wrapper.component';
+import PatientBanner from './components/patient-banner/patient-banner.component';
+import Sidebar from './components/sidebar/sidebar.component';
+import styles from './form-engine.scss';
 
 interface FormEngineProps {
   patientUUID: string;
@@ -176,7 +176,11 @@ const FormEngine = ({
                       }}>
                       {mode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')}
                     </Button>
-                    <Button type="submit" disabled={isLoadingDependencies || mode === 'view'}>
+                    <Button
+                      className={styles.saveButton}
+                      disabled={isLoadingDependencies || isSubmitting || mode === 'view'}
+                      kind="primary"
+                      type="submit">
                       {isSubmitting ? (
                         <InlineLoading description={t('submitting', 'Submitting') + '...'} />
                       ) : (

package/src/form-engine.scss

@@ -1,3 +1,5 @@
+@use '@carbon/layout';
+
 // replaces .formEngine
 .form {
   height: 100%;
@@ -138,3 +140,9 @@
     width: 10%;
   }
 }
+
+.saveButton {
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+}

package/src/form-engine.test.tsx

@@ -92,7 +92,6 @@ jest.mock('../src/api', () => {
   };
 });
 
-jest.mock('./hooks/useRestMaxResultsCount', () => jest.fn().mockReturnValue({ systemSetting: { value: '50' } }));
 jest.mock('./hooks/useEncounterRole', () => ({
   useEncounterRole: jest.fn().mockReturnValue({
     isLoading: false,
@@ -877,6 +876,50 @@ describe('Form engine component', () => {
   });
 
   describe('Obs group', () => {
+    it('should not render empty obs group', async () => {
+      await act(async () => {
+        renderForm(null, obsGroupTestForm);
+      });
+
+      // Check that only one obs group is initially rendered
+      const initialGroups = screen.getAllByRole('group', { name: /My Group|Dependents Group/i });
+      expect(initialGroups.length).toBe(1);
+      const dependentTypeRadios = screen.queryAllByRole('radio', { name: /child|spouse/i });
+      expect(dependentTypeRadios.length).toBe(0);
+
+      // Select "Yes" for having dependents
+      const yesRadio = screen.getByRole('radio', { name: /yes/i });
+      await user.click(yesRadio);
+
+      // Now the dependent type radios should be visible
+      const visibleDependentTypeRadios = screen.getAllByRole('radio', { name: /child|spouse/i });
+      expect(visibleDependentTypeRadios.length).toBe(2);
+
+      // Check that the group label is still hidden since it only has one visible field
+      const dependentsGroupResults = screen.queryAllByRole('group', { name: /Dependents Group/i });
+      expect(dependentsGroupResults.length).toBe(0);
+
+      // Check that dependent name and age are still hidden
+      const hiddenDependentNameInput = screen.queryByRole('textbox', { name: /dependent name/i });
+      const hiddenDependentAgeInput = screen.queryByRole('spinbutton', { name: /dependent age/i });
+      expect(hiddenDependentNameInput).toBeNull();
+      expect(hiddenDependentAgeInput).toBeNull();
+
+      // Select "Child" as dependent type
+      await user.click(visibleDependentTypeRadios[0]);
+
+      // Check the visibility of the group label
+      const dependentsGroup = screen.getAllByRole('group', { name: /Dependents Group/i })[0];
+      expect(dependentsGroup).toBeInTheDocument();
+
+      // Check that dependent name and age are now visible
+      const dependentNameInput = screen.getByRole('textbox', { name: /dependent name/i });
+      const dependentAgeInput = screen.getByRole('spinbutton', { name: /dependent age/i });
+
+      expect(dependentNameInput).toBeInTheDocument();
+      expect(dependentAgeInput).toBeInTheDocument();
+    });
+
     it('should save obs group on form submission', async () => {
       const saveEncounterMock = jest.spyOn(api, 'saveEncounter');
       await act(async () => {

package/src/hooks/{useConcepts.tsx → useConcepts.ts}

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { type FetchResponse, type OpenmrsResource, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWRInfinite from 'swr/infinite';
+import { type FetchResponse, type OpenmrsResource, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 
 type ConceptFetchResponse = FetchResponse<{ results: Array<OpenmrsResource> }>;
 
@@ -12,7 +12,6 @@ export function useConcepts(references: Set<string>): {
   isLoading: boolean;
   error: Error | undefined;
 } {
-
   const chunkSize = 100;
   const totalCount = references.size;
   const totalPages = Math.ceil(totalCount / chunkSize);

package/src/hooks/useDataSourceDependentValue.ts

@@ -1,6 +1,6 @@
+import { useWatch } from 'react-hook-form';
 import { type FormField } from '../types';
 import { useFormProviderContext } from '../provider/form-provider';
-import { useWatch } from 'react-hook-form';
 
 const useDataSourceDependentValue = (field: FormField) => {
   const dependentField = field.questionOptions['config']?.referencedField;

package/src/hooks/{useEncounter.tsx → useEncounter.ts}

@@ -11,8 +11,12 @@ export function useEncounter(formJson: FormSchema) {
   const [error, setError] = useState(null);
 
   useEffect(() => {
+    const abortController = new AbortController();
+
     if (!isEmpty(formJson.encounter) && isString(formJson.encounter)) {
-      openmrsFetch(`${restBaseUrl}/encounter/${formJson.encounter}?v=${encounterRepresentation}`)
+      openmrsFetch(`${restBaseUrl}/encounter/${formJson.encounter}?v=${encounterRepresentation}`, {
+        signal: abortController.signal,
+      })
         .then((response) => {
           setEncounter(response.data);
           setIsLoading(false);
@@ -26,6 +30,10 @@ export function useEncounter(formJson: FormSchema) {
     } else {
       setIsLoading(false);
     }
+
+    return () => {
+      abortController.abort();
+    };
   }, [formJson.encounter]);
 
   return { encounter: encounter, error, isLoading };

package/src/hooks/{useFormJson.tsx → useFormJson.ts}

@@ -9,7 +9,10 @@ import { moduleName } from '../globals';
 export function useFormJson(formUuid: string, rawFormJson: any, encounterUuid: string, formSessionIntent: string) {
   const [formJson, setFormJson] = useState<FormSchema>(null);
   const [error, setError] = useState(validateFormsArgs(formUuid, rawFormJson));
+
   useEffect(() => {
+    const abortController = new AbortController();
+
     const setFormJsonWithTranslations = (formJson: FormSchema) => {
       if (formJson?.translations) {
         const language = window.i18next.language;
@@ -17,14 +20,21 @@ export function useFormJson(formUuid: string, rawFormJson: any, encounterUuid: s
       }
       setFormJson(formJson);
     };
+
     loadFormJson(formUuid, rawFormJson, formSessionIntent)
       .then((formJson) => {
         setFormJsonWithTranslations({ ...formJson, encounter: encounterUuid });
       })
       .catch((error) => {
-        console.error(error);
-        setError(new Error('Error loading form JSON: ' + error.message));
+        if (error.name !== 'AbortError') {
+          console.error(error);
+          setError(new Error('Error loading form JSON: ' + error.message));
+        }
       });
+
+    return () => {
+      abortController.abort();
+    };
   }, [formSessionIntent, formUuid, rawFormJson, encounterUuid]);
 
   return {

package/src/hooks/{usePatientData.tsx → usePatientData.ts}

@@ -24,7 +24,7 @@ const patientGenderMap = {
 export const usePatientData = (patientUuid) => {
   const { patient, isLoading: isLoadingPatient, error: patientError } = usePatient(patientUuid);
   if (patient && !isLoadingPatient) {
-    // This is to support backward compatibility with the AMPATH JSON format
+    // This is for backward compatibility with the Angular form engine
     patient['age'] = calculateAge(new Date(patient?.birthDate));
     patient['sex'] = patientGenderMap[patient.gender] ?? 'U';
   }

package/src/hooks/usePatientPrograms.ts

@@ -1,32 +1,38 @@
+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, ProgramsFetchResponse } 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: ProgramsFetchResponse }, Error>(
+    patientUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  const sortedEnrollments =
+    data?.data?.results.length > 0
+      ? data?.data.results.sort((a, b) => (b.dateEnrolled > a.dateEnrolled ? 1 : -1))
+      : null;
 
-  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 = sortedEnrollments?.filter((enrollment) => !enrollment.dateCompleted);
 
   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,
+  };
+};

package/src/hooks/useProcessorDependencies.ts

@@ -13,17 +13,27 @@ const useProcessorDependencies = (
   const { loadDependencies } = formProcessor;
 
   useEffect(() => {
+    let ignore = false;
+
     if (loadDependencies) {
       setIsLoading(true);
       loadDependencies(context, setContext)
-        .then((results) => {
-          setIsLoading(false);
+        .then(() => {
+          if (!ignore) {
+            setIsLoading(false);
+          }
         })
         .catch((error) => {
-          setError(error);
-          reportError(error, 'Encountered error while loading dependencies');
+          if (!ignore) {
+            setError(error);
+            reportError(error, 'Encountered error while loading dependencies');
+          }
         });
     }
+
+    return () => {
+      ignore = true;
+    };
   }, [loadDependencies]);
 
   return { isLoading, error };