feat: fetch the org unit only when the map is opened using useApiMeta…

…dataQuery

src/core_modules/capture-core/components/DataEntries/Enrollment/EnrollmentDataEntry.component.js

@@ -33,7 +33,6 @@ import {
     getIncidentDateValidatorContainer,
 } from './fieldValidators';
 import { sectionKeysForEnrollmentDataEntry } from './constants/sectionKeys.const';
-import { withCenterPoint } from '../../DataEntry/withCenterPoint';
 import { type Enrollment, ProgramStage, RenderFoundation, getProgramThrowIfNotFound } from '../../../metaData';
 import { EnrollmentWithFirstStageDataEntry } from './EnrollmentWithFirstStageDataEntry';
 import {
@@ -240,7 +239,7 @@ const getGeometrySettings = () => ({
                 dialogLabel: i18n.t('Area'),
                 required: false,
                 orientation: getOrientation(props.formHorizontal),
-                center: props.center,
+                orgUnit: props.orgUnit,
             });
         }
 
@@ -251,7 +250,7 @@ const getGeometrySettings = () => ({
             required: false,
             orientation: getOrientation(props.formHorizontal),
             shrinkDisabled: props.formHorizontal,
-            center: props.center,
+            orgUnit: props.orgUnit,
         });
     },
     getPropName: () => 'geometry',
@@ -379,8 +378,7 @@ const AOCFieldBuilderHOC = withAOCFieldBuilder(getAOCSettingsFn())(
         getCategoryOptionsSettingsFn(),
     )(FinalEnrollmentDataEntry));
 const LocationHOC = withDataEntryFieldIfApplicable(getGeometrySettings())(AOCFieldBuilderHOC);
-const CenterPointHOC = withCenterPoint()(LocationHOC);
-const IncidentDateFieldHOC = withDataEntryFieldIfApplicable(getIncidentDateSettings())(CenterPointHOC);
+const IncidentDateFieldHOC = withDataEntryFieldIfApplicable(getIncidentDateSettings())(LocationHOC);
 const EnrollmentDateFieldHOC = withDataEntryField(getEnrollmentDateSettings())(IncidentDateFieldHOC);
 const BrowserBackWarningHOC = withBrowserBackWarning()(EnrollmentDateFieldHOC);
 

src/core_modules/capture-core/components/DataEntries/Enrollment/EnrollmentWithFirstStageDataEntry/EnrollmentWithFirstStageDataEntry.component.js

@@ -126,6 +126,7 @@ const getStageGeometrySettings = () => ({
                 dialogLabel: i18n.t('Area'),
                 required: false,
                 orientation: getOrientation(props.formHorizontal),
+                orgUnit: props.orgUnit,
             });
         }
 
@@ -136,6 +137,7 @@ const getStageGeometrySettings = () => ({
             required: false,
             orientation: getOrientation(props.formHorizontal),
             shrinkDisabled: props.formHorizontal,
+            orgUnit: props.orgUnit,
         });
     },
     getPropName: () => stageMainDataIds.GEOMETRY,

src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/DataEntry.component.js

@@ -18,7 +18,6 @@ import {
     withSaveHandler,
     placements,
     withCleanUp,
-    withCenterPoint,
 } from '../../../../DataEntry';
 import {
     withInternalChangeHandler,
@@ -232,7 +231,7 @@ const buildGeometrySettingsFn = () => ({
                 dialogLabel: i18n.t('Area'),
                 required: false,
                 orientation: getOrientation(props.formHorizontal),
-                center: props.center,
+                orgUnit: props.orgUnit,
             });
         }
 
@@ -243,7 +242,7 @@ const buildGeometrySettingsFn = () => ({
             required: false,
             orientation: getOrientation(props.formHorizontal),
             shrinkDisabled: props.formHorizontal,
-            center: props.center,
+            orgUnit: props.orgUnit,
         });
     },
     getPropName: () => 'geometry',
@@ -413,7 +412,7 @@ const CleanUpHOC = withCleanUp()(withFilterProps(dataEntryFilterProps)(DataEntry
 const AssigneeField = withDataEntryFieldIfApplicable(buildAssigneeSettingsFn())(CleanUpHOC);
 const RelationshipField = withDataEntryFieldIfApplicable(buildRelationshipsSettingsFn())(AssigneeField);
 const CommentField = withDataEntryField(buildNotesSettingsFn())(RelationshipField);
-const GeometryField = withCenterPoint()(withDataEntryFieldIfApplicable(buildGeometrySettingsFn())(CommentField));
+const GeometryField = withDataEntryFieldIfApplicable(buildGeometrySettingsFn())(CommentField);
 const ReportDateField = withDataEntryField(buildReportDateSettingsFn())(GeometryField);
 const FeedbackOutput = withFeedbackOutput()(ReportDateField);
 const IndicatorOutput = withIndicatorOutput()(FeedbackOutput);

src/core_modules/capture-core/components/DataEntry/index.js

@@ -15,7 +15,6 @@ export { withErrorOutput } from './dataEntryOutput/withErrorOutput';
 export { withIndicatorOutput } from './dataEntryOutput/withIndicatorOutput';
 export { withCleanUp } from './withCleanUp';
 export { withAskToCreateNew } from './withAskToCreateNew';
-export { withCenterPoint } from './withCenterPoint';
 
 // misc
 export { inMemoryFileStore } from './file/inMemoryFileStore';

src/core_modules/capture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js

@@ -5,6 +5,7 @@ import { CoordinateField as UICoordinateField } from 'capture-ui';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { typeof orientations } from '../../../New';
+import { withCenterPoint } from '../../HOC';
 
 const getStyles = (theme: Theme) => ({
     inputWrapperFocused: {
@@ -93,4 +94,4 @@ class CoordinateFieldPlain extends React.Component<Props> {
     }
 }
 
-export const CoordinateField = withStyles(getStyles)(CoordinateFieldPlain);
+export const CoordinateField = withStyles(getStyles)(withCenterPoint()(CoordinateFieldPlain));

src/core_modules/capture-core/components/FormFields/New/Fields/PolygonField/PolygonField.component.js

@@ -4,6 +4,7 @@ import withStyles from '@material-ui/core/styles/withStyles';
 import { PolygonField as UIPolygonField } from 'capture-ui';
 import { Dialog, DialogTitle } from '@material-ui/core';
 import { typeof orientations } from '../../../New';
+import { withCenterPoint } from '../../HOC';
 
 const getStyles = () => ({
     dialogPaper: {
@@ -56,4 +57,4 @@ class PolygonFieldPlain extends React.Component<Props> {
     }
 }
 
-export const PolygonField = withStyles(getStyles)(PolygonFieldPlain);
+export const PolygonField = withStyles(getStyles)(withCenterPoint()(PolygonFieldPlain));

src/core_modules/capture-core/components/FormFields/New/HOC/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { withCenterPoint } from './withCenterPoint';

src/core_modules/capture-core/components/FormFields/New/HOC/withCenterPoint.js

@@ -0,0 +1,56 @@
+// @flow
+import React, { type ComponentType, useMemo, useState } from 'react';
+import { useApiMetadataQuery } from 'capture-core/utils/reactQueryHelpers';
+
+const DEFAULT_CENTER = [51.505, -0.09];
+
+const convertToClientCoordinates = ({ coordinates, type }: { coordinates: any[], type: string }) => {
+    switch (type) {
+    case 'Point':
+        return [coordinates[1], coordinates[0]];
+    case 'Polygon':
+        return coordinates[0][0];
+    default:
+        return DEFAULT_CENTER;
+    }
+};
+
+const getCenterPoint = (InnerComponent: ComponentType<any>) => (props: Object) => {
+    const { orgUnit, ...passOnProps } = props;
+    const [orgUnitKey, setOrgUnitKey] = useState(orgUnit.id);
+    const [shouldFetch, setShouldFetch] = useState(false);
+    const queryKey = ['organisationUnit', orgUnitKey];
+    const queryFn = {
+        resource: 'organisationUnits',
+        id: () => orgUnitKey,
+        params: {
+            fields: 'geometry,parent',
+        },
+    };
+    const queryOptions = useMemo(
+        () => ({ enabled: Boolean(orgUnit.id) && shouldFetch }),
+        [shouldFetch, orgUnit.id],
+    );
+    const { data } = useApiMetadataQuery<any>(queryKey, queryFn, queryOptions);
+
+    const center = useMemo(() => {
+        if (data) {
+            const { geometry, parent } = data;
+            if (geometry) {
+                return convertToClientCoordinates(geometry);
+            } else if (parent?.id) {
+                setOrgUnitKey(parent.id);
+            }
+            return DEFAULT_CENTER;
+        }
+        return undefined;
+    }, [data]);
+
+    const onOpenMap = (hasValue) => {
+        setShouldFetch(!hasValue);
+    };
+
+    return <InnerComponent {...passOnProps} center={center} onOpenMap={onOpenMap} />;
+};
+
+export const withCenterPoint = () => (InnerComponent: ComponentType<any>) => getCenterPoint(InnerComponent);

src/core_modules/capture-core/components/FormFields/New/index.js

@@ -33,6 +33,7 @@ export { withLabel } from './HOC/withLabel';
 export { withStyledContainer } from './HOC/withStyledContainer';
 export { withOptionsIconElement } from './HOC/withOptionsIconElement';
 export { withFocusSaver, withInternalChangeHandler } from 'capture-ui';
+export { withCenterPoint } from './HOC/withCenterPoint';
 
 // OrgUnit HOCs
 export {

src/core_modules/capture-core/components/WidgetEnrollment/Actions/Actions.component.js

@@ -12,7 +12,6 @@ import { AddLocation } from './AddLocation';
 import type { PlainProps } from './actions.types';
 import { LoadingMaskForButton } from '../../LoadingMasks';
 import { MapModal } from '../MapModal';
-import { useCenterPoint } from '../hooks/useCenterPoint';
 
 const styles = {
     actions: {
@@ -40,7 +39,6 @@ export const ActionsPlain = ({
 }: PlainProps) => {
     const [isOpenActions, setOpenActions] = useState(false);
     const [isOpenMap, setOpenMap] = useState(false);
-    const { center } = useCenterPoint(enrollment.orgUnit);
     const handleOnUpdate = (arg) => {
         setOpenActions(false);
         onUpdate(arg);
@@ -111,7 +109,6 @@ export const ActionsPlain = ({
                 enrollment={enrollment}
                 onUpdate={handleOnUpdate}
                 setOpenMap={setOpenMap}
-                center={center}
             />}
         </>
     );

src/core_modules/capture-core/components/WidgetEnrollment/MapModal/MapModal.container.js

@@ -3,15 +3,17 @@ import React, { useCallback } from 'react';
 import { useGeometry } from '../hooks/useGeometry';
 import type { MapModalProps } from './MapModal.types';
 import { MapModal as MapModalComponent } from './MapModal.component';
+import { useCenterPoint } from './hooks';
 
 export const MapModal = ({
     enrollment,
     onUpdate,
     setOpenMap,
     defaultValues,
-    center,
+    center: storedCenter,
 }: MapModalProps) => {
     const { geometryType, dataElementType } = useGeometry(enrollment);
+    const { center } = useCenterPoint(enrollment.orgUnit, storedCenter);
 
     const onSetCoordinates = useCallback((coordinates) => {
         const geometry = coordinates ? { type: geometryType, coordinates } : null;

src/core_modules/capture-core/components/WidgetEnrollment/MapModal/hooks/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { useCenterPoint } from './useCenterPoint';

src/core_modules/capture-core/components/WidgetEnrollment/MapModal/hooks/useCenterPoint.js

@@ -0,0 +1,54 @@
+// @flow
+import { useMemo, useState } from 'react';
+import { useApiMetadataQuery } from 'capture-core/utils/reactQueryHelpers';
+
+const DEFAULT_CENTER = [51.505, -0.09];
+
+const convertToClientCoordinates = ({ coordinates, type }: { coordinates: any[], type: string }) => {
+    switch (type) {
+    case 'Point':
+        return [coordinates[1], coordinates[0]];
+    case 'Polygon':
+        return coordinates[0][0];
+    default:
+        return DEFAULT_CENTER;
+    }
+};
+
+export const useCenterPoint = (orgUnitId: string, storedCenter: ?[number, number]) => {
+    const [orgUnitKey, setOrgUnitKey] = useState(orgUnitId);
+    const queryKey = ['organisationUnit', orgUnitKey];
+    const queryFn = {
+        resource: 'organisationUnits',
+        id: () => orgUnitKey,
+        params: {
+            fields: 'geometry,parent',
+        },
+    };
+    const queryOptions = { enabled: !storedCenter && Boolean(orgUnitId) };
+    const { data, isLoading } = useApiMetadataQuery<any>(queryKey, queryFn, queryOptions);
+
+    const center = useMemo(() => {
+        if (data) {
+            const { geometry, parent } = data;
+            if (geometry) {
+                return convertToClientCoordinates(geometry);
+            } else if (parent?.id) {
+                setOrgUnitKey(parent.id);
+            }
+            return DEFAULT_CENTER;
+        }
+        return undefined;
+    }, [data]);
+
+    if (storedCenter) {
+        return {
+            center: storedCenter,
+        };
+    }
+
+    return {
+        center,
+        loading: isLoading,
+    };
+};