feat: client-side filtering

PropertyPraxis · Sep 7, 2024 · d15db62 · d15db62
1 parent 788be4b
commit d15db62
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 32 deletions.
diff --git a/client/src/components/Map/Map.jsx b/client/src/components/Map/Map.jsx
@@ -7,9 +7,10 @@ import { createNewViewport } from "../../utils/map"
 import {
   capitalizeFirstLetter,
   parseMBAddressString,
-  createLayerFilter,
+  createFilterFromParams,
   createQueryStringFromParams,
 } from "../../utils/helper"
+import queryString from "query-string"
 import { URLParamsToAPIQueryString } from "../../utils/parseURL"
 import {
   getMapStateAction,
@@ -318,8 +319,9 @@ class PraxisMap extends Component {
     const { sliderValue, filter } = this.props.controller
     const { searchYear } = this.props.searchState.searchParams
     const { lat, lng, bearing } = this.props.searchState.viewerCoords
-    const parcelLayerFilter = createLayerFilter(filter)
-    // TODO: replace parcelLayerFilter with something
+    const parcelLayerFilter = createFilterFromParams(
+      queryString.parse(window.location.search)
+    )
 
     return (
       <div className="map">
@@ -412,7 +414,7 @@ class PraxisMap extends Component {
             <Layer
               key="highlight-parcel-layer"
               {...parcelHighlightLayer}
-              filter={["in", "id", ...highlightIds]} // hightlight can be an array or string
+              filter={["in", "id", ...(highlightIds || [])]} // hightlight can be an array or string
             />
           </Source>
 

diff --git a/client/src/components/Search/DetailedSearchResults.jsx b/client/src/components/Search/DetailedSearchResults.jsx
@@ -79,7 +79,7 @@ function useSpeculationByCode(results, { code, year }) {
   return { data, topCount, topPer }
 }
 
-function useCodesBySpeculator(results, { code, ownid, year }) {
+function useCodesBySpeculator({ code, ownid, year }) {
   const [speculatorData, setSpeculatorData] = useState(null)
   const [propCount, setPropCount] = useState(null)
   const [zipsBySpeculator, setZipsBySpeculator] = useState(null)
@@ -95,21 +95,6 @@ function useCodesBySpeculator(results, { code, ownid, year }) {
       if (code) {
         const route = `/api/detailed-search?type=codes-by-speculator&ownid=${ownid}&year=${year}`
         const data = await APISearchQueryFromRoute(route)
-
-        //get feature ids based on speculator name
-        await data.map((item) => {
-          const ids = results
-            .map((record) => {
-              if (record.properties.propzip === item.propzip) {
-                return record.properties.prop_id
-              } else {
-                return null
-              }
-            })
-            .filter((id) => id !== null)
-          item.featureIds = ids
-        })
-
         setSpeculatorData(data)
 
         const { propCount, speculatorZips } = calulateSpeculatorTotals(data)
@@ -436,14 +421,11 @@ function SpeculatorParcels(props) {
   )
   const code = results[0].properties.propzip // need some error handling
 
-  const { speculatorData, propCount, zipsBySpeculator } = useCodesBySpeculator(
-    results,
-    {
-      code,
-      ownid,
-      year,
-    }
-  )
+  const { speculatorData, propCount, zipsBySpeculator } = useCodesBySpeculator({
+    code,
+    ownid,
+    year,
+  })
 
   if (speculatorData && zipsBySpeculator) {
     return (
@@ -746,7 +728,7 @@ function CodeSpeculatorParcels(props) {
   const { drawerIsOpen, results } = useSelector(
     (state) => state.searchState.detailedSearch
   )
-  const { speculatorData, zipsBySpeculator } = useCodesBySpeculator(results, {
+  const { speculatorData, zipsBySpeculator } = useCodesBySpeculator({
     code,
     ownid,
     year,
@@ -829,7 +811,7 @@ function SpeculatorCodeParcels(props) {
   const { drawerIsOpen, results } = useSelector(
     (state) => state.searchState.detailedSearch
   )
-  const { speculatorData, zipsBySpeculator } = useCodesBySpeculator(results, {
+  const { speculatorData, zipsBySpeculator } = useCodesBySpeculator({
     code,
     ownid,
     year,

diff --git a/client/src/utils/helper.js b/client/src/utils/helper.js
@@ -44,6 +44,22 @@ export function parseMBAddressString(addressString) {
   return strAddress[0].trim()
 }
 
+export function createFilterFromParams(params) {
+  let layerFilter = []
+
+  if (params.ownid) {
+    layerFilter = [...layerFilter, ["==", "own_id", params.ownid.toUpperCase()]]
+  }
+  if (params.code) {
+    layerFilter = [...layerFilter, ["==", "zipcode_sj", params.code]]
+  }
+  if (layerFilter.length > 0) {
+    return ["all", ...layerFilter]
+  } else {
+    return ["none"]
+  }
+}
+
 export function createLayerFilter(arr) {
   let layerFilter = []
 

diff --git a/server/routes/geojsonSearch.js b/server/routes/geojsonSearch.js
@@ -47,7 +47,7 @@ router.get("/", async (req, res) => {
           }))
           .filter(
             ({ properties: { propno } }) =>
-              !place || +place.split(" ")[0] === propno // TODO: Is this good enough?
+              !!place || +place.split(" ")[0] === propno
           )
         let nearbyAddresses = []
 
@@ -61,7 +61,6 @@ router.get("/", async (req, res) => {
           ).data
         }
 
-        // TODO: Change how this is displayed, pull single parcel on client?
         if (targetAddress.length === 0 && nearbyAddresses.length === 0) {
           // this is a default empty geojson
           // where there is no features returned
@@ -96,6 +95,7 @@ router.get("/", async (req, res) => {
         pgData = await queries.queryPGDB({
           ownid,
           year,
+          // TODO: Check
           PGDBQueryType: queries.GEOJSON_PARCELS_OWNID,
         })