From 7b1caa608ad01e1ae869f401086438a94a388ab3 Mon Sep 17 00:00:00 2001 From: ms0ur1s Date: Mon, 27 Nov 2023 14:51:48 +0000 Subject: [PATCH 01/11] Updates PropertySearchPoly to Layer and Feature --- src/actions/LandOwnershipActions.js | 9 ++++ src/components/left-pane/RelatedProperties.js | 3 ++ src/components/map/PropertySearchPoly.js | 48 ++++++++----------- src/reducers/RelatedPropertiesReducer.js | 13 ++++- 4 files changed, 45 insertions(+), 28 deletions(-) diff --git a/src/actions/LandOwnershipActions.js b/src/actions/LandOwnershipActions.js index a33cdd3a..6a48d873 100644 --- a/src/actions/LandOwnershipActions.js +++ b/src/actions/LandOwnershipActions.js @@ -56,6 +56,15 @@ export const setProprietorName = (proprietorName) => { return { type: "SET_PROPRIETOR_NAME", payload: proprietorName, + } +}; + +export const setActivePropertyId = (propertyId) => { + return (dispatch) => { + dispatch({ + type: "SET_ACTIVE_PROPERTY_ID", + payload: propertyId, + }); }; }; diff --git a/src/components/left-pane/RelatedProperties.js b/src/components/left-pane/RelatedProperties.js index 4dc32b78..edbb1cee 100644 --- a/src/components/left-pane/RelatedProperties.js +++ b/src/components/left-pane/RelatedProperties.js @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { showPropertyPolygon } from "../../actions/LandOwnershipActions"; import { setLngLat } from "../../actions/MapActions"; +import { setActivePropertyId } from "../../actions/LandOwnershipActions"; const RelatedProperties = ({ property, isActive, onPropertyClick }) => { const dispatch = useDispatch(); @@ -12,6 +13,8 @@ const RelatedProperties = ({ property, isActive, onPropertyClick }) => { const handlePropertyClick = () => { onPropertyClick(); dispatch(showPropertyPolygon(property.geom.coordinates[0])); + // dispatch(setActiveProperty(property.poly_id)); + dispatch(setActivePropertyId(property.poly_id)); }; const gotoProperty = () => { diff --git a/src/components/map/PropertySearchPoly.js b/src/components/map/PropertySearchPoly.js index 12a9a839..435ff24a 100644 --- a/src/components/map/PropertySearchPoly.js +++ b/src/components/map/PropertySearchPoly.js @@ -1,38 +1,19 @@ import React, { useEffect } from "react"; import { useSelector } from "react-redux"; -import { GeoJSONLayer } from "react-mapbox-gl"; +import { GeoJSONLayer, Feature, Layer } from "react-mapbox-gl"; const PropertySearchPoly = ({ property }) => { const propertyCoordinates = useSelector( (state) => state.propertySearchPoly.propertyCoordinates ); - - const polyId = useSelector((state) => state.propertySearchPoly.polyId); - - const polygonData = { - geometry: { - coordinates: [propertyCoordinates.map((coord) => [coord[1], coord[0]])], //mapbox expects coords as lng,lat - type: "Polygon", - }, - id: polyId, - properties: {}, - type: "Feature", - }; + const polyId = useSelector( + (state) => state.relatedProperties.activePropertyId + ); + + const coordinates = [propertyCoordinates.map((coord) => [coord[1], coord[0]])]; const polygonLayer = ( - + ); useEffect(() => { @@ -46,7 +27,20 @@ const PropertySearchPoly = ({ property }) => { return null; } - return <>{polygonLayer}; + return ( + <> + + {polygonLayer} + + + ); }; export default PropertySearchPoly; diff --git a/src/reducers/RelatedPropertiesReducer.js b/src/reducers/RelatedPropertiesReducer.js index eb34c12a..de0aea58 100644 --- a/src/reducers/RelatedPropertiesReducer.js +++ b/src/reducers/RelatedPropertiesReducer.js @@ -3,6 +3,7 @@ const INITIAL_STATE = { error: null, loading: false, proprietorName: null, + activePropertyId: null, }; export default (state = INITIAL_STATE, action) => { @@ -45,7 +46,17 @@ export default (state = INITIAL_STATE, action) => { return { ...state, properties: [], - proprietorName: null, + proprietorName: null + }; + case "SET_ACTIVE_PROPERTY_ID": + return { + ...state, + activePropertyId: action.payload, + }; + case "CLEAR_ACTIVE_PROPERTY_ID": + return { + ...state, + activePropertyId: null, }; default: return state; From 4866a9b14cb9a8e2555d635e06ad6f93fe8f0bbf Mon Sep 17 00:00:00 2001 From: ms0ur1s Date: Mon, 27 Nov 2023 15:20:26 +0000 Subject: [PATCH 02/11] property object added to state on selected property click --- src/actions/LandOwnershipActions.js | 8 ++++--- src/components/left-pane/RelatedProperties.js | 7 +++--- src/components/map/PropertySearchPoly.js | 24 ++++++++++++------- src/reducers/RelatedPropertiesReducer.js | 9 ++++--- src/reducers/ShowPropertyPolyReducer.js | 2 -- 5 files changed, 29 insertions(+), 21 deletions(-) diff --git a/src/actions/LandOwnershipActions.js b/src/actions/LandOwnershipActions.js index 6a48d873..fb8a9d65 100644 --- a/src/actions/LandOwnershipActions.js +++ b/src/actions/LandOwnershipActions.js @@ -59,11 +59,13 @@ export const setProprietorName = (proprietorName) => { } }; -export const setActivePropertyId = (propertyId) => { +export const setActivePropertyId = (propertyId) => { } + +export const setSelectedProperty = (property) => { return (dispatch) => { dispatch({ - type: "SET_ACTIVE_PROPERTY_ID", - payload: propertyId, + type: "SET_SELECTED_PROPERTY", + payload: property, }); }; }; diff --git a/src/components/left-pane/RelatedProperties.js b/src/components/left-pane/RelatedProperties.js index edbb1cee..6ec3eb84 100644 --- a/src/components/left-pane/RelatedProperties.js +++ b/src/components/left-pane/RelatedProperties.js @@ -1,8 +1,7 @@ import React, { useState } from "react"; import { useDispatch } from "react-redux"; -import { showPropertyPolygon } from "../../actions/LandOwnershipActions"; +import { setSelectedProperty, showPropertyPolygon } from "../../actions/LandOwnershipActions"; import { setLngLat } from "../../actions/MapActions"; -import { setActivePropertyId } from "../../actions/LandOwnershipActions"; const RelatedProperties = ({ property, isActive, onPropertyClick }) => { const dispatch = useDispatch(); @@ -13,8 +12,8 @@ const RelatedProperties = ({ property, isActive, onPropertyClick }) => { const handlePropertyClick = () => { onPropertyClick(); dispatch(showPropertyPolygon(property.geom.coordinates[0])); - // dispatch(setActiveProperty(property.poly_id)); - dispatch(setActivePropertyId(property.poly_id)); + dispatch(setSelectedProperty(property)); + console.log("Selected Property", property); }; const gotoProperty = () => { diff --git a/src/components/map/PropertySearchPoly.js b/src/components/map/PropertySearchPoly.js index 435ff24a..b9e1cb29 100644 --- a/src/components/map/PropertySearchPoly.js +++ b/src/components/map/PropertySearchPoly.js @@ -1,25 +1,31 @@ import React, { useEffect } from "react"; import { useSelector } from "react-redux"; -import { GeoJSONLayer, Feature, Layer } from "react-mapbox-gl"; +import { Feature, Layer } from "react-mapbox-gl"; -const PropertySearchPoly = ({ property }) => { +const PropertySearchPoly = () => { const propertyCoordinates = useSelector( (state) => state.propertySearchPoly.propertyCoordinates ); - const polyId = useSelector( - (state) => state.relatedProperties.activePropertyId + const property = useSelector( + (state) => state.relatedProperties.selectedProperty ); - - const coordinates = [propertyCoordinates.map((coord) => [coord[1], coord[0]])]; + + const coordinates = [ + propertyCoordinates.map((coord) => [coord[1], coord[0]]), + ]; const polygonLayer = ( - + ); useEffect(() => { - console.log("Property coordinates exist!", propertyCoordinates, polyId); + console.log( + "Property coordinates exist!", + propertyCoordinates, + property.poly_id + ); console.log("Polygon Layer", polygonLayer); - }, [propertyCoordinates, polyId]); + }, [propertyCoordinates, property.poly_id]); // Check if propertyCoordinates exist before rendering GeoJSONLayer if (!propertyCoordinates || propertyCoordinates.length === 0) { diff --git a/src/reducers/RelatedPropertiesReducer.js b/src/reducers/RelatedPropertiesReducer.js index de0aea58..1e3cc057 100644 --- a/src/reducers/RelatedPropertiesReducer.js +++ b/src/reducers/RelatedPropertiesReducer.js @@ -4,6 +4,7 @@ const INITIAL_STATE = { loading: false, proprietorName: null, activePropertyId: null, + selectedProperty: null, }; export default (state = INITIAL_STATE, action) => { @@ -49,14 +50,16 @@ export default (state = INITIAL_STATE, action) => { proprietorName: null }; case "SET_ACTIVE_PROPERTY_ID": + return INITIAL_STATE; + case "SET_SELECTED_PROPERTY": return { ...state, - activePropertyId: action.payload, + selectedProperty: action.payload, }; - case "CLEAR_ACTIVE_PROPERTY_ID": + case "CLEAR_SELECTED_PROPERTY": return { ...state, - activePropertyId: null, + selectedProperty: null, }; default: return state; diff --git a/src/reducers/ShowPropertyPolyReducer.js b/src/reducers/ShowPropertyPolyReducer.js index 0dcb402a..e0984131 100644 --- a/src/reducers/ShowPropertyPolyReducer.js +++ b/src/reducers/ShowPropertyPolyReducer.js @@ -1,6 +1,5 @@ const INITIAL_STATE = { propertyCoordinates: [], - polyId: null, }; export default (state = INITIAL_STATE, action) => { @@ -9,7 +8,6 @@ export default (state = INITIAL_STATE, action) => { return { ...state, propertyCoordinates: action.payload, - polyId: action.payload.poly_id, }; default: return state; From 54d0d21f7dfcb1a359850004e166ea5d48d20464 Mon Sep 17 00:00:00 2001 From: ms0ur1s Date: Mon, 27 Nov 2023 15:47:18 +0000 Subject: [PATCH 03/11] click event added to poly --- src/components/map/MapProperties.js | 150 +++++++++++++---------- src/components/map/PropertySearchPoly.js | 14 ++- src/reducers/RelatedPropertiesReducer.js | 4 +- 3 files changed, 100 insertions(+), 68 deletions(-) diff --git a/src/components/map/MapProperties.js b/src/components/map/MapProperties.js index 7fd8953e..91e1c3e2 100644 --- a/src/components/map/MapProperties.js +++ b/src/components/map/MapProperties.js @@ -1,24 +1,35 @@ import React, { useState, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; -import { Layer, Feature } from 'react-mapbox-gl'; +import { Layer, Feature } from "react-mapbox-gl"; import axios from "axios"; import constants from "../../constants"; import { getAuthHeader } from "../../utils/Auth"; import LoadingData from "./LoadingData"; -import { highlightProperty, setActiveProperty } from "../../actions/LandOwnershipActions"; +import { + highlightProperty, + setActiveProperty, +} from "../../actions/LandOwnershipActions"; const MapProperties = ({ center, map }) => { const [properties, setProperties] = useState([]); const [loadingProperties, setLoadingProperties] = useState(false); - const displayActive = useSelector(state => state.landOwnership.displayActive); - const zoom = useSelector(state => state.map.zoom); - const highlightedProperties = useSelector(state => state.landOwnership.highlightedProperties); - const activePropertyId = useSelector(state => state.landOwnership.activePropertyId); - const activeProperty = activePropertyId !== null ? highlightedProperties.find(p => p.poly_id === activePropertyId) : null; - + const displayActive = useSelector( + (state) => state.landOwnership.displayActive + ); + const zoom = useSelector((state) => state.map.zoom); + const highlightedProperties = useSelector( + (state) => state.landOwnership.highlightedProperties + ); + const activePropertyId = useSelector( + (state) => state.landOwnership.activePropertyId + ); + const activeProperty = + activePropertyId !== null + ? highlightedProperties.find((p) => p.poly_id === activePropertyId) + : null; - const activePanel = useSelector(state => state.leftPane.active); + const activePanel = useSelector((state) => state.leftPane.active); const dispatch = useDispatch(); @@ -27,9 +38,8 @@ const MapProperties = ({ center, map }) => { setLoadingProperties(true); - const response = await axios - .get( - `${constants.ROOT_URL}/api/ownership?sw_lng=` + + const response = await axios.get( + `${constants.ROOT_URL}/api/ownership?sw_lng=` + mapBoundaries._sw.lng + "&sw_lat=" + mapBoundaries._sw.lat + @@ -37,82 +47,93 @@ const MapProperties = ({ center, map }) => { mapBoundaries._ne.lng + "&ne_lat=" + mapBoundaries._ne.lat, - getAuthHeader() - ); + getAuthHeader() + ); const newProperties = response.data.map((property) => ({ ...property, - coordinates: property.geom.coordinates[0].map(coordinate => coordinate.reverse()) //mapbox wants [lng,lat] but db gives [lat,lng] + coordinates: property.geom.coordinates[0].map((coordinate) => + coordinate.reverse() + ), //mapbox wants [lng,lat] but db gives [lat,lng] })); - if (newProperties.length > 0) - setProperties(newProperties); + if (newProperties.length > 0) setProperties(newProperties); setLoadingProperties(false); - } + }; useEffect(() => { if (displayActive && zoom >= constants.PROPERTY_BOUNDARIES_ZOOM_LEVEL) getProperties(); - }, [center, map, zoom, displayActive]) + }, [center, map, zoom, displayActive]); const onClickNewProperty = (property) => { - if (activePanel !== 'Drawing Tools') { + if (activePanel !== "Drawing Tools") { dispatch(highlightProperty(property)); } - } + }; const onClickHighlightedProperty = (property) => { - if (activePanel !== 'Drawing Tools') { + if (activePanel !== "Drawing Tools") { dispatch(setActiveProperty(property.poly_id)); } - } + }; const detailedPropertyFeatures = []; const basicPropertyFeatures = []; - properties.forEach(property => { + properties.forEach((property) => { if (property.date_proprietor_added) - detailedPropertyFeatures.push( onClickNewProperty(property)} - />) + detailedPropertyFeatures.push( + onClickNewProperty(property)} + /> + ); else - basicPropertyFeatures.push( onClickNewProperty(property)} - />) + basicPropertyFeatures.push( + onClickNewProperty(property)} + /> + ); }); - const highlightedPropertyFeatures = highlightedProperties.map(highlightedProperty => - onClickHighlightedProperty(highlightedProperty)} - /> + const highlightedPropertyFeatures = highlightedProperties.map( + (highlightedProperty) => ( + onClickHighlightedProperty(highlightedProperty)} + /> + ) ); // Add another polygon for the active property so it appears darker if (activeProperty) { - highlightedPropertyFeatures.push(); + highlightedPropertyFeatures.push( + + ); } - return <> - { - displayActive && zoom >= constants.PROPERTY_BOUNDARIES_ZOOM_LEVEL && ( + return ( + <> + {displayActive && zoom >= constants.PROPERTY_BOUNDARIES_ZOOM_LEVEL && ( <> - {loadingProperties && } + {loadingProperties && ( + + )} {detailedPropertyFeatures} @@ -121,24 +142,25 @@ const MapProperties = ({ center, map }) => { type={"fill"} paint={{ "fill-opacity": 0.15, - "fill-color": 'orange', - "fill-outline-color": 'green', + "fill-color": "orange", + "fill-outline-color": "green", }} > {basicPropertyFeatures} - ) - } - - {highlightedPropertyFeatures} - - ; -} + )} + + {highlightedPropertyFeatures} + + + ); +}; export default MapProperties; diff --git a/src/components/map/PropertySearchPoly.js b/src/components/map/PropertySearchPoly.js index b9e1cb29..724e4f0c 100644 --- a/src/components/map/PropertySearchPoly.js +++ b/src/components/map/PropertySearchPoly.js @@ -1,8 +1,10 @@ import React, { useEffect } from "react"; -import { useSelector } from "react-redux"; +import { useSelector, useDispatch } from "react-redux"; import { Feature, Layer } from "react-mapbox-gl"; +import { setActiveProperty } from "../../actions/LandOwnershipActions"; const PropertySearchPoly = () => { + const dispatch = useDispatch(); const propertyCoordinates = useSelector( (state) => state.propertySearchPoly.propertyCoordinates ); @@ -14,8 +16,16 @@ const PropertySearchPoly = () => { propertyCoordinates.map((coord) => [coord[1], coord[0]]), ]; + const handlePolygonClick = () => { + dispatch(setActiveProperty(property.poly_id)); + console.log("Polygon clicked!", property.poly_id); + }; const polygonLayer = ( - + ); useEffect(() => { diff --git a/src/reducers/RelatedPropertiesReducer.js b/src/reducers/RelatedPropertiesReducer.js index 1e3cc057..e60e09c7 100644 --- a/src/reducers/RelatedPropertiesReducer.js +++ b/src/reducers/RelatedPropertiesReducer.js @@ -4,7 +4,7 @@ const INITIAL_STATE = { loading: false, proprietorName: null, activePropertyId: null, - selectedProperty: null, + selectedProperty: [], }; export default (state = INITIAL_STATE, action) => { @@ -59,7 +59,7 @@ export default (state = INITIAL_STATE, action) => { case "CLEAR_SELECTED_PROPERTY": return { ...state, - selectedProperty: null, + selectedProperty: [], }; default: return state; From 531ab60e2f970428e5b2ccde4a12bc23f2dddf01 Mon Sep 17 00:00:00 2001 From: ms0ur1s Date: Mon, 27 Nov 2023 16:49:11 +0000 Subject: [PATCH 04/11] selectProperty opens in info panel --- src/components/left-pane/LeftPaneInfo.js | 13 ++++++++++++- src/components/left-pane/RelatedProperties.js | 2 +- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/left-pane/LeftPaneInfo.js b/src/components/left-pane/LeftPaneInfo.js index a2566974..480d06a7 100644 --- a/src/components/left-pane/LeftPaneInfo.js +++ b/src/components/left-pane/LeftPaneInfo.js @@ -11,10 +11,18 @@ const LeftPaneInfo = ({ onClose, open }) => { const properties = useSelector( (state) => state.landOwnership.highlightedProperties ); + const selectedProperties = useSelector( + (state) => state.relatedProperties.selectedProperty + ); + + console.log("LeftPaneInfo", properties, selectedProperties); return ( - {polygons.length || markers.length || properties.length ? ( + {polygons.length || + markers.length || + properties.length || + selectedProperties.length > 0 ? ( <> {markers.map((marker, i) => ( @@ -25,6 +33,9 @@ const LeftPaneInfo = ({ onClose, open }) => { {properties.map((property, i) => ( ))} + {selectedProperties.map((property, i) => ( + + ))} ) : (
{ const handlePropertyClick = () => { onPropertyClick(); dispatch(showPropertyPolygon(property.geom.coordinates[0])); - dispatch(setSelectedProperty(property)); + dispatch(setSelectedProperty([property])); console.log("Selected Property", property); }; From d4ef63eacd0b3f6a7246aa9ca1a9afa793e47e81 Mon Sep 17 00:00:00 2001 From: ms0ur1s Date: Tue, 28 Nov 2023 16:07:24 +0000 Subject: [PATCH 05/11] multiple properties selectable, selected properties display in info panel --- src/components/left-pane/LeftPaneInfo.js | 3 +- .../left-pane/LeftPaneRelatedProperties.js | 15 +- src/components/left-pane/PropertySection.js | 1 + src/components/left-pane/RelatedProperties.js | 14 +- .../left-pane/RelatedPropertySection.js | 191 ++++++++++++++++++ src/reducers/RelatedPropertiesReducer.js | 13 +- 6 files changed, 226 insertions(+), 11 deletions(-) create mode 100644 src/components/left-pane/RelatedPropertySection.js diff --git a/src/components/left-pane/LeftPaneInfo.js b/src/components/left-pane/LeftPaneInfo.js index 480d06a7..74d9288c 100644 --- a/src/components/left-pane/LeftPaneInfo.js +++ b/src/components/left-pane/LeftPaneInfo.js @@ -4,6 +4,7 @@ import LeftPaneTray from "./LeftPaneTray"; import MarkerSection from "./MarkerSection"; import PolygonSection from "./PolygonSection"; import PropertySection from "./PropertySection"; +import RelatedPropertySection from "./RelatedPropertySection"; const LeftPaneInfo = ({ onClose, open }) => { const markers = useSelector((state) => state.markers.markers); @@ -34,7 +35,7 @@ const LeftPaneInfo = ({ onClose, open }) => { ))} {selectedProperties.map((property, i) => ( - + ))} ) : ( diff --git a/src/components/left-pane/LeftPaneRelatedProperties.js b/src/components/left-pane/LeftPaneRelatedProperties.js index dec02c5c..758dbb2b 100644 --- a/src/components/left-pane/LeftPaneRelatedProperties.js +++ b/src/components/left-pane/LeftPaneRelatedProperties.js @@ -12,7 +12,9 @@ const LeftPaneRelatedProperties = ({ onClose, open, itemsPerPage }) => { // Set loading state const loading = useSelector((state) => state.relatedProperties.loading); - const [activeProperty, setActiveProperty] = useState(null); + // Move to nested component - to allow multiple properties to be selected + // const [activeProperty, setActiveProperty] = useState(null); + // Use a Set to store unique properties const uniqueProperties = new Set(); @@ -36,10 +38,11 @@ const LeftPaneRelatedProperties = ({ onClose, open, itemsPerPage }) => { indexOfLastProperty ); + // Remove this function and move to nested component // Pass down the active property to the RelatedProperties component - const handlePropertyClick = (property) => { - setActiveProperty(property); - }; + // const handlePropertyClick = (property) => { + // setActiveProperty(property); + // }; return ( @@ -65,8 +68,8 @@ const LeftPaneRelatedProperties = ({ onClose, open, itemsPerPage }) => { handlePropertyClick(property)} + // isActive={property === activeProperty} + // onPropertyClick={() => handlePropertyClick(property)} /> ))} {noOfPages > 1 && ( diff --git a/src/components/left-pane/PropertySection.js b/src/components/left-pane/PropertySection.js index 366f6d90..d93ecacc 100644 --- a/src/components/left-pane/PropertySection.js +++ b/src/components/left-pane/PropertySection.js @@ -49,6 +49,7 @@ const PropertySection = ({ property, active }) => { dispatch({ type: "CLEAR_PROPERTIES_AND_PROPRIETOR_NAME" }); } }; + console.log("PropertySection", property, [title_no]); return (
diff --git a/src/components/left-pane/RelatedProperties.js b/src/components/left-pane/RelatedProperties.js index 7bbe4ddb..61109d1a 100644 --- a/src/components/left-pane/RelatedProperties.js +++ b/src/components/left-pane/RelatedProperties.js @@ -1,19 +1,27 @@ import React, { useState } from "react"; import { useDispatch } from "react-redux"; -import { setSelectedProperty, showPropertyPolygon } from "../../actions/LandOwnershipActions"; +import { + setSelectedProperty, + showPropertyPolygon, +} from "../../actions/LandOwnershipActions"; import { setLngLat } from "../../actions/MapActions"; -const RelatedProperties = ({ property, isActive, onPropertyClick }) => { +const RelatedProperties = ({ property }) => { + // const RelatedProperties = ({ property, isActive, onPropertyClick }) => { const dispatch = useDispatch(); + const [active, setActive] = useState(false); const lng = property.geom.coordinates[0][0][1]; const lat = property.geom.coordinates[0][0][0]; const handlePropertyClick = () => { - onPropertyClick(); + // onPropertyClick(); + // dispatch(setLngLat(lng, lat)); dispatch(showPropertyPolygon(property.geom.coordinates[0])); dispatch(setSelectedProperty([property])); + setActive(!active); console.log("Selected Property", property); + console.log("Active", active); }; const gotoProperty = () => { diff --git a/src/components/left-pane/RelatedPropertySection.js b/src/components/left-pane/RelatedPropertySection.js new file mode 100644 index 00000000..092f6b6a --- /dev/null +++ b/src/components/left-pane/RelatedPropertySection.js @@ -0,0 +1,191 @@ +import React from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { setActiveProperty } from "../../actions/LandOwnershipActions"; +import Button from "../common/Button"; +import { getRelatedProperties } from "../../actions/LandOwnershipActions"; + +const RelatedPropertySection = ({ property, active }) => { + const dispatch = useDispatch(); + const activePropertyId = useSelector( + (state) => state.landOwnership.activePropertyId + ); + + const { + poly_id, + title_no, + proprietor_category_1, + property_address, + proprietor_name_1, + proprietor_1_address_1, + tenure, + date_proprietor_added, + } = property[0]; + + const open = poly_id === activePropertyId; + + const openTray = (tray) => { + active === tray + ? dispatch({ type: "CLOSE_TRAY" }) + : dispatch({ type: "SET_ACTIVE", payload: tray }); + }; + + const handleSearch = () => { + dispatch({ type: "CLEAR_PROPERTIES" }); + dispatch(getRelatedProperties(proprietor_name_1)); + openTray("Ownership Search"); + }; + + console.log("PropertySection", property[0]); + + return ( +
+
{ + if (open) { + dispatch({ type: "CLEAR_ACTIVE_PROPERTY" }); + } else { + dispatch(setActiveProperty(poly_id)); + } + }} + > +

+ Related Property {poly_id} +

+
+ +
+
+ {open && ( +
+ {proprietor_category_1 && ( + <> +
{property_address}
+
+
+ Proprietor Name: +
+
+ {proprietor_name_1} +
+
+
+
+ Proprietor Address: +
+
+ {proprietor_1_address_1} +
+
+
+
+
+ Proprietor Category: +
+
+ {proprietor_category_1} +
+
+
+
Tenure:
+
+ {tenure} +
+
+
+
+ Date Proprietor Added: +
+
+ {date_proprietor_added} +
+
+
+ + )} +
+
+
+ INSPIRE ID: +
+
{poly_id}
+
+
+
+ Title Number: +
+
{title_no}
+
+
+

+ You can access these documents for a small fee by visiting the{" "} + + Land Registry website + {" "} + using the above IDs. +

+
+
+ +
+ +
+
+ +
+
+ )} +
+ ); +}; + +export default RelatedPropertySection; diff --git a/src/reducers/RelatedPropertiesReducer.js b/src/reducers/RelatedPropertiesReducer.js index e60e09c7..1fbc8919 100644 --- a/src/reducers/RelatedPropertiesReducer.js +++ b/src/reducers/RelatedPropertiesReducer.js @@ -7,6 +7,9 @@ const INITIAL_STATE = { selectedProperty: [], }; +let propertyToAdd; +let selectedProperty; + export default (state = INITIAL_STATE, action) => { switch (action.type) { case "FETCH_PROPERTIES_SUCCESS": @@ -52,9 +55,17 @@ export default (state = INITIAL_STATE, action) => { case "SET_ACTIVE_PROPERTY_ID": return INITIAL_STATE; case "SET_SELECTED_PROPERTY": + // propertyToAdd = action.payload; + // if (!state.selectedProperty.some((p) => p.poly_id === propertyToAdd.poly_id)) { + // selectedProperty = state.selectedProperty.concat([propertyToAdd]); + // } + // return { + // ...state, + // selectedProperty, + // }; return { ...state, - selectedProperty: action.payload, + selectedProperty: [...state.selectedProperty, action.payload], }; case "CLEAR_SELECTED_PROPERTY": return { From 3fae9b6aaa006a1e28494ecad4f6a68351d815f0 Mon Sep 17 00:00:00 2001 From: ms0ur1s Date: Tue, 28 Nov 2023 16:08:01 +0000 Subject: [PATCH 06/11] additions to previous commit --- src/components/left-pane/PropertySection.js | 1 + src/components/left-pane/RelatedPropertySection.js | 2 +- src/reducers/RelatedPropertiesReducer.js | 11 ----------- 3 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/components/left-pane/PropertySection.js b/src/components/left-pane/PropertySection.js index d93ecacc..86e6b475 100644 --- a/src/components/left-pane/PropertySection.js +++ b/src/components/left-pane/PropertySection.js @@ -50,6 +50,7 @@ const PropertySection = ({ property, active }) => { } }; console.log("PropertySection", property, [title_no]); + console.log("PropertySection", property); return (
diff --git a/src/components/left-pane/RelatedPropertySection.js b/src/components/left-pane/RelatedPropertySection.js index 092f6b6a..356b5dc3 100644 --- a/src/components/left-pane/RelatedPropertySection.js +++ b/src/components/left-pane/RelatedPropertySection.js @@ -35,7 +35,7 @@ const RelatedPropertySection = ({ property, active }) => { openTray("Ownership Search"); }; - console.log("PropertySection", property[0]); + console.log("RelatedPropertySection", property[0]); return (
diff --git a/src/reducers/RelatedPropertiesReducer.js b/src/reducers/RelatedPropertiesReducer.js index 1fbc8919..0c5c03b0 100644 --- a/src/reducers/RelatedPropertiesReducer.js +++ b/src/reducers/RelatedPropertiesReducer.js @@ -7,9 +7,6 @@ const INITIAL_STATE = { selectedProperty: [], }; -let propertyToAdd; -let selectedProperty; - export default (state = INITIAL_STATE, action) => { switch (action.type) { case "FETCH_PROPERTIES_SUCCESS": @@ -55,14 +52,6 @@ export default (state = INITIAL_STATE, action) => { case "SET_ACTIVE_PROPERTY_ID": return INITIAL_STATE; case "SET_SELECTED_PROPERTY": - // propertyToAdd = action.payload; - // if (!state.selectedProperty.some((p) => p.poly_id === propertyToAdd.poly_id)) { - // selectedProperty = state.selectedProperty.concat([propertyToAdd]); - // } - // return { - // ...state, - // selectedProperty, - // }; return { ...state, selectedProperty: [...state.selectedProperty, action.payload], From cc1ccbc56cd3bb3b726745ba9cbdfcd8317bbe24 Mon Sep 17 00:00:00 2001 From: ms0ur1s Date: Tue, 28 Nov 2023 19:08:19 +0000 Subject: [PATCH 07/11] remove related cleared property from selectedProperties --- src/components/left-pane/PropertySection.js | 1 + src/components/left-pane/RelatedProperties.js | 7 ++++++- .../left-pane/RelatedPropertySection.js | 14 ++++++++++++++ src/reducers/RelatedPropertiesReducer.js | 17 +++++++++++++++++ 4 files changed, 38 insertions(+), 1 deletion(-) diff --git a/src/components/left-pane/PropertySection.js b/src/components/left-pane/PropertySection.js index 86e6b475..505d6262 100644 --- a/src/components/left-pane/PropertySection.js +++ b/src/components/left-pane/PropertySection.js @@ -48,6 +48,7 @@ const PropertySection = ({ property, active }) => { if (property.proprietor_name_1 === proprietorName) { dispatch({ type: "CLEAR_PROPERTIES_AND_PROPRIETOR_NAME" }); } + console.log("handleClear Property", property); }; console.log("PropertySection", property, [title_no]); console.log("PropertySection", property); diff --git a/src/components/left-pane/RelatedProperties.js b/src/components/left-pane/RelatedProperties.js index 61109d1a..25a112b5 100644 --- a/src/components/left-pane/RelatedProperties.js +++ b/src/components/left-pane/RelatedProperties.js @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { useDispatch } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { setSelectedProperty, showPropertyPolygon, @@ -11,6 +11,10 @@ const RelatedProperties = ({ property }) => { const dispatch = useDispatch(); const [active, setActive] = useState(false); + const activePropertyId = useSelector( + (state) => state.landOwnership.activePropertyId + ); + const lng = property.geom.coordinates[0][0][1]; const lat = property.geom.coordinates[0][0][0]; @@ -22,6 +26,7 @@ const RelatedProperties = ({ property }) => { setActive(!active); console.log("Selected Property", property); console.log("Active", active); + console.log("Active Property Id", activePropertyId); }; const gotoProperty = () => { diff --git a/src/components/left-pane/RelatedPropertySection.js b/src/components/left-pane/RelatedPropertySection.js index 356b5dc3..220ca58d 100644 --- a/src/components/left-pane/RelatedPropertySection.js +++ b/src/components/left-pane/RelatedPropertySection.js @@ -36,6 +36,20 @@ const RelatedPropertySection = ({ property, active }) => { }; 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 + // if (property.proprietor_name_1 === proprietorName) { + // dispatch({ type: "CLEAR_PROPERTIES_AND_PROPRIETOR_NAME" }); + // } + dispatch({ + type: "CLEAR_SELECTED_PROPERTY", + payload: activePropertyId, + }); + console.log("handleClear RelatedProperty", property[0]); + }; + + console.log("RelatedPropertySection", property[0], activePropertyId); return (
diff --git a/src/reducers/RelatedPropertiesReducer.js b/src/reducers/RelatedPropertiesReducer.js index 0c5c03b0..73d21074 100644 --- a/src/reducers/RelatedPropertiesReducer.js +++ b/src/reducers/RelatedPropertiesReducer.js @@ -7,6 +7,9 @@ const INITIAL_STATE = { selectedProperty: [], }; +let propertyToClear; +let selectedProperty; + export default (state = INITIAL_STATE, action) => { switch (action.type) { case "FETCH_PROPERTIES_SUCCESS": @@ -33,6 +36,20 @@ export default (state = INITIAL_STATE, action) => { ...state, properties: [], }; + case "SET_SELECTED_PROPERTY": + return { + ...state, + selectedProperty: [...state.selectedProperty, action.payload], + }; + case "CLEAR_SELECTED_PROPERTY": + propertyToClear = action.payload; + selectedProperty = state.selectedProperty.filter( + (property) => property[0].poly_id !== propertyToClear + ); + return { + ...state, + selectedProperty, + }; case "SET_PROPRIETOR_NAME": return { ...state, From 00a9aea0f673ef4948b5e8f5282d23ad0546b127 Mon Sep 17 00:00:00 2001 From: John Evans <38507954+King-Mob@users.noreply.github.com> Date: Wed, 29 Nov 2023 14:31:39 +0000 Subject: [PATCH 08/11] add multiple property selection --- src/actions/LandOwnershipActions.js | 9 +++++ src/components/left-pane/LeftPaneInfo.js | 7 ++-- src/components/left-pane/PropertySection.js | 3 +- src/components/left-pane/RelatedProperties.js | 23 ++++++++--- .../left-pane/RelatedPropertySection.js | 2 - src/components/map/MapboxMap.js | 7 ++-- src/components/map/PropertySearchPoly.js | 38 ++++++------------- src/reducers/RelatedPropertiesReducer.js | 4 +- 8 files changed, 49 insertions(+), 44 deletions(-) diff --git a/src/actions/LandOwnershipActions.js b/src/actions/LandOwnershipActions.js index fb8a9d65..7b357af5 100644 --- 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 index 74d9288c..e59a2913 100644 --- 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 ( {polygons.length || - markers.length || - properties.length || - selectedProperties.length > 0 ? ( + markers.length || + properties.length || + selectedProperties.length > 0 ? ( <> {markers.map((marker, i) => ( diff --git a/src/components/left-pane/PropertySection.js b/src/components/left-pane/PropertySection.js index 505d6262..167b57d9 100644 --- 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 (
diff --git a/src/components/left-pane/RelatedProperties.js b/src/components/left-pane/RelatedProperties.js index 25a112b5..060f23f0 100644 --- 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,6 +15,7 @@ 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]; @@ -21,12 +23,23 @@ const RelatedProperties = ({ property }) => { 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); }; const gotoProperty = () => { diff --git a/src/components/left-pane/RelatedPropertySection.js b/src/components/left-pane/RelatedPropertySection.js index 220ca58d..ed1d9b0d 100644 --- 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 (
diff --git a/src/components/map/MapboxMap.js b/src/components/map/MapboxMap.js index acc98869..de2ccf42 100644 --- 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 && ( )} {/*For displaying the property boundaries*/} diff --git a/src/components/map/PropertySearchPoly.js b/src/components/map/PropertySearchPoly.js index 724e4f0c..4eef57f0 100644 --- 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 = ( - - ); - useEffect(() => { - console.log( - "Property coordinates exist!", - propertyCoordinates, - property.poly_id - ); - console.log("Polygon Layer", polygonLayer); - }, [propertyCoordinates, property.poly_id]); + const polygonLayer = selectedProperty.map(property => [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 ( <> { 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: [], From 2442e7862d569f136361d9bf7b0c100826ad924b Mon Sep 17 00:00:00 2001 From: John Evans <38507954+King-Mob@users.noreply.github.com> Date: Wed, 29 Nov 2023 14:41:12 +0000 Subject: [PATCH 09/11] remove console logs --- src/components/left-pane/RelatedProperties.js | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/components/left-pane/RelatedProperties.js b/src/components/left-pane/RelatedProperties.js index 060f23f0..93c3c2a4 100644 --- a/src/components/left-pane/RelatedProperties.js +++ b/src/components/left-pane/RelatedProperties.js @@ -2,7 +2,6 @@ import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { setSelectedProperty, - showPropertyPolygon, clearSelectedProperty } from "../../actions/LandOwnershipActions"; import { setLngLat } from "../../actions/MapActions"; @@ -11,23 +10,12 @@ const RelatedProperties = ({ property }) => { // const RelatedProperties = ({ property, isActive, onPropertyClick }) => { const dispatch = useDispatch(); const [active, setActive] = useState(false); - - 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])); - 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])); @@ -36,10 +24,6 @@ const RelatedProperties = ({ property }) => { dispatch(setSelectedProperty([property])); setActive(!active); - - //console.log("Selected Property", property); - //console.log("Active", active); - //console.log("Active Property Id", activePropertyId); }; const gotoProperty = () => { @@ -47,7 +31,7 @@ const RelatedProperties = ({ property }) => { } return
From bd94515ba47fd10160470908a60bda43bfca5f92 Mon Sep 17 00:00:00 2001 From: John Evans <38507954+King-Mob@users.noreply.github.com> Date: Wed, 29 Nov 2023 14:42:46 +0000 Subject: [PATCH 10/11] remove comment --- src/components/left-pane/RelatedProperties.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/left-pane/RelatedProperties.js b/src/components/left-pane/RelatedProperties.js index 93c3c2a4..878433ff 100644 --- a/src/components/left-pane/RelatedProperties.js +++ b/src/components/left-pane/RelatedProperties.js @@ -7,7 +7,6 @@ import { import { setLngLat } from "../../actions/MapActions"; const RelatedProperties = ({ property }) => { - // const RelatedProperties = ({ property, isActive, onPropertyClick }) => { const dispatch = useDispatch(); const [active, setActive] = useState(false); const { selectedProperty } = useSelector(state => state.relatedProperties); From 5c07a1a30a4539780ad4109141fc2a0ecfad5e94 Mon Sep 17 00:00:00 2001 From: John Evans <38507954+King-Mob@users.noreply.github.com> Date: Wed, 29 Nov 2023 14:50:15 +0000 Subject: [PATCH 11/11] move the arrow to just turning it on --- src/components/left-pane/RelatedProperties.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/left-pane/RelatedProperties.js b/src/components/left-pane/RelatedProperties.js index 878433ff..178e435c 100644 --- a/src/components/left-pane/RelatedProperties.js +++ b/src/components/left-pane/RelatedProperties.js @@ -15,10 +15,10 @@ const RelatedProperties = ({ property }) => { const lat = property.geom.coordinates[0][0][0]; const handlePropertyClick = () => { - if (selectedProperty.find(item => item[0].id === property.id)) { - console.log("clearing the property"); + const propertyIsSelected = selectedProperty.find(item => item[0].id === property.id); + + if (propertyIsSelected) dispatch(clearSelectedProperty([property])); - } else dispatch(setSelectedProperty([property])); @@ -32,9 +32,8 @@ const RelatedProperties = ({ property }) => { return
- + { /> -
+

{property.property_address}