From 7945ebddefeb8286a65ccfd19814cf5aabc290f5 Mon Sep 17 00:00:00 2001 From: BharathKShetty Date: Fri, 13 Dec 2024 18:58:38 +0530 Subject: [PATCH] O3-4274: Refactor useVisitFormCallbacks to use useRef instead of useState --- .../visit/visit-form/visit-form.component.tsx | 25 ++++++++----------- .../visit/visit-form/visit-form.resource.ts | 7 ++++-- .../src/visit/visit-form/visit-form.test.tsx | 7 +++--- 3 files changed, 19 insertions(+), 20 deletions(-) diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx index a8e4876bf0..a6edbe6e9d 100644 --- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx +++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx @@ -120,7 +120,7 @@ const StartVisitForm: React.FC = ({ const { visitAttributeTypes } = useVisitAttributeTypes(); const [extraVisitInfo, setExtraVisitInfo] = useState(null); - const [visitFormCallbacks, setVisitFormCallbacks] = useVisitFormCallbacks(); + const visitFormCallbacksRef = useVisitFormCallbacks(); const displayVisitStopDateTimeFields = useMemo( () => Boolean(visitToEdit?.uuid || showVisitEndDateTimeFields), [visitToEdit?.uuid, showVisitEndDateTimeFields], @@ -243,7 +243,6 @@ const StartVisitForm: React.FC = ({ reset, } = methods; - // default values are cached so form needs to be reset when they change (e.g. when default visit location finishes loading) useEffect(() => { reset(defaultValues); }, [defaultValues, reset]); @@ -531,7 +530,7 @@ const StartVisitForm: React.FC = ({ }, ); - const onVisitCreatedOrUpdatedRequests = [...visitFormCallbacks.values()].map((callbacks) => + const onVisitCreatedOrUpdatedRequests = [...visitFormCallbacksRef.current.values()].map((callbacks) => callbacks.onVisitCreatedOrUpdated(visit), ); @@ -580,6 +579,7 @@ const StartVisitForm: React.FC = ({ return; } }, + // eslint-disable-next-line react-hooks/exhaustive-deps [ closeWorkspace, config.offlineVisitTypeUuid, @@ -591,7 +591,6 @@ const StartVisitForm: React.FC = ({ mutateCurrentVisit, mutateVisits, mutateInfiniteVisits, - visitFormCallbacks, patientUuid, t, validateVisitStartStopDatetime, @@ -660,10 +659,10 @@ const StartVisitForm: React.FC = ({
@@ -774,7 +773,7 @@ const StartVisitForm: React.FC = ({ name="visit-form-bottom-slot" patientUuid={patientUuid} visitFormOpenedFrom={openedFrom} - setVisitFormCallbacks={setVisitFormCallbacks} + visitFormCallbacksRef={visitFormCallbacksRef} /> @@ -818,7 +817,7 @@ interface VisitFormExtensionSlotProps { name: string; patientUuid: string; visitFormOpenedFrom: string; - setVisitFormCallbacks: React.Dispatch>>; + visitFormCallbacksRef: React.MutableRefObject>; // Replaced `setVisitFormCallbacks` with `visitFormCallbacksRef` } type VisitFormExtensionState = { @@ -838,18 +837,16 @@ type VisitFormExtensionState = { }; const VisitFormExtensionSlot: React.FC = React.memo( - ({ name, patientUuid, visitFormOpenedFrom, setVisitFormCallbacks }) => { + ({ name, patientUuid, visitFormOpenedFrom, visitFormCallbacksRef }) => { const config = useConfig(); return ( {(extension: AssignedExtension) => { - const state: VisitFormExtensionState = { + const state = { patientUuid, - setVisitFormCallbacks: (callbacks) => { - setVisitFormCallbacks((old) => { - return new Map(old).set(extension.id, callbacks); - }); + setVisitFormCallbacks: (callbacks: VisitFormCallbacks) => { + visitFormCallbacksRef.current.set(extension.id, callbacks); }, visitFormOpenedFrom, patientChartConfig: config, diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.resource.ts b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.resource.ts index 832c9b550f..b952c0b002 100644 --- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.resource.ts +++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.resource.ts @@ -1,7 +1,7 @@ import { openmrsFetch, restBaseUrl, useConnectivity, useVisitTypes, type Visit } from '@openmrs/esm-framework'; import { type amPm } from '@openmrs/esm-patient-common-lib'; import { useOfflineVisitType } from '../hooks/useOfflineVisitType'; -import { useState } from 'react'; +import { useRef } from 'react'; export type VisitFormData = { visitStartDate: Date; @@ -32,8 +32,11 @@ export interface VisitFormCallbacks { onVisitCreatedOrUpdated: (visit: Visit) => Promise; } +// export function useVisitFormCallbacks() { +// return useState>(new Map()); +// } export function useVisitFormCallbacks() { - return useState>(new Map()); + return useRef>(new Map()); } export function createVisitAttribute(visitUuid: string, attributeType: string, value: string) { diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.test.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.test.tsx index 915fbe0add..b4f5188f99 100644 --- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.test.tsx +++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.test.tsx @@ -76,10 +76,9 @@ const mockUseEmrConfiguration = jest.mocked(useEmrConfiguration); // from ./visit-form.resource const mockOnVisitCreatedOrUpdatedCallback = jest.fn(); -jest.mocked(useVisitFormCallbacks).mockReturnValue([ - new Map([['test-extension-id', { onVisitCreatedOrUpdated: mockOnVisitCreatedOrUpdatedCallback }]]), // visitFormCallbacks - jest.fn(), // setVisitFormCallbacks -]); +jest.mocked(useVisitFormCallbacks).mockReturnValue({ + current: new Map([['test-extension-id', { onVisitCreatedOrUpdated: mockOnVisitCreatedOrUpdatedCallback }]]), +}); const mockCreateVisitAttribute = jest.mocked(createVisitAttribute).mockResolvedValue({} as unknown as FetchResponse); const mockUpdateVisitAttribute = jest.mocked(updateVisitAttribute).mockResolvedValue({} as unknown as FetchResponse); const mockDeleteVisitAttribute = jest.mocked(deleteVisitAttribute).mockResolvedValue({} as unknown as FetchResponse);