Psp 6988 - update property sidebar to use router instead of state. (#…

…3564)

* psp-6988 replace state based routing with router.

* lint corrections.

* psp-6988 replace state based routing with router.

* psp-6988 correct non-inventory parcel logic

* test correction.

* lint correction.

source/frontend/src/components/common/mapFSM/MapStateMachineContext.tsx

@@ -83,10 +83,10 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
     actions: {
       navigateToProperty: (context, event: any) => {
         const selectedFeatureData = context.mapLocationFeatureDataset;
-        if (selectedFeatureData?.pimsFeature?.properties.PROPERTY_ID) {
+        if (selectedFeatureData?.pimsFeature?.properties?.PROPERTY_ID) {
           const pimsFeature = selectedFeatureData.pimsFeature;
           history.push(`/mapview/sidebar/property/${pimsFeature.properties.PROPERTY_ID}`);
-        } else if (selectedFeatureData?.parcelFeature?.properties.PID) {
+        } else if (selectedFeatureData?.parcelFeature?.properties?.PID) {
           const parcelFeature = selectedFeatureData.parcelFeature;
           const parsedPid = pidParser(parcelFeature.properties.PID);
           history.push(`/mapview/sidebar/non-inventory-property/${parsedPid}`);

source/frontend/src/components/maps/leaflet/Layers/util.tsx

@@ -79,6 +79,30 @@ export const otherInterestIconSelect = L.icon({
   shadowSize: [41, 41],
 });
 
+// not owned property icon (orange)
+export const notOwnedPropertyIcon = L.icon({
+  iconUrl:
+    require('@/assets/images/pins/marker-info-orange.png') ??
+    'assets/images/pins/marker-info-orange.png',
+  shadowUrl: require('@/assets/images/pins/marker-shadow.png') ?? 'marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+
+// not owned property icon (orange) highlighted
+export const notOwnedPropertyIconSelect = L.icon({
+  iconUrl:
+    require('@/assets/images/pins/marker-info-orange-highlight.png') ??
+    'assets/images/pins/marker-info-orange-highlight.png',
+  shadowUrl: require('@/assets/images/pins/marker-shadow.png') ?? 'marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+
 /**
  * Creates map points (in GeoJSON format) for further clustering by `supercluster`
  * @param properties
@@ -154,6 +178,16 @@ export function getMarkerIcon(
   }
 }
 
+/**
+ * Get an icon type for the specified cluster property details.
+ */
+export function getNotOwnerMarkerIcon(selected: boolean): L.Icon<L.IconOptions> {
+  if (selected) {
+    return notOwnedPropertyIconSelect;
+  }
+  return notOwnedPropertyIcon;
+}
+
 // parcel icon (green) highlighted
 export const getDraftIcon = (text: string) => {
   return L.divIcon({
@@ -179,8 +213,10 @@ export const createSingleMarker = <P extends MarkerFeature>(
   if (isOwned) {
     const icon = getMarkerIcon(feature, false);
     return new Marker(latlng, { icon });
+  } else {
+    const icon = getNotOwnerMarkerIcon(false);
+    return new Marker(latlng, { icon });
   }
-  throw Error('marker type not found');
 };
 
 export const isPimsFeature = (

source/frontend/src/components/maps/leaflet/Markers/SingleMarker.tsx

@@ -11,6 +11,7 @@ import {
 
 import {
   getMarkerIcon,
+  getNotOwnerMarkerIcon,
   isFullyAttributed,
   isPimsBoundary,
   isPimsFeature,
@@ -40,6 +41,7 @@ const SinglePropertyMarker: React.FC<React.PropsWithChildren<SinglePropertyMarke
     if (isOwned) {
       return getMarkerIcon(pointFeature, isSelected);
     } else {
+      return getNotOwnerMarkerIcon(isSelected);
     }
   };
 

source/frontend/src/features/mapSideBar/acquisition/router/FilePropertyRouter.tsx

@@ -83,7 +83,6 @@ export const FilePropertyRouter: React.FC<IFilePropertyRouterProps> = props => {
       <Switch>
         <Route path={`${path}/:tab`}>
           <PropertyFileContainer
-            withRouter
             setEditFileProperty={() => props.setIsEditing(true)}
             setEditTakes={() => props.setIsEditing(true)}
             fileProperty={fileProperty}

source/frontend/src/features/mapSideBar/property/InventoryTabs.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Tab } from 'react-bootstrap';
+import { generatePath, useHistory, useRouteMatch } from 'react-router-dom';
 
 import TabView from '@/components/common/TabView';
 
@@ -14,7 +15,6 @@ export interface IInventoryTabsProps {
   defaultTabKey: InventoryTabNames;
   tabViews: TabInventoryView[];
   activeTab: InventoryTabNames;
-  setActiveTab: (tab: InventoryTabNames) => void;
 }
 
 export enum InventoryTabNames {
@@ -32,16 +32,17 @@ export enum InventoryTabNames {
  */
 export const InventoryTabs: React.FunctionComponent<
   React.PropsWithChildren<IInventoryTabsProps>
-> = ({ defaultTabKey, tabViews, activeTab, setActiveTab }) => {
+> = ({ defaultTabKey, tabViews, activeTab }) => {
+  const history = useHistory();
+  const match = useRouteMatch<{ propertyId: string }>();
   return (
     <TabView
       defaultActiveKey={defaultTabKey}
       activeKey={activeTab}
       onSelect={(eventKey: string | null) => {
         const tab = Object.values(InventoryTabNames).find(value => value === eventKey);
-        if (tab && tab !== activeTab) {
-          setActiveTab(tab);
-        }
+        const path = generatePath(match.path, { propertyId: match.params.propertyId, tab });
+        history.push(path);
       }}
     >
       {tabViews.map((view: TabInventoryView, index: number) => (

source/frontend/src/features/mapSideBar/property/MotiInventoryContainer.test.tsx

@@ -123,6 +123,7 @@ describe('MotiInventoryContainer component', () => {
 
   it('hides the property information tab for non-inventory properties', async () => {
     mockAxios.onPost().reply(200, {});
+    history.push('/mapview/sidebar/non-inventory-property/9212434');
     // non-inventory properties will not attempt to contact the backend.
     const error = {
       isAxiosError: true,

source/frontend/src/features/mapSideBar/property/MotiInventoryContainer.tsx

@@ -1,17 +1,19 @@
 import { FormikProps } from 'formik';
 import React, { useEffect, useRef, useState } from 'react';
+import { generatePath, useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { ReactComponent as LotSvg } from '@/assets/images/icon-lot.svg';
 import GenericModal from '@/components/common/GenericModal';
 import { useMapStateMachine } from '@/components/common/mapFSM/MapStateMachineContext';
-import PropertyViewSelector from '@/features/mapSideBar/property/PropertyViewSelector';
 import { PROPERTY_TYPES, useComposedProperties } from '@/hooks/repositories/useComposedProperties';
+import { useQuery } from '@/hooks/use-query';
 import { Api_Property } from '@/models/api/Property';
 
 import MapSideBarLayout from '../layout/MapSideBarLayout';
 import SidebarFooter from '../shared/SidebarFooter';
 import { MotiInventoryHeader } from './MotiInventoryHeader';
+import PropertyRouter from './PropertyRouter';
 
 export interface IMotiInventoryContainerProps {
   id?: number;
@@ -27,7 +29,11 @@ export const MotiInventoryContainer: React.FunctionComponent<
 > = props => {
   const [showCancelConfirmModal, setShowCancelConfirmModal] = useState<boolean>(false);
 
-  const [isEditing, setIsEditing] = useState<boolean>(false);
+  const query = useQuery();
+  const { push } = useHistory();
+  const match = useRouteMatch();
+  const tabMatch = useRouteMatch<{ tab: string; propertyId: string }>(`${match.path}/:tab`);
+  const isEditing = query.get('edit') === 'true';
   const [isValid, setIsValid] = useState<boolean>(true);
 
   const mapMachine = useMapStateMachine();
@@ -48,12 +54,12 @@ export const MotiInventoryContainer: React.FunctionComponent<
   });
 
   useEffect(() => {
-    setIsEditing(false);
-  }, [props.pid]);
+    push({ search: '' });
+  }, [props.pid, push]);
 
   const onSuccess = () => {
     props.id && composedPropertyState.apiWrapper?.execute(props.id);
-    setIsEditing(false);
+    stripEditFromPath();
   };
 
   const handleSaveClick = async () => {
@@ -80,10 +86,22 @@ export const MotiInventoryContainer: React.FunctionComponent<
     if (formikRef !== undefined) {
       formikRef.current?.resetForm();
     }
-    setIsEditing(false);
+
+    stripEditFromPath();
     setShowCancelConfirmModal(false);
   };
 
+  const stripEditFromPath = () => {
+    if (!tabMatch) {
+      return;
+    }
+    const path = generatePath('/mapview/sidebar/property/:propertyId/:tab', {
+      propertyId: tabMatch?.params.propertyId,
+      tab: tabMatch?.params.tab,
+    });
+    push(path, { search: query.toString() });
+  };
+
   const handleZoom = (apiProperty?: Api_Property | undefined) => {
     if (apiProperty?.longitude !== undefined && apiProperty?.latitude !== undefined) {
       mapMachine.requestFlyToLocation({ lat: apiProperty.latitude, lng: apiProperty.longitude });
@@ -120,10 +138,8 @@ export const MotiInventoryContainer: React.FunctionComponent<
       onClose={props.onClose}
     >
       <>
-        <PropertyViewSelector
+        <PropertyRouter
           composedPropertyState={composedPropertyState}
-          isEditMode={isEditing}
-          setEditMode={setIsEditing}
           onSuccess={onSuccess}
           ref={formikRef}
         />

source/frontend/src/features/mapSideBar/property/PropertyContainer.test.tsx

@@ -37,7 +37,6 @@ describe('PropertyContainer component', () => {
     const { queryByText } = setup({
       claims: [],
       composedPropertyState: { apiWrapper: { response: {} }, id: 1 } as any,
-      setEditManagementState: jest.fn(),
     });
 
     expect(queryByText('Management')).toBeNull();
@@ -47,7 +46,6 @@ describe('PropertyContainer component', () => {
     const { getByText } = setup({
       claims: [Claims.MANAGEMENT_VIEW],
       composedPropertyState: { apiWrapper: { response: {} }, id: 1 } as any,
-      setEditManagementState: jest.fn(),
     });
 
     expect(getByText('Management')).toBeVisible();

source/frontend/src/features/mapSideBar/property/PropertyContainer.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { useParams } from 'react-router-dom';
 
 import { Claims } from '@/constants';
 import { usePropertyDetails } from '@/features/mapSideBar/hooks/usePropertyDetails';
@@ -14,20 +15,18 @@ import { PropertyDetailsTabView } from '@/features/mapSideBar/property/tabs/prop
 import ComposedPropertyState from '@/hooks/repositories/useComposedProperties';
 import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
 
-import { EditManagementState } from './PropertyViewSelector';
 import { PropertyManagementTabView } from './tabs/propertyDetailsManagement/detail/PropertyManagementTabView';
 
 export interface IPropertyContainerProps {
   composedPropertyState: ComposedPropertyState;
-  setEditManagementState: (state: EditManagementState | null) => void;
 }
 
 /**
  * container responsible for logic related to map sidebar display. Synchronizes the state of the parcel detail forms with the corresponding query parameters (push/pull).
  */
 export const PropertyContainer: React.FunctionComponent<
   React.PropsWithChildren<IPropertyContainerProps>
-> = ({ composedPropertyState, setEditManagementState }) => {
+> = ({ composedPropertyState }) => {
   const showPropertyInfoTab = composedPropertyState?.id !== undefined;
   const { hasClaim } = useKeycloakWrapper();
 
@@ -79,7 +78,6 @@ export const PropertyContainer: React.FunctionComponent<
         <PropertyDetailsTabView
           property={propertyViewForm}
           loading={composedPropertyState.apiWrapper?.loading ?? false}
-          setEditManagementState={setEditManagementState}
         />
       ),
       key: InventoryTabNames.property,
@@ -114,7 +112,6 @@ export const PropertyContainer: React.FunctionComponent<
         <PropertyManagementTabView
           property={composedPropertyState.apiWrapper?.response}
           loading={composedPropertyState.apiWrapper?.loading ?? false}
-          setEditManagementState={setEditManagementState}
         />
       ),
       key: InventoryTabNames.management,
@@ -123,15 +120,14 @@ export const PropertyContainer: React.FunctionComponent<
     defaultTab = InventoryTabNames.management;
   }
 
-  const [activeTab, setActiveTab] = useState<InventoryTabNames>(defaultTab);
-
+  const params = useParams<{ tab?: string }>();
+  const activeTab = Object.values(InventoryTabNames).find(t => t === params.tab) ?? defaultTab;
   return (
     <InventoryTabs
       loading={composedPropertyState.composedLoading}
       tabViews={tabViews}
       defaultTabKey={defaultTab}
       activeTab={activeTab}
-      setActiveTab={setActiveTab}
     />
   );
 };