add multiple property selection

DigitalCommons · Nov 29, 2023 · 0ea3ca3 · 0ea3ca3
1 parent 799e0f9
commit 0ea3ca3
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 44 deletions.
diff --git a/src/actions/LandOwnershipActions.js b/src/actions/LandOwnershipActions.js
@@ -70,6 +70,15 @@ export const setSelectedProperty = (property) => {
   };
 };
 
+export const clearSelectedProperty = (property) => {
+  return (dispatch) => {
+    dispatch({
+      type: "CLEAR_SELECTED_PROPERTY",
+      payload: property
+    })
+  }
+}
+
 export const showPropertyPolygon = (propertyCoordinates) => {
   return (dispatch) => {
     dispatch({

diff --git a/src/components/left-pane/LeftPaneInfo.js b/src/components/left-pane/LeftPaneInfo.js
@@ -16,14 +16,13 @@ const LeftPaneInfo = ({ onClose, open }) => {
     (state) => state.relatedProperties.selectedProperty
   );
 
-  console.log("LeftPaneInfo", properties, selectedProperties);
 
   return (
     <LeftPaneTray title="Land Information" open={open} onClose={onClose}>
       {polygons.length ||
-      markers.length ||
-      properties.length ||
-      selectedProperties.length > 0 ? (
+        markers.length ||
+        properties.length ||
+        selectedProperties.length > 0 ? (
         <>
           {markers.map((marker, i) => (
             <MarkerSection marker={marker} key={`marker-${i}`} />

diff --git a/src/components/left-pane/PropertySection.js b/src/components/left-pane/PropertySection.js
@@ -50,8 +50,7 @@ const PropertySection = ({ property, active }) => {
     }
     console.log("handleClear Property", property);
   };
-  console.log("PropertySection", property, [title_no]);
-  console.log("PropertySection", property);
+
 
   return (
     <div className="left-pane-tray-section">

diff --git a/src/components/left-pane/RelatedProperties.js b/src/components/left-pane/RelatedProperties.js
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import {
   setSelectedProperty,
   showPropertyPolygon,
+  clearSelectedProperty
 } from "../../actions/LandOwnershipActions";
 import { setLngLat } from "../../actions/MapActions";
 
@@ -14,19 +15,31 @@ const RelatedProperties = ({ property }) => {
   const activePropertyId = useSelector(
     (state) => state.landOwnership.activePropertyId
   );
+  const { selectedProperty } = useSelector(state => state.relatedProperties);
 
   const lng = property.geom.coordinates[0][0][1];
   const lat = property.geom.coordinates[0][0][0];
 
   const handlePropertyClick = () => {
     // onPropertyClick();
     // dispatch(setLngLat(lng, lat));
-    dispatch(showPropertyPolygon(property.geom.coordinates[0]));
-    dispatch(setSelectedProperty([property]));
+    //dispatch(showPropertyPolygon(property.geom.coordinates[0]));
+    console.log(property);
+    console.log(selectedProperty)
+    console.log(selectedProperty.find(item => item[0].id === property.id))
+
+    if (selectedProperty.find(item => item[0].id === property.id)) {
+      console.log("clearing the property");
+      dispatch(clearSelectedProperty([property]));
+    }
+    else
+      dispatch(setSelectedProperty([property]));
+
     setActive(!active);
-    console.log("Selected Property", property);
-    console.log("Active", active);
-    console.log("Active Property Id", activePropertyId);
+
+    //console.log("Selected Property", property);
+    //console.log("Active", active);
+    //console.log("Active Property Id", activePropertyId);
   };
 
   return (

diff --git a/src/components/left-pane/RelatedPropertySection.js b/src/components/left-pane/RelatedPropertySection.js
@@ -35,7 +35,6 @@ const RelatedPropertySection = ({ property, active }) => {
     openTray("Ownership Search");
   };
 
-  console.log("RelatedPropertySection", property[0]);
   const handleClear = () => {
     // dispatch({ type: "CLEAR_HIGHLIGHT", payload: property[0] });
     // Clear properties if the property being cleared is the searched property
@@ -49,7 +48,6 @@ const RelatedPropertySection = ({ property, active }) => {
     console.log("handleClear RelatedProperty", property[0]);
   };
 
-  console.log("RelatedPropertySection", property[0], activePropertyId);
 
   return (
     <div className="left-pane-tray-section">

diff --git a/src/components/map/MapboxMap.js b/src/components/map/MapboxMap.js
@@ -50,6 +50,7 @@ const MapboxMap = ({ user }) => {
   const propertyCoordinates = useSelector(
     (state) => state.propertySearchPoly.propertyCoordinates
   );
+  const { selectedProperty } = useSelector(state => state.relatedProperties);
 
   // Check the propertyCoordinates update propagates to the MapboxMap component
   useEffect(() => {
@@ -268,8 +269,8 @@ const MapboxMap = ({ user }) => {
             baseLayer === "aerial"
               ? "#091324"
               : constants.USE_OS_TILES
-              ? "#aadeef"
-              : "#72b6e6",
+                ? "#aadeef"
+                : "#72b6e6",
         }}
         zoom={zoom}
         onZoomEnd={(map) => dispatch(setZoom([map.getZoom()]))}
@@ -299,7 +300,7 @@ const MapboxMap = ({ user }) => {
           }}
         />
         {/* Property Search Poly / No clue where this should go */}
-        {propertyCoordinates.length > 0 && (
+        {selectedProperty.length > 0 && (
           <PropertySearchPoly />
         )}
         {/*For displaying the property boundaries*/}

diff --git a/src/components/map/PropertySearchPoly.js b/src/components/map/PropertySearchPoly.js
@@ -5,44 +5,30 @@ import { setActiveProperty } from "../../actions/LandOwnershipActions";
 
 const PropertySearchPoly = () => {
   const dispatch = useDispatch();
-  const propertyCoordinates = useSelector(
-    (state) => state.propertySearchPoly.propertyCoordinates
-  );
-  const property = useSelector(
-    (state) => state.relatedProperties.selectedProperty
-  );
 
-  const coordinates = [
-    propertyCoordinates.map((coord) => [coord[1], coord[0]]),
-  ];
+  const { selectedProperty } = useSelector(state => state.relatedProperties)
+
+  console.log("prop", selectedProperty)
 
-  const handlePolygonClick = () => {
+  const handlePolygonClick = (property) => {
     dispatch(setActiveProperty(property.poly_id));
     console.log("Polygon clicked!", property.poly_id);
   };
-  const polygonLayer = (
-    <Feature
-      coordinates={coordinates}
-      key={property.poly_id}
-      onClick={handlePolygonClick}
-    />
-  );
 
-  useEffect(() => {
-    console.log(
-      "Property coordinates  exist!",
-      propertyCoordinates,
-      property.poly_id
-    );
-    console.log("Polygon Layer", polygonLayer);
-  }, [propertyCoordinates, property.poly_id]);
+  const polygonLayer = selectedProperty.map(property => <Feature
+    coordinates={[property[0].geom.coordinates[0].map((coord) => [coord[1], coord[0]])]}
+    key={property[0].poly_id}
+    onClick={() => handlePolygonClick(property[0])}
+  />)
 
   // Check if propertyCoordinates exist before rendering GeoJSONLayer
-  if (!propertyCoordinates || propertyCoordinates.length === 0) {
+  if (!selectedProperty || selectedProperty.length === 0) {
     console.log("Property coordinates do not exist!");
     return null;
   }
 
+  console.log(polygonLayer)
+
   return (
     <>
       <Layer

diff --git a/src/reducers/RelatedPropertiesReducer.js b/src/reducers/RelatedPropertiesReducer.js
@@ -44,7 +44,7 @@ export default (state = INITIAL_STATE, action) => {
     case "CLEAR_SELECTED_PROPERTY":
       propertyToClear = action.payload;
       selectedProperty = state.selectedProperty.filter(
-        (property) => property[0].poly_id !== propertyToClear
+        (property) => property[0].poly_id !== propertyToClear[0].poly_id
       );
       return {
         ...state,
@@ -73,7 +73,7 @@ export default (state = INITIAL_STATE, action) => {
         ...state,
         selectedProperty: [...state.selectedProperty, action.payload],
       };
-    case "CLEAR_SELECTED_PROPERTY":
+    case "CLEAR_ALL_SELECTED_PROPERTY":
       return {
         ...state,
         selectedProperty: [],