feat: Add parcel coordinates (decentraland#354)

* Add ParcelCoordinates and Coordinates components

* Add links

* On hover and visited changes

* Use a different gama for the hover

* Change colors

* Change parcel views to grids

* Gridify the chips & modularize the ParcelCoordinates component

* Modularize coordinate

* Add classnames, add locales

* Change LANDs to Parcels

* Remove commented import

* Add the collapsible component, fix push of URLs

* Remove CSS

* Fix imports

* Fix imports

* Fix ES translation

* Fix collapsible by checking if the children changed

* Remove atlas popup badge's css

* Use Badge from decentraland-ui

* Collapse when the childrens change

webapp/package.json

@@ -5,6 +5,7 @@
     "@apollo/react-hooks": "^3.1.3",
     "@dcl/schemas": "^1.0.0",
     "apollo-boost": "^0.4.7",
+    "classnames": "^2.3.1",
     "connected-react-router": "^6.6.1",
     "date-fns": "^2.8.1",
     "decentraland-dapps": "^12.15.0",

webapp/src/components/Atlas/Popup/Popup.css

@@ -25,22 +25,13 @@
   font-weight: 600;
 }
 
-.AtlasPopup .dcl.badge {
-  font-size: 12px;
-  line-height: 13px;
-  padding: 3px 5px;
+.AtlasPopup .coordinates {
+  font-size: 12px !important;
+  line-height: 13px !important;
+  padding: 3px 5px !important;
   margin-left: 8px;
-  height: 24px;
-  font-weight: 500;
-  flex: none;
-}
-
-.AtlasPopup .pin {
-  background-image: url(../../../images/pin-land.svg);
-  width: 17px;
-  height: 16px;
-  background-size: 19px;
-  background-position: -2px -1px;
+  height: 24px !important;
+  font-weight: 500 !important;
 }
 
 .AtlasPopup .dcl.section.medium:last-child {

webapp/src/components/Atlas/Popup/Popup.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react'
 import { Address } from 'web3x-es/address'
-import { Badge, Row, Section, Header } from 'decentraland-ui'
+import { Row, Section, Header } from 'decentraland-ui'
 import { Profile } from 'decentraland-dapps/dist/containers'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Coordinate } from '../../Coordinate'
 import { Mana } from '../../Mana'
 import { Props } from './Popup.types'
 import './Popup.css'
 
 export default class Popup extends React.PureComponent<Props> {
   render() {
     const { x, y, visible, tile, position } = this.props
-    const id = `${tile.x},${tile.y}`
     const isEstate = !!tile.estate_id
     return (
       <div
@@ -25,10 +25,7 @@ export default class Popup extends React.PureComponent<Props> {
               {tile.name ||
                 (!isEstate ? t('global.parcel') : t('global.estate'))}
             </span>
-            <Badge color="#37333D">
-              <i className="pin" />
-              {id}
-            </Badge>
+            <Coordinate className={'coordinates'} x={tile.x} y={tile.y} />
           </Row>
         </Section>
 

webapp/src/components/Collapsible/Collapsible.module.css

@@ -0,0 +1,25 @@
+.Collapsible {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.showMore {
+  margin-top: 15px;
+  justify-content: center;
+}
+
+.showMore span {
+  font-size: 15px;
+  color: var(--primary);
+  cursor: pointer;
+}
+
+.children {
+  width: 100%;
+}
+
+.collapsibleWrapper {
+  overflow: hidden;
+  width: 100%;
+}

webapp/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback, useRef, useState, useEffect } from 'react'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Row } from '../Layout/Row'
+import styles from './Collapsible.module.css'
+import { Props } from './Collapsible.types'
+
+const Collapsible = (props: Props) => {
+  const { children, collapsedHeight } = props
+  const [isCollapsed, setIsCollapsed] = useState(true)
+  const [isCollapsible, setIsCollapsible] = useState(false)
+  const mainElement = useRef<HTMLDivElement>(null)
+  const handleChangeShowMore = useCallback(() => setIsCollapsed(!isCollapsed), [
+    isCollapsed
+  ])
+
+  useEffect(() => {
+    setIsCollapsed(true)
+  }, [children])
+
+  useEffect(() => {
+    function setCollapsableUsingHeight() {
+      if (!mainElement.current) return
+
+      setIsCollapsible(mainElement.current.offsetHeight > collapsedHeight)
+    }
+
+    setCollapsableUsingHeight()
+    window.addEventListener('resize', setCollapsableUsingHeight)
+    return () => window.removeEventListener('resize', setCollapsableUsingHeight)
+  }, [collapsedHeight, children, setIsCollapsible])
+
+  return (
+    <div className={styles.Collapsible}>
+      <div
+        style={{ height: isCollapsed ? collapsedHeight : 'auto' }}
+        className={styles.collapsibleWrapper}
+      >
+        <div ref={mainElement} className={styles.children}>
+          {children}
+        </div>
+      </div>
+      {isCollapsible && (
+        <Row className={styles.showMore}>
+          <span onClick={handleChangeShowMore}>
+            {isCollapsed
+              ? t('parcel_coordinates.show_more')
+              : t('parcel_coordinates.show_less')}
+          </span>
+        </Row>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(Collapsible)

webapp/src/components/Collapsible/Collapsible.types.ts

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export type Props = {
+  children: React.ReactNode
+  collapsedHeight: number
+}

webapp/src/components/Collapsible/index.ts

@@ -0,0 +1,2 @@
+import Collapsible from './Collapsible'
+export { Collapsible }

webapp/src/components/Coordinate/Coordinate.module.css

@@ -0,0 +1,7 @@
+.pin {
+  background-image: url(../../images/pin-land.svg);
+  width: 17px;
+  height: 16px;
+  background-size: 19px;
+  background-position: -2px -1px;
+}

webapp/src/components/Coordinate/Coordinate.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Badge } from 'decentraland-ui'
+import { Props } from './Coordinate.types'
+import styles from './Coordinate.module.css'
+
+const Coordinate = (props: Props) => {
+  const { x, y, className } = props
+
+  return (
+    <Badge className={className} color="#37333D">
+      <i className={styles.pin} />
+      {`${x},${y}`}
+    </Badge>
+  )
+}
+
+export default React.memo(Coordinate)

webapp/src/components/Coordinate/Coordinate.types.ts

@@ -0,0 +1,5 @@
+export type Props = {
+  x: number
+  y: number
+  className?: string
+}

webapp/src/components/Coordinate/index.ts

@@ -0,0 +1,3 @@
+import Coordinate from './Coordinate'
+
+export { Coordinate }

webapp/src/components/LegacyNFTPage/LegacyNFTPage.tsx

@@ -23,14 +23,14 @@ const LegacyNFTPage = (props: Props) => {
     const estates = getContract({ category: NFTCategory.ESTATE })
 
     if (estateId) {
-      history.push(locations.nft(estates.address, estateId))
+      history.replace(locations.nft(estates.address, estateId))
     } else if (x && y) {
       nftAPI
         .fetchTokenId(Number(x), Number(y))
         .then(tokenId => {
-          history.push(locations.nft(land.address, tokenId))
+          history.replace(locations.nft(land.address, tokenId))
         })
-        .catch(() => history.push(locations.root()))
+        .catch(() => history.replace(locations.root()))
     }
   }, [contractService, params, history])
 

webapp/src/components/NFTPage/Badge/Badge.tsx

@@ -5,7 +5,7 @@ import './Badge.css'
 const Badge = (props: Props) => {
   const { color, className = '', children } = props
   return (
-    <div className={`Badge ${className}`} style={{ backgroundColor: color }}>
+    <div className={`${className} Badge`} style={{ backgroundColor: color }}>
       {children}
     </div>
   )

webapp/src/components/NFTPage/EstateDetail/EstateDetail.tsx

@@ -17,6 +17,7 @@ import { ProximityHighlights } from '../ProximityHighlights'
 import { TransactionHistory } from '../TransactionHistory'
 import { Bids } from '../Bids'
 import { Props } from './EstateDetail.types'
+import { ParcelCoordinates } from './ParcelCoordinates'
 import './EstateDetail.css'
 
 const EstateDetail = (props: Props) => {
@@ -70,6 +71,7 @@ const EstateDetail = (props: Props) => {
         </Row>
         <ProximityHighlights nft={nft} />
         <Bids nft={nft} />
+        <ParcelCoordinates estate={estate} />
         <TransactionHistory nft={nft} />
       </Container>
     </>

webapp/src/components/NFTPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.module.css

@@ -0,0 +1,43 @@
+.coordinates {
+  display: grid;
+  justify-content: space-between;
+  grid-template-columns: repeat(auto-fill, 110px);
+  margin-top: 13px;
+  overflow: hidden;
+}
+
+.collapsed {
+  height: 88px;
+}
+
+.expanded {
+  height: auto;
+}
+
+.coordinates a .coordinate {
+  color: var(--text);
+}
+
+.coordinates a .coordinate:hover {
+  background-color: var(--primary) !important;
+}
+
+.coordinates a:visited .coordinate {
+  background-color: #242129 !important;
+}
+
+.coordinate {
+  margin: 6px;
+  cursor: pointer !important;
+}
+
+.showMore {
+  margin-top: 15px;
+  justify-content: center;
+}
+
+.showMore span {
+  font-size: 15px;
+  color: var(--primary);
+  cursor: pointer;
+}

webapp/src/components/NFTPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Header } from 'decentraland-ui'
+import { Link } from 'react-router-dom'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import classNames from 'classnames'
+
+import { locations } from '../../../../modules/routing/locations'
+import { Row } from '../../../Layout/Row'
+import Coordinate from '../../../Coordinate/Coordinate'
+import { Collapsible } from '../../../Collapsible'
+import { Props } from './ParcelCoordinates.types'
+import styles from './ParcelCoordinates.module.css'
+
+const ParcelCoordinates = (props: Props) => {
+  const { estate } = props
+  const coordinatesClasses = classNames(styles.coordinates)
+
+  return (
+    <div className={styles.ParcelCoordinates}>
+      <Header sub>{t('parcel_coordinates.title')}</Header>
+      <Collapsible collapsedHeight={60}>
+        <Row className={coordinatesClasses}>
+          {estate.parcels.map((parcel, index) => (
+            <Link
+              to={locations.parcel(parcel.x.toString(), parcel.y.toString())}
+            >
+              <Coordinate
+                className={styles.coordinate}
+                key={index}
+                x={parcel.x}
+                y={parcel.y}
+              />
+            </Link>
+          ))}
+        </Row>
+      </Collapsible>
+    </div>
+  )
+}
+
+export default React.memo(ParcelCoordinates)

webapp/src/components/NFTPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.types.ts

@@ -0,0 +1,5 @@
+import { Estate } from '../../../../modules/nft/estate/types'
+
+export type Props = {
+  estate: Estate
+}

webapp/src/components/NFTPage/EstateDetail/ParcelCoordinates/index.ts

@@ -0,0 +1,2 @@
+import ParcelCoordinates from './ParcelCoordinates'
+export { ParcelCoordinates }

webapp/src/modules/translation/locales/en.json

@@ -338,6 +338,11 @@
   "highlights": {
     "title": "Highlights"
   },
+  "parcel_coordinates": {
+    "title": "Parcels",
+    "show_more": "SHOW MORE",
+    "show_less": "SHOW LESS"
+  },
   "price_change_notice": {
     "message": "The price may fluctuate due to market changes"
   },

webapp/src/modules/translation/locales/es.json

@@ -333,6 +333,11 @@
   "highlights": {
     "title": "Destacados"
   },
+  "parcel_coordinates": {
+    "title": "Parcelas",
+    "show_more": "MOSTRAR MÁS",
+    "show_less": "MOSTRAR MENOS"
+  },
   "price_change_notice": {
     "message": "El precio puede variar debido a cambios en el mercado"
   },

webapp/src/modules/translation/locales/zh.json

@@ -334,6 +334,11 @@
   "highlights": {
     "title": "亮点"
   },
+  "parcel_coordinates": {
+    "title": "地块",
+    "show_more": "展示更多",
+    "show_less": "显示较少"
+  },
   "price_change_notice": {
     "message": "价格或因市场变化而波动"
   },