fix: map view filter issues (decentraland#1471)

awaisshah228 · Mar 20, 2023 · e1a300e · e1a300e
1 parent 9c31554
commit e1a300e
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 14 deletions.
diff --git a/webapp/src/components/Atlas/Atlas.css b/webapp/src/components/Atlas/Atlas.css
@@ -18,6 +18,11 @@
   align-items: center;
   justify-content: center;
   padding: 0;
+  background: #736e7d;
+}
+
+.atlas-wrapper .ui.button.primary.atlas-info-button.atlas-info-open {
+  background: var(--primary);
 }
 
 .atlas-wrapper .ui.button.primary.atlas-info-button:focus {

diff --git a/webapp/src/components/Atlas/Atlas.tsx b/webapp/src/components/Atlas/Atlas.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Popup as UIPopup } from 'decentraland-ui'
-import { NFTCategory } from '@dcl/schemas'
+import { NFTCategory, RentalStatus } from '@dcl/schemas'
+import classNames from 'classnames'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import {
   Atlas as AtlasComponent,
@@ -39,6 +40,7 @@ const Atlas: React.FC<Props> = (props: Props) => {
   } = props
 
   const [showPopup, setShowPopup] = useState(false)
+  const [isInfoPopupOpen, setIsInfoPopupOpen] = useState(false)
   const [hoveredTile, setHoveredTile] = useState<Tile | null>(null)
   const [mouseX, setMouseX] = useState(-1)
   const [mouseY, setMouseY] = useState(-1)
@@ -97,12 +99,17 @@ const Atlas: React.FC<Props> = (props: Props) => {
 
   const userRentedTiles = useMemo(
     () =>
-      nftsOnRent
-        .map(([nft]) => nft)
-        .reduce(
-          (lands, nft) => setLand(lands, nft, Color.SUNISH),
-          new Map<string, ReturnType<Layer>>()
-        ),
+      nftsOnRent.reduce(
+        (lands, [nft, rental]) =>
+          setLand(
+            lands,
+            nft,
+            rental.status === RentalStatus.EXECUTED
+              ? Color.SUNISH
+              : Color.SUMMER_RED
+          ),
+        new Map<string, ReturnType<Layer>>()
+      ),
     [nftsOnRent, setLand]
   )
 
@@ -290,6 +297,18 @@ const Atlas: React.FC<Props> = (props: Props) => {
     }
   }, [withPopup, showPopup, mouseX, mouseY])
 
+  const handleInfoPopupOpen = useCallback(() => setIsInfoPopupOpen(true), [
+    setIsInfoPopupOpen
+  ])
+
+  const handleInfoPopupClose = useCallback(
+    (evt: React.MouseEvent) => {
+      evt.stopPropagation()
+      setIsInfoPopupOpen(false)
+    },
+    [setIsInfoPopupOpen]
+  )
+
   // layers
   const layers = [
     userLayer,
@@ -331,10 +350,14 @@ const Atlas: React.FC<Props> = (props: Props) => {
             </div>
           }
           position="top right"
+          onClose={handleInfoPopupClose}
+          onOpen={handleInfoPopupOpen}
           trigger={
             <Button
               primary
-              className="atlas-info-button"
+              className={classNames('atlas-info-button', {
+                'atlas-info-open': isInfoPopupOpen
+              })}
               aria-label="info"
               tabIndex={0}
             >

diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json
@@ -395,8 +395,8 @@
       "all_items": "All networks"
     },
     "map": {
-      "on_rent": "Available for rent",
-      "on_sale": "Available for sale",
+      "on_rent": "Available to rent",
+      "on_sale": "Available to buy",
       "owned": "Owned by me",
       "map_colors": "Map colors",
       "plaza": "Plaza",

diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json
@@ -391,8 +391,8 @@
       "all_items": "Todas las redes"
     },
     "map": {
-      "on_rent": "Disponible para la renta",
-      "on_sale": "Disponible para la venta",
+      "on_rent": "Disponible para rentar",
+      "on_sale": "Disponible para comprar",
       "owned": "Mis tierras",
       "map_colors": "Colores del mapa",
       "plaza": "Plaza",

diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json
@@ -392,8 +392,8 @@
       "all_items": "所有网络"
     },
     "map": {
-      "on_rent": "可供出租",
-      "on_sale": "可供出售",
+      "on_rent": "可出租",
+      "on_sale": "可购买",
       "owned": "归我所有",
       "map_colors": "地图颜色",
       "plaza": "广场",