PSP-9258 prevent L&L files from zooming out too far when toggling ful…

…lscreen.
bcgov · Jan 30, 2025 · 86eae73 · 86eae73
1 parent b875975
commit 86eae73
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 59 deletions.
diff --git a/source/frontend/src/components/common/mapFSM/machineDefinition/mapMachine.ts b/source/frontend/src/components/common/mapFSM/machineDefinition/mapMachine.ts
@@ -194,6 +194,7 @@ const mapRequestStates = {
                 if (
                   context.currentMapBounds &&
                   context.currentMapBounds.isValid() &&
+                  defaultBounds.contains(context.currentMapBounds) &&
                   context.currentMapBounds.contains(validBounds)
                 ) {
                   return context.currentMapBounds;

diff --git a/source/frontend/src/components/maps/MapView.tsx b/source/frontend/src/components/maps/MapView.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
 import { useResizeDetector } from 'react-resize-detector';
-import VisibilitySensor from 'react-visibility-sensor';
 
 import { useMapStateMachine } from '@/components/common/mapFSM/MapStateMachineContext';
 
@@ -25,20 +24,16 @@ const MapView: React.FC<React.PropsWithChildren<MapViewProps>> = () => {
   const isShowingSearchBar = mapMachine.isShowingSearchBar;
 
   return (
-    <VisibilitySensor partialVisibility={true}>
-      {({ isVisible }: { isVisible: boolean }) => (
-        <Styled.MapGrid
-          ref={resizeRef}
-          className={classNames('px-0', 'map', {
-            hideSearchBar: !isShowingSearchBar,
-          })}
-        >
-          <LoadingBackdrop show={mapMachine.isLoading} parentScreen />
-          {isShowingSearchBar && <MapSearch />}
-          {isVisible && <MapLeafletView parentWidth={width} />}
-        </Styled.MapGrid>
-      )}
-    </VisibilitySensor>
+    <Styled.MapGrid
+      ref={resizeRef}
+      className={classNames('px-0', 'map', {
+        hideSearchBar: !isShowingSearchBar,
+      })}
+    >
+      <LoadingBackdrop show={mapMachine.isLoading} parentScreen />
+      {isShowingSearchBar && <MapSearch />}
+      <MapLeafletView parentWidth={width} />
+    </Styled.MapGrid>
   );
 };
 

diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/PropertiesInformation.test.tsx b/source/frontend/src/features/leases/detail/LeasePages/details/PropertiesInformation.test.tsx
@@ -97,25 +97,4 @@ describe('LeasePropertiesInformation component', () => {
     const propertyHeader = queryByText('Property Information');
     expect(propertyHeader).toBeNull();
   });
-
-  it('renders draft markers with provided lat/lng', async () => {
-    setup({
-      lease: {
-        ...getEmptyLease(),
-        fileProperties: [
-          {
-            ...mockLeaseProperty(1),
-            areaUnitType: toTypeCode('test'),
-            leaseArea: 123,
-            file: null,
-            fileId: 1,
-            location: { coordinate: { x: 123, y: 48 } },
-          },
-        ],
-      },
-    });
-
-    await waitForEffects();
-    expect(customSetFilePropertyLocations).toHaveBeenCalledWith([{ lat: 48, lng: 123 }]);
-  });
 });
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/PropertiesInformation.tsx b/source/frontend/src/features/leases/detail/LeasePages/details/PropertiesInformation.tsx
@@ -1,13 +1,10 @@
 import { FieldArray, getIn, useFormikContext } from 'formik';
-import { LatLngLiteral } from 'leaflet';
-import React, { useEffect, useMemo } from 'react';
+import React from 'react';
 
-import { useMapStateMachine } from '@/components/common/mapFSM/MapStateMachineContext';
 import { Section } from '@/components/common/Section/Section';
 import { PropertyInformation } from '@/features/leases';
 import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease';
 import { ApiGen_Concepts_PropertyLease } from '@/models/api/generated/ApiGen_Concepts_PropertyLease';
-import { exists, getLatLng, locationFromFileProperty } from '@/utils';
 import { withNameSpace } from '@/utils/formUtils';
 
 export interface IPropertiesInformationProps {
@@ -29,23 +26,6 @@ export const PropertiesInformation: React.FunctionComponent<
     return getIn(values, withNameSpace(nameSpace, 'fileProperties')) ?? [];
   }, [values, nameSpace]);
 
-  const { setFilePropertyLocations } = useMapStateMachine();
-
-  const locations: LatLngLiteral[] = useMemo(() => {
-    if (exists(properties)) {
-      return properties
-        .map(x => locationFromFileProperty(x))
-        .map(y => getLatLng(y))
-        .filter(exists);
-    } else {
-      return [];
-    }
-  }, [properties]);
-
-  useEffect(() => {
-    setFilePropertyLocations(locations);
-  }, [setFilePropertyLocations, locations]);
-
   return properties?.length ? (
     <Section initiallyExpanded={true} isCollapsable={true} header="Property Information">
       <FieldArray

diff --git a/source/frontend/src/features/mapSideBar/acquisition/models/LeaseStakeholderModel.ts b/source/frontend/src/features/mapSideBar/acquisition/models/LeaseStakeholderModel.ts
@@ -69,7 +69,6 @@ export class CompReqLeaseStakeholderModel {
   }
 
   public toApi(): ApiGen_Concepts_CompReqLeaseStakeholder {
-    debugger;
     const compReqPayeeModel: ApiGen_Concepts_CompReqLeaseStakeholder = {
       ...getEmptyBaseAudit(),
       compReqLeaseStakeholderId: this.apiId,

diff --git a/source/frontend/src/features/mapSideBar/lease/LeaseContainer.tsx b/source/frontend/src/features/mapSideBar/lease/LeaseContainer.tsx
@@ -1,5 +1,14 @@
 import { FormikProps } from 'formik';
-import React, { useCallback, useContext, useEffect, useReducer, useRef, useState } from 'react';
+import { LatLngLiteral } from 'leaflet';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 import * as Yup from 'yup';
 
 import LeaseIcon from '@/assets/images/lease-icon.svg?react';
@@ -24,6 +33,7 @@ import LeaseStakeholderContainer from '@/features/leases/detail/LeasePages/stake
 import Surplus from '@/features/leases/detail/LeasePages/surplus/Surplus';
 import { LeaseFormModel } from '@/features/leases/models';
 import { useLeaseRepository } from '@/hooks/repositories/useLeaseRepository';
+import { exists, getLatLng, locationFromFileProperty } from '@/utils';
 
 import { SideBarContext } from '../context/sidebarContext';
 import MapSideBarLayout from '../layout/MapSideBarLayout';
@@ -213,6 +223,19 @@ export const LeaseContainer: React.FC<ILeaseContainerProps> = ({ leaseId, onClos
     getLastUpdatedBy: { execute: getLastUpdatedBy, loading: getLastUpdatedByLoading },
   } = useLeaseRepository();
 
+  const { setFilePropertyLocations } = useMapStateMachine();
+
+  const locations: LatLngLiteral[] = useMemo(() => {
+    if (exists(lease?.fileProperties)) {
+      return lease?.fileProperties
+        .map(x => locationFromFileProperty(x))
+        .map(y => getLatLng(y))
+        .filter(exists);
+    } else {
+      return [];
+    }
+  }, [lease?.fileProperties]);
+
   const onChildSuccess = useCallback(() => {
     setStaleLastUpdatedBy(true);
   }, [setStaleLastUpdatedBy]);
@@ -297,6 +320,10 @@ export const LeaseContainer: React.FC<ILeaseContainerProps> = ({ leaseId, onClos
     }
   }, [fetchLastUpdatedBy, lastUpdatedBy, leaseId, staleLastUpdatedBy]);
 
+  useEffect(() => {
+    setFilePropertyLocations(locations);
+  }, [setFilePropertyLocations, locations]);
+
   return (
     <MapSideBarLayout
       showCloseButton