From 5ea5bbae5aa8c4f1316b0aeb7220a2fe1188aa14 Mon Sep 17 00:00:00 2001 From: Melisa Anabella Rossi Date: Fri, 3 Nov 2023 14:36:44 -0300 Subject: [PATCH] feat: move coordinates source to graph (#2046) --- .../AssetPage/EstateDetail/EstateDetail.tsx | 7 ++++++- .../ParcelCoordinates.container.ts | 11 ----------- .../ParcelCoordinates/ParcelCoordinates.module.css | 14 ++++++++++++-- .../ParcelCoordinates/ParcelCoordinates.tsx | 12 ++++++++++-- .../ParcelCoordinates/ParcelCoordinates.types.ts | 8 ++------ .../EstateDetail/ParcelCoordinates/index.ts | 2 +- webapp/src/modules/translation/locales/en.json | 3 ++- webapp/src/modules/translation/locales/es.json | 3 ++- webapp/src/modules/translation/locales/zh.json | 3 ++- 9 files changed, 37 insertions(+), 26 deletions(-) delete mode 100644 webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.container.ts diff --git a/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx b/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx index 42a3f01552..8a216d170c 100644 --- a/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx +++ b/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx @@ -81,7 +81,12 @@ const EstateDetail = ({ nft, order, rental }: Props) => { below={ <> - {estate.size > 0 && } + {estate.size > 0 && ( + + )} diff --git a/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.container.ts b/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.container.ts deleted file mode 100644 index fdcfc94c6c..0000000000 --- a/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.container.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { connect } from 'react-redux' -import { RootState } from '../../../../modules/reducer' -import { getTilesByEstateId } from '../../../../modules/tile/selectors' -import { MapStateProps, OwnProps } from './ParcelCoordinates.types' -import ParcelCoordinates from './ParcelCoordinates' - -const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => ({ - parcelCoordinates: getTilesByEstateId(state)[ownProps.estateId] ?? [] -}) - -export default connect(mapState)(ParcelCoordinates) diff --git a/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.module.css b/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.module.css index 0d3e3d4a8e..ce16b1504e 100644 --- a/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.module.css +++ b/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.module.css @@ -1,8 +1,12 @@ +.ParcelCoordinates { + margin-top: 48px; +} + .coordinates { display: grid; justify-content: space-between; + gap: 6px; grid-template-columns: repeat(auto-fill, 110px); - margin-top: 13px; overflow: hidden; } @@ -27,10 +31,16 @@ } .coordinate { - margin: 6px; cursor: pointer !important; } +.moreText { + font-size: 12px; + display: flex; + align-items: center; + gap: 4px; +} + .showMore { margin-top: 15px; justify-content: center; diff --git a/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.tsx b/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.tsx index f8901f5469..598d04fd8b 100644 --- a/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.tsx +++ b/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.tsx @@ -11,12 +11,12 @@ import { Props } from './ParcelCoordinates.types' import styles from './ParcelCoordinates.module.css' const ParcelCoordinates = (props: Props) => { - const { parcelCoordinates } = props + const { parcelCoordinates, total } = props return (
{t('parcel_coordinates.title')}
- + {parcelCoordinates.map((parcel, index) => ( { /> ))} + {parcelCoordinates.length < total ? ( + + {t('parcel_coordinates.and_more', { + amount: total - parcelCoordinates.length, + strong: (text: string) => {text} + })} + + ) : null}
diff --git a/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.types.ts b/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.types.ts index 2d937a685a..24afeb2b7f 100644 --- a/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.types.ts +++ b/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.types.ts @@ -1,10 +1,6 @@ -import { Tile } from '../../../Atlas/Atlas.types' - export type Props = { - estateId: string - parcelCoordinates: Tile[] + parcelCoordinates: { x: number; y: number }[] + total: number } -export type OwnProps = Pick - export type MapStateProps = Pick diff --git a/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/index.ts b/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/index.ts index d82057b3f1..34b02d81b9 100644 --- a/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/index.ts +++ b/webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/index.ts @@ -1,2 +1,2 @@ -import ParcelCoordinates from './ParcelCoordinates.container' +import ParcelCoordinates from './ParcelCoordinates' export { ParcelCoordinates } diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json index f7ab047827..3525ff4db9 100644 --- a/webapp/src/modules/translation/locales/en.json +++ b/webapp/src/modules/translation/locales/en.json @@ -1011,7 +1011,8 @@ "parcel_coordinates": { "title": "Parcels", "show_more": "SHOW MORE", - "show_less": "SHOW LESS" + "show_less": "SHOW LESS", + "and_more": "and {amount} more..." }, "price_change_notice": { "message": "The price may fluctuate due to market changes" diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json index 7d65d27d8d..f40a105948 100644 --- a/webapp/src/modules/translation/locales/es.json +++ b/webapp/src/modules/translation/locales/es.json @@ -1003,7 +1003,8 @@ "parcel_coordinates": { "title": "Parcelas", "show_more": "MOSTRAR MÁS", - "show_less": "MOSTRAR MENOS" + "show_less": "MOSTRAR MENOS", + "and_more": "y {amount} más..." }, "price_change_notice": { "message": "El precio puede variar debido a cambios en el mercado" diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json index 99781c5e48..fc6607a7d2 100644 --- a/webapp/src/modules/translation/locales/zh.json +++ b/webapp/src/modules/translation/locales/zh.json @@ -1008,7 +1008,8 @@ "parcel_coordinates": { "title": "地块", "show_more": "展示更多", - "show_less": "显示较少" + "show_less": "显示较少", + "and_more": "和 {amount} 更多的..." }, "price_change_notice": { "message": "价格或因市场变化而波动"