feat: sync land filters between them (decentraland#1450)

* feat: sync land filters between them * chore: ui bump
awaisshah228 · Mar 2, 2023 · d89d0aa · d89d0aa
1 parent 7db1dc0
commit d89d0aa
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 30 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -15,7 +15,7 @@
     "decentraland-crypto-fetch": "^1.0.3",
     "decentraland-dapps": "^13.35.0",
     "decentraland-transactions": "^1.42.0",
-    "decentraland-ui": "^3.80.1",
+    "decentraland-ui": "^3.83.1",
     "dotenv": "^10.0.0",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",

diff --git a/webapp/src/components/AssetFilters/AssetFilters.tsx b/webapp/src/components/AssetFilters/AssetFilters.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import {
   EmotePlayMode,
   GenderFilterOption,
@@ -159,6 +159,15 @@ export const AssetFilters = ({
     }
   }
 
+  const locationFilters = useMemo(
+    () => ({
+      adjacentToRoad,
+      minDistanceToPlaza,
+      maxDistanceToPlaza
+    }),
+    [adjacentToRoad, maxDistanceToPlaza, minDistanceToPlaza]
+  )
+
   const shouldRenderFilter = useCallback(
     (filter: AssetFilter) => {
       // /lands page won't have any category, we fallback to the section, that will be Section.LAND
@@ -190,21 +199,22 @@ export const AssetFilters = ({
           <EstateSizeFilter
             landStatus={landStatus}
             values={values}
-            minPrice={minEstateSize}
-            maxPrice={maxEstateSize}
+            min={minEstateSize}
+            max={maxEstateSize}
+            minPrice={minPrice}
+            maxPrice={maxPrice}
             onChange={values =>
               handleRangeFilterChange(
                 ['minEstateSize', 'maxEstateSize'],
                 values
               )
             }
+            {...locationFilters}
           />
         ) : null}
         {isLocationFilterEnabled && (
           <LocationFilter
-            minDistanceToPlaza={minDistanceToPlaza}
-            maxDistanceToPlaza={maxDistanceToPlaza}
-            adjacentToRoad={adjacentToRoad}
+            {...locationFilters}
             onAdjacentToRoadChange={handleAdjacentToRoadChange}
             onDistanceToPlazaChange={handleDistanceToPlazaChange}
           />

diff --git a/webapp/src/components/AssetFilters/EstateSizeFilter/EstateSizeFilter.tsx b/webapp/src/components/AssetFilters/EstateSizeFilter/EstateSizeFilter.tsx
@@ -9,9 +9,14 @@ import { Props } from './EstateSizeFilter.types'
 import './EstateSizeFilter.css'
 
 export const EstateSizeFilter = ({
+  min,
+  max,
   landStatus,
   minPrice,
   maxPrice,
+  adjacentToRoad,
+  minDistanceToPlaza,
+  maxDistanceToPlaza,
   network,
   defaultCollapsed = false,
   onChange
@@ -35,16 +40,33 @@ export const EstateSizeFilter = ({
     [minPrice, maxPrice, network, isMobileOrTablet]
   )
 
+  const filters = useMemo(
+    () => ({
+      maxPrice,
+      minPrice,
+      isOnSale: landStatus === LANDFilters.ONLY_FOR_SALE || undefined,
+      adjacentToRoad: adjacentToRoad || undefined,
+      minDistanceToPlaza: Number(minDistanceToPlaza) || undefined,
+      maxDistanceToPlaza: Number(maxDistanceToPlaza) || undefined
+    }),
+    [
+      adjacentToRoad,
+      landStatus,
+      minDistanceToPlaza,
+      maxDistanceToPlaza,
+      maxPrice,
+      minPrice
+    ]
+  )
+
   const fetcher = useCallback(async () => {
     if (landStatus === LANDFilters.ONLY_FOR_RENT) {
       // for rents, we don't have the data yet, so let's just resolve with an empty object so the chart is not rendered
       return {}
     }
-    const data = await nftAPI.fetchEstateSizes(
-      landStatus === LANDFilters.ONLY_FOR_SALE || undefined
-    )
+    const data = await nftAPI.fetchEstateSizes(filters)
     return data
-  }, [landStatus])
+  }, [filters, landStatus])
 
   return (
     <Box
@@ -56,9 +78,9 @@ export const EstateSizeFilter = ({
       <Inventory
         fetcher={fetcher}
         isMana={false}
-        min={minPrice}
+        min={min}
+        max={max}
         minLabel={t('filters.estate_size.min_label')}
-        max={maxPrice}
         maxLabel={t('filters.estate_size.max_label')}
         onChange={onChange}
         errorMessage={t('filters.estate_size.error')}

diff --git a/webapp/src/components/AssetFilters/EstateSizeFilter/EstateSizeFilter.types.ts b/webapp/src/components/AssetFilters/EstateSizeFilter/EstateSizeFilter.types.ts
@@ -4,12 +4,17 @@ import { LANDFilters } from '../../Vendor/decentraland/types'
 
 export type Props = {
   landStatus: LANDFilters
-  minPrice: string
-  maxPrice: string
+  min: string
+  max: string
+  minPrice?: string
+  maxPrice?: string
   network?: Network
   values?: BrowseOptions
   onChange: (value: [string, string]) => void
   defaultCollapsed?: boolean
+  minDistanceToPlaza?: string
+  maxDistanceToPlaza?: string
+  adjacentToRoad?: boolean
 }
 
 export type OwnProps = Props
diff --git a/webapp/src/components/AssetFilters/PriceFilter/PriceFilter.container.tsx b/webapp/src/components/AssetFilters/PriceFilter/PriceFilter.container.tsx
@@ -10,7 +10,12 @@ import {
   getOnlySmart,
   getRarities,
   getSection,
-  getWearableGenders
+  getWearableGenders,
+  getMinDistanceToPlaza,
+  getMaxDistanceToPlaza,
+  getMinEstateSize,
+  getMaxEstateSize,
+  getAdjacentToRoad
 } from '../../../modules/routing/selectors'
 import { LANDFilters } from '../../Vendor/decentraland/types'
 import { getCategoryFromSection } from '../../../modules/routing/search'
@@ -46,7 +51,27 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     landStatus,
     emotePlayMode: values.emotePlayMode || getEmotePlayMode(state),
     collection:
-      'contracts' in values ? values.contracts?.[0] : getContracts(state)[0]
+      'contracts' in values ? values.contracts?.[0] : getContracts(state)[0],
+    minDistanceToPlaza:
+      'minDistanceToPlaza' in values
+        ? values.minDistanceToPlaza
+        : getMinDistanceToPlaza(state),
+    maxDistanceToPlaza:
+      'maxDistanceToPlaza' in values
+        ? values.maxDistanceToPlaza
+        : getMaxDistanceToPlaza(state),
+    adjacentToRoad:
+      'adjacentToRoad' in values
+        ? values.adjacentToRoad
+        : getAdjacentToRoad(state),
+    minEstateSize:
+      'minEstateSize' in values
+        ? values.minEstateSize || ''
+        : getMinEstateSize(state),
+    maxEstateSize:
+      'maxEstateSize' in values
+        ? values.maxEstateSize || ''
+        : getMaxEstateSize(state)
   }
 }
 

diff --git a/webapp/src/components/AssetFilters/PriceFilter/PriceFilter.tsx b/webapp/src/components/AssetFilters/PriceFilter/PriceFilter.tsx
@@ -25,6 +25,11 @@ export const PriceFilter = ({
   category,
   minPrice,
   maxPrice,
+  adjacentToRoad,
+  minDistanceToPlaza,
+  maxDistanceToPlaza,
+  maxEstateSize,
+  minEstateSize,
   network,
   defaultCollapsed = false,
   assetType,
@@ -47,14 +52,24 @@ export const PriceFilter = ({
       contracts: collection ? [collection] : undefined,
       emotePlayMode,
       network,
-      ...getPriceFiltersForSection(section as Section)
+      ...getPriceFiltersForSection(section as Section),
+      adjacentToRoad: adjacentToRoad || undefined,
+      minDistanceToPlaza: minDistanceToPlaza || undefined,
+      maxDistanceToPlaza: maxDistanceToPlaza || undefined,
+      maxEstateSize,
+      minEstateSize
     }
   }, [
+    adjacentToRoad,
     assetType,
     bodyShapes,
     collection,
     emotePlayMode,
     isOnlySmart,
+    maxDistanceToPlaza,
+    maxEstateSize,
+    minDistanceToPlaza,
+    minEstateSize,
     network,
     rarities,
     section

diff --git a/webapp/src/components/AssetFilters/PriceFilter/PriceFilter.types.ts b/webapp/src/components/AssetFilters/PriceFilter/PriceFilter.types.ts
@@ -26,6 +26,11 @@ export type Props = {
   onChange: (value: [string, string]) => void
   defaultCollapsed?: boolean
   collection?: string
+  minDistanceToPlaza?: string
+  maxDistanceToPlaza?: string
+  adjacentToRoad?: boolean
+  minEstateSize?: string
+  maxEstateSize?: string
 }
 
 export type MapStateProps = Pick<
@@ -40,6 +45,11 @@ export type MapStateProps = Pick<
   | 'emotePlayMode'
   | 'collection'
   | 'network'
+  | 'adjacentToRoad'
+  | 'minEstateSize'
+  | 'maxEstateSize'
+  | 'minDistanceToPlaza'
+  | 'maxDistanceToPlaza'
 >
 
 export type OwnProps = Pick<Props, 'values'>
diff --git a/webapp/src/modules/vendor/decentraland/nft/api.ts b/webapp/src/modules/vendor/decentraland/nft/api.ts
@@ -1,4 +1,4 @@
-import { NFTCategory, RentalStatus } from '@dcl/schemas'
+import { NFTCategory, NFTFilters, RentalStatus } from '@dcl/schemas'
 import { BaseAPI } from 'decentraland-dapps/dist/lib/api'
 import { NFTsFetchParams } from '../../../nft/types'
 import { NFTsFetchFilters, NFTResponse, NFTResult } from './types'
@@ -22,13 +22,21 @@ export type PriceFilters = Omit<NFTsFetchFilters, 'category'> & {
   assetType?: AssetType
 }
 
+export type EstateSizeFilters = Pick<
+  NFTFilters,
+  | 'isOnSale'
+  | 'adjacentToRoad'
+  | 'minDistanceToPlaza'
+  | 'maxDistanceToPlaza'
+  | 'minPrice'
+  | 'maxPrice'
+>
+
 class NFTAPI extends BaseAPI {
   fetchEstateSizes = async (
-    isOnSale?: boolean
+    filters: EstateSizeFilters
   ): Promise<Record<string, number>> => {
-    const { data } = await this.request('get', `/stats/estate/size`, {
-      isOnSale
-    })
+    const { data } = await this.request('get', `/stats/estate/size`, filters)
     return data
   }