Make a common patient context hook

packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx

@@ -10,6 +10,7 @@ import AddressHierarchyLevels from './address-hierarchy-levels.component';
 import AddressSearchComponent from './address-search.component';
 import styles from '../field.scss';
 import type { FormValues } from '../../patient-registration.types';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 function parseString(xmlDockAsString: string) {
   const parser = new DOMParser();
@@ -48,7 +49,7 @@ export const AddressComponent: React.FC = () => {
     },
   } = config;
 
-  const { setValue } = useContext(PatientRegistrationContext);
+  const { setValue } = usePatientRegistrationContext();
   const { orderedFields, isLoadingFieldOrder, errorFetchingFieldOrder } = useOrderedAddressHierarchyLevels();
 
   useEffect(() => {

packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy-levels.component.tsx

@@ -4,6 +4,7 @@ import { useAddressEntries, useAddressEntryFetchConfig } from './address-hierarc
 import ComboInput from '../../input/combo-input/combo-input.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import type { FormValues } from '../../patient-registration.types';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 interface AddressComboBoxProps {
   attribute: {
@@ -22,7 +23,7 @@ interface AddressHierarchyLevelsProps {
 const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
   const { t } = useTranslation();
   const fieldName = `address.${attribute.name}` as keyof FormValues;
-  const { setValue, watch } = useContext(PatientRegistrationContext);
+  const { setValue, watch } = usePatientRegistrationContext();
   const fieldValue = watch(fieldName);
   const { fetchEntriesForField, searchString, updateChildElements } = useAddressEntryFetchConfig(attribute.name);
   const { entries } = useAddressEntries(fetchEntriesForField, searchString);

packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy.resource.tsx

@@ -57,7 +57,7 @@ export function useAddressEntries(fetchResults, searchString) {
  */
 export function useAddressEntryFetchConfig(addressField: string) {
   const { orderedFields, isLoadingFieldOrder } = useOrderedAddressHierarchyLevels();
-  const { setValue } = useContext(PatientRegistrationContext);
+  const { setValue } = usePatientRegistrationContext();
   const { watch } = usePatientRegistrationContext();
   const addressValues = watch('address');
 

packages/esm-patient-registration-app/src/patient-registration/field/address/address-search.component.tsx

@@ -4,7 +4,7 @@ import { Search } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useFormikContext } from 'formik';
 import styles from './address-search.scss';
-import { PatientRegistrationContext } from '../../patient-registration-context';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 interface AddressSearchComponentProps {
   addressLayout: Array<any>;
@@ -13,7 +13,7 @@ interface AddressSearchComponentProps {
 const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ addressLayout }) => {
   const { t } = useTranslation();
   const separator = ' > ';
-  const { control, setValue } = useContext(PatientRegistrationContext);
+  const { control, setValue } = usePatientRegistrationContext();
   const searchBox = useRef(null);
   const wrapper = useRef(null);
   const [searchString, setSearchString] = useState<string>('');

packages/esm-patient-registration-app/src/patient-registration/field/cause-of-death/cause-of-death.component.tsx

@@ -8,11 +8,12 @@ import { useConceptAnswers } from '../field.resource';
 import styles from '../field.scss';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { Controller } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export const CauseOfDeathField: React.FC = () => {
   const { t } = useTranslation();
   const { fieldConfigurations, freeTextFieldConceptUuid } = useConfig<RegistrationConfig>();
-  const { getFieldState, control } = useContext(PatientRegistrationContext);
+  const { getFieldState, control } = usePatientRegistrationContext();
   const { error, isTouched } = getFieldState('deathCause');
 
   const conceptUuid = fieldConfigurations?.causeOfDeath?.conceptUuid;

packages/esm-patient-registration-app/src/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx

@@ -7,6 +7,7 @@ import { OpenmrsDatePicker } from '@openmrs/esm-framework';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import styles from '../field.scss';
 import { Controller } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export const DateAndTimeOfDeathField: React.FC = () => {
   const { t } = useTranslation();
@@ -23,7 +24,7 @@ export const DateAndTimeOfDeathField: React.FC = () => {
 };
 
 function DeathDateField() {
-  const { watch, setValue, control } = useContext(PatientRegistrationContext);
+  const { watch, setValue, control } = usePatientRegistrationContext();
   const isDead = watch('isDead');
   const { t } = useTranslation();
   const today = dayjs().hour(23).minute(59).second(59).toDate();
@@ -58,7 +59,7 @@ function DeathDateField() {
 
 function DeathTimeField() {
   const { t } = useTranslation();
-  const { control } = useContext(PatientRegistrationContext);
+  const { control } = usePatientRegistrationContext();
 
   return (
     <Controller

packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx

@@ -14,6 +14,7 @@ import type {
 } from '../../patient-registration.types';
 import { ResourcesContext } from '../../../offline.resources';
 import styles from '../field.scss';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export function setIdentifierSource(
   identifierSource: IdentifierSource,
@@ -64,7 +65,7 @@ export const Identifiers: React.FC = () => {
     formState: { defaultValues },
     setValue,
     isOffline,
-  } = useContext(PatientRegistrationContext);
+  } = usePatientRegistrationContext();
   const identifiers = watch('identifiers');
   const { t } = useTranslation();
   const layout = useLayoutType();
@@ -138,6 +139,7 @@ export const Identifiers: React.FC = () => {
       </UserHasAccess>
       <div>
         {Object.entries(identifiers).map(([fieldName, identifier]) => (
+          // @ts-ignore
           <IdentifierInput key={fieldName} fieldName={fieldName} patientIdentifier={identifier} />
         ))}
         {showIdentifierOverlay && (

packages/esm-patient-registration-app/src/patient-registration/field/id/identifier-selection-overlay.component.tsx

@@ -13,6 +13,7 @@ import {
 import { initializeIdentifier, setIdentifierSource } from './id-field.component';
 import styles from './identifier-selection.scss';
 import { type UseFormSetValue } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 interface PatientIdentifierOverlayProps {
   setFieldValue: UseFormSetValue<FormValues>;
@@ -26,9 +27,10 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
     isOffline,
     watch,
     formState: { defaultValues },
-  } = useContext(PatientRegistrationContext);
+  } = usePatientRegistrationContext();
   const identifiers = watch('identifiers');
   const [unsavedIdentifierTypes, setUnsavedIdentifierTypes] = useState<FormValues['identifiers']>(identifiers);
+  console.log({ unsavedIdentifierTypes });
   const [searchString, setSearchString] = useState<string>('');
   const { t } = useTranslation();
   const { defaultPatientIdentifierTypes } = useConfig();
@@ -162,7 +164,7 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
 
   const handleConfiguringIdentifiers = useCallback(() => {
     setFieldValue('identifiers', unsavedIdentifierTypes);
-    closeOverlay();
+    // closeOverlay();
   }, [unsavedIdentifierTypes, setFieldValue, closeOverlay]);
 
   return (

packages/esm-patient-registration-app/src/patient-registration/field/obs/obs-field.component.tsx

@@ -157,7 +157,7 @@ interface DateObsFieldProps {
 function DateObsField({ concept, label, required, placeholder }: DateObsFieldProps) {
   const { t } = useTranslation();
   const fieldName = `obs.${concept.uuid}`;
-  const { setValue } = useContext(PatientRegistrationContext);
+  const { setValue } = usePatientRegistrationContext();
   const { control } = usePatientRegistrationContext();
 
   const onDateChange = (date: Date) => {

packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx

@@ -4,6 +4,7 @@ import { Layer, TextInput } from '@carbon/react';
 import { Controller, type ControllerRenderProps } from 'react-hook-form';
 import { type FormValues } from '../../../patient-registration.types';
 import { PatientRegistrationContext } from '../../../patient-registration-context';
+import { usePatientRegistrationContext } from '../../../patient-registration-hooks';
 
 // FIXME Temporarily imported here
 export interface TextInputProps
@@ -132,7 +133,7 @@ interface InputProps extends TextInputProps {
 
 export const Input: React.FC<InputProps> = ({ checkWarning, ...props }) => {
   const { t } = useTranslation();
-  const { getFieldState, control, watch } = useContext(PatientRegistrationContext);
+  const { getFieldState, control, watch } = usePatientRegistrationContext();
   const { error } = getFieldState(props.name);
 
   /*

packages/esm-patient-registration-app/src/patient-registration/input/combo-input/combo-input.component.tsx

@@ -6,6 +6,7 @@ import styles from '../input.scss';
 import { Controller } from 'react-hook-form';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { type FormValues } from '../../patient-registration.types';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 interface ComboInputProps {
   entries: Array<string>;
@@ -27,7 +28,7 @@ const ComboInput: React.FC<ComboInputProps> = ({
   const [highlightedEntry, setHighlightedEntry] = useState(-1);
   const [showEntries, setShowEntries] = useState(false);
   const comboInputRef = useRef(null);
-  const { control, setValue, watch } = useContext(PatientRegistrationContext);
+  const { control, setValue, watch } = usePatientRegistrationContext();
   const value = watch(name) ?? '';
 
   const handleFocus = useCallback(() => {

packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx

@@ -11,6 +11,7 @@ import { PatientRegistrationContext } from '../../../patient-registration-contex
 import { Input } from '../../basic-input/input/input.component';
 import styles from '../../input.scss';
 import { Controller, useFormContext } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../../patient-registration-hooks';
 
 interface IdentifierInputProps {
   patientIdentifier: PatientIdentifierValue;
@@ -21,7 +22,7 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
   const { t } = useTranslation();
   const { defaultPatientIdentifierTypes } = useConfig();
   const { identifierTypes } = useContext(ResourcesContext);
-  const { isOffline, watch, setValue, getFieldState, control } = useContext(PatientRegistrationContext);
+  const { isOffline, watch, setValue, getFieldState, control } = usePatientRegistrationContext();
   const identifierType = useMemo(
     () => identifierTypes.find((identifierType) => identifierType.uuid === patientIdentifier.identifierTypeUuid),
     [patientIdentifier, identifierTypes],

packages/esm-patient-registration-app/src/patient-registration/patient-registration-context.ts

@@ -4,7 +4,7 @@ import { type RegistrationConfig } from '../config-schema';
 import { type CapturePhotoProps, type FormValues } from './patient-registration.types';
 import { type UseFormReturn } from 'react-hook-form';
 
-export interface PatientRegistrationContextProps extends UseFormReturn<FormValues> {
+export interface PatientRegistrationContextProps {
   currentPhoto: string;
   identifierTypes: Array<any>;
   inEditMode: boolean;

packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts

@@ -32,6 +32,7 @@ import { useInitialPatientRelationships } from './section/patient-relationships/
 import dayjs from 'dayjs';
 import { z } from 'zod';
 import { PatientRegistrationContext } from './patient-registration-context';
+import { useFormContext } from 'react-hook-form';
 
 export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch<FormValues>] {
   const { freeTextFieldConceptUuid } = useConfig<RegistrationConfig>();
@@ -340,5 +341,8 @@ function getPatientAttributeUuidMapForPatient(attributes: Array<PersonAttributeR
 }
 
 export function usePatientRegistrationContext() {
-  return useContext(PatientRegistrationContext);
+  return {
+    ...useContext(PatientRegistrationContext),
+    ...useFormContext<FormValues>(),
+  };
 }

packages/esm-patient-registration-app/src/patient-registration/patient-registration-rhf.component.tsx

@@ -85,6 +85,8 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     reset,
   } = methods;
 
+  console.log('rerendering');
+
   const onFormSubmit = async (values: FormValues) => {
     const abortController = new AbortController();
     // helpers.setSubmitting(true);
@@ -170,6 +172,18 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     }
   };
 
+  const contextState = useMemo(
+    () => ({
+      identifierTypes: identifierTypes,
+      validationSchema,
+      inEditMode,
+      setCapturePhotoProps,
+      currentPhoto: photo?.imageSrc,
+      isOffline,
+    }),
+    [identifierTypes, identifierTypes, validationSchema, inEditMode, setCapturePhotoProps, photo?.imageSrc, isOffline],
+  );
+
   return (
     <Form className={styles.form} onSubmit={handleSubmit(onFormSubmit, displayErrors)}>
       <BeforeSavePrompt when={isDirty} redirect={target} />
@@ -215,27 +229,13 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
           </div>
         </div>
         <div className={styles.infoGrid}>
-          <FormProvider {...methods}>
-            <PatientRegistrationContext.Provider
-              value={{
-                ...methods,
-                identifierTypes: identifierTypes,
-                validationSchema,
-                // values: props.values,
-                inEditMode,
-                // setFieldValue: props.setFieldValue,
-                // setFieldTouched: props.setFieldTouched,
-                setCapturePhotoProps,
-                currentPhoto: photo?.imageSrc,
-                isOffline,
-                // initialFormValues: defaultValues,
-                // setInitialFormValues,
-              }}>
+          <PatientRegistrationContext.Provider value={contextState}>
+            <FormProvider {...methods}>
               {sections.map((section, index) => (
                 <SectionWrapper key={`registration-section-${section.id}`} sectionDefinition={section} index={index} />
               ))}
-            </PatientRegistrationContext.Provider>
-          </FormProvider>
+            </FormProvider>
+          </PatientRegistrationContext.Provider>
         </div>
       </div>
     </Form>

packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.component.tsx

@@ -16,13 +16,13 @@ export const DemographicsSection: React.FC<DemographicsSectionProps> = ({ fields
   const nameInLocalLanguage = watch(addNameInLocalLanguageFieldName);
   const isTouched = getFieldState(addNameInLocalLanguageFieldName);
 
-  useEffect(() => {
-    if (nameInLocalLanguage && isTouched) {
-      setValue('additionalGivenName', '');
-      setValue('additionalMiddleName', '');
-      setValue('additionalFamilyName', '');
-    }
-  }, [nameInLocalLanguage, isTouched]);
+  // useEffect(() => {
+  //   if (nameInLocalLanguage && isTouched) {
+  //     setValue('additionalGivenName', '');
+  //     setValue('additionalMiddleName', '');
+  //     setValue('additionalFamilyName', '');
+  //   }
+  // }, [nameInLocalLanguage, isTouched]);
 
   return (
     <section className={styles.formSection} aria-label="Demographics Section">