Merge pull request #276 from DigitalCommons/265-clear-all-info-panel

add clear all button

src/actions/LandOwnershipActions.js

@@ -10,6 +10,14 @@ export const highlightProperty = (property) => {
   };
 };
 
+export const clearAllHighlightedProperties = () => {
+  return (dispatch) => {
+    dispatch({
+      type: "CLEAR_ALL_HIGHLIGHTED_PROPERTIES"
+    })
+  }
+}
+
 export const setActiveProperty = (propertyId) => {
   return (dispatch) => {
     dispatch({
@@ -79,6 +87,14 @@ export const clearSelectedProperty = (property) => {
   }
 }
 
+export const clearAllSelectedProperties = () => {
+  return (dispatch) => {
+    dispatch({
+      type: "CLEAR_ALL_SELECTED_PROPERTIES"
+    })
+  }
+}
+
 export const showPropertyPolygon = (propertyCoordinates) => {
   return (dispatch) => {
     dispatch({

src/assets/styles/_left-pane.scss

@@ -381,3 +381,14 @@ a.mapboxgl-ctrl-logo {
     width: 286px;
   }
 }
+
+.clear-all{
+  text-decoration: underline;
+  margin: 10px 20px;
+  font-size: 14px;
+  color: $blueAccent;
+}
+
+.clear-all:hover{
+  cursor: pointer;
+}

src/assets/styles/_variables.scss

@@ -37,6 +37,7 @@ $iphone6plus_l: "(min-device-width: 414px) and (max-device-width: 736px) and (-w
 $primaryColor: #27ae60;
 $secondaryColor: #78838f;
 $buttonGreen: #2ecc71;
+$blueAccent: #4a7abe;
 
 $toolbarBackground: #fbfbfb;
 $toolbarAccent: #e3e3e5;

src/components/left-pane/LeftPaneInfo.js

@@ -1,10 +1,11 @@
 import React from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import LeftPaneTray from "./LeftPaneTray";
 import MarkerSection from "./MarkerSection";
 import PolygonSection from "./PolygonSection";
 import PropertySection from "./PropertySection";
 import RelatedPropertySection from "./RelatedPropertySection";
+import { clearAllSelectedProperties, clearAllHighlightedProperties } from "../../actions/LandOwnershipActions";
 
 const LeftPaneInfo = ({ onClose, open }) => {
   const markers = useSelector((state) => state.markers.markers);
@@ -16,9 +17,18 @@ const LeftPaneInfo = ({ onClose, open }) => {
     (state) => state.relatedProperties.selectedProperty
   );
 
+  const dispatch = useDispatch();
+
+  const clearAll = () => {
+    console.log("clearing all")
+    dispatch(clearAllSelectedProperties());
+    dispatch(clearAllHighlightedProperties());
+    console.log(selectedProperties)
+  }
 
   return (
     <LeftPaneTray title="Land Information" open={open} onClose={onClose}>
+      {(selectedProperties.length > 0 || properties.length > 0) && <p className="clear-all" onClick={clearAll}>Clear all properties</p>}
       {polygons.length ||
         markers.length ||
         properties.length ||

src/components/left-pane/RelatedProperties.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
   setSelectedProperty,
@@ -8,7 +8,6 @@ import { setLngLat } from "../../actions/MapActions";
 
 const RelatedProperties = ({ property }) => {
   const dispatch = useDispatch();
-  const [active, setActive] = useState(false);
   const { selectedProperty } = useSelector(state => state.relatedProperties);
 
   const lng = property.geom.coordinates[0][0][1];
@@ -22,13 +21,14 @@ const RelatedProperties = ({ property }) => {
     else
       dispatch(setSelectedProperty([property]));
 
-    setActive(!active);
   };
 
   const gotoProperty = () => {
     dispatch(setLngLat(lng, lat));
   }
 
+  const active = selectedProperty.find(item => item[0].id === property.id);
+
   return <div
     className={`search-result ${active && "active"}`}
     key={property.title_no}

src/reducers/LandOwnershipReducer.js

@@ -34,6 +34,12 @@ export default (state = INITIAL_STATE, action) => {
         highlightedProperties,
         activePropertyId: null
       };
+    case "CLEAR_ALL_HIGHLIGHTED_PROPERTIES":
+      return {
+        ...state,
+        highlightedProperties: [],
+        activePropertyId: null
+      }
     case "SET_ACTIVE_PROPERTY":
       return {
         ...state,

src/reducers/RelatedPropertiesReducer.js

@@ -50,6 +50,11 @@ export default (state = INITIAL_STATE, action) => {
         ...state,
         selectedProperty,
       };
+    case "CLEAR_ALL_SELECTED_PROPERTIES":
+      return {
+        ...state,
+        selectedProperty: []
+      }
     case "SET_PROPRIETOR_NAME":
       return {
         ...state,