From 5ef1558c58729383465ebd8d0d054c3f3f57a0f4 Mon Sep 17 00:00:00 2001
From: Juan Cazala <juan@decentraland.org>
Date: Wed, 22 Dec 2021 18:55:58 -0300
Subject: [PATCH] feat: error boundary (#495)

* fix: typescript path

* fix: ignore .vscode

* feat: added error boundary, fixed empty estate detail

* chore: remove comments from docs
---
 .gitignore                                    |  1 +
 .vscode/settings.json                         |  9 ------
 webapp/.vscode/settings.json                  |  4 ---
 webapp/src/components/AssetPage/AssetPage.tsx | 21 +++++++------
 .../AssetPage/ErrorBoundary/ErrorBoundary.tsx | 31 +++++++++++++++++++
 .../ErrorBoundary/ErrorBoundary.types.ts      |  5 +++
 .../AssetPage/ErrorBoundary/index.ts          |  2 ++
 .../AssetPage/EstateDetail/EstateDetail.css   | 31 +++++++++++++++++++
 .../AssetPage/EstateDetail/EstateDetail.tsx   | 20 ++++++++++--
 .../src/modules/translation/locales/en.json   |  6 ++++
 .../src/modules/translation/locales/es.json   |  6 ++++
 .../src/modules/translation/locales/zh.json   |  6 ++++
 12 files changed, 118 insertions(+), 24 deletions(-)
 delete mode 100644 .vscode/settings.json
 delete mode 100644 webapp/.vscode/settings.json
 create mode 100644 webapp/src/components/AssetPage/ErrorBoundary/ErrorBoundary.tsx
 create mode 100644 webapp/src/components/AssetPage/ErrorBoundary/ErrorBoundary.types.ts
 create mode 100644 webapp/src/components/AssetPage/ErrorBoundary/index.ts

diff --git a/.gitignore b/.gitignore
index 5219d6c7a6..630f567006 100644
--- a/.gitignore
+++ b/.gitignore
@@ -72,3 +72,4 @@ indexer/src/entities
 indexer/src/data/addresses.ts
 indexer/subgraph.yaml
 
+.vscode
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 32f6d1e660..0000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "prettier.printWidth": 80,
-  "prettier.singleQuote": true,
-  "prettier.semi": false,
-  "search.followSymlinks": false,
-  "editor.tabSize": 2,
-  "editor.formatOnSave": true
-}
diff --git a/webapp/.vscode/settings.json b/webapp/.vscode/settings.json
deleted file mode 100644
index 3a19d2f713..0000000000
--- a/webapp/.vscode/settings.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
diff --git a/webapp/src/components/AssetPage/AssetPage.tsx b/webapp/src/components/AssetPage/AssetPage.tsx
index 4bbbaa5a8b..725329a73b 100644
--- a/webapp/src/components/AssetPage/AssetPage.tsx
+++ b/webapp/src/components/AssetPage/AssetPage.tsx
@@ -8,6 +8,7 @@ import { Navigation } from '../Navigation'
 import { AssetProviderPage } from '../AssetProviderPage'
 import { NFTDetail } from '../Vendor/NFTDetail'
 import { ItemDetail } from './ItemDetail'
+import { ErrorBoundary } from './ErrorBoundary'
 import { Props } from './AssetPage.types'
 import './AssetPage.css'
 
@@ -18,15 +19,17 @@ const AssetPage = (props: Props) => {
       <Navbar isFullscreen />
       <Navigation isFullscreen />
       <Page className="AssetPage" isFullscreen>
-        <AssetProviderPage type={type}>
-          {asset =>
-            type === AssetType.NFT ? (
-              <NFTDetail nft={asset as Asset<AssetType.NFT>} />
-            ) : AssetType.ITEM ? (
-              <ItemDetail item={asset as Asset<AssetType.ITEM>} />
-            ) : null
-          }
-        </AssetProviderPage>
+        <ErrorBoundary>
+          <AssetProviderPage type={type}>
+            {asset =>
+              type === AssetType.NFT ? (
+                <NFTDetail nft={asset as Asset<AssetType.NFT>} />
+              ) : AssetType.ITEM ? (
+                <ItemDetail item={asset as Asset<AssetType.ITEM>} />
+              ) : null
+            }
+          </AssetProviderPage>
+        </ErrorBoundary>
       </Page>
       <Footer />
     </>
diff --git a/webapp/src/components/AssetPage/ErrorBoundary/ErrorBoundary.tsx b/webapp/src/components/AssetPage/ErrorBoundary/ErrorBoundary.tsx
new file mode 100644
index 0000000000..87bfcb48c3
--- /dev/null
+++ b/webapp/src/components/AssetPage/ErrorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Center } from 'decentraland-ui'
+import { Props, State } from './ErrorBoundary.types'
+
+export default class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(_error: Error) {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, errorInfo: any) {
+    console.error(error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Center>
+          <div className="secondary-text">{t('error_boundary.message')}</div>
+        </Center>
+      )
+    }
+
+    return this.props.children
+  }
+}
diff --git a/webapp/src/components/AssetPage/ErrorBoundary/ErrorBoundary.types.ts b/webapp/src/components/AssetPage/ErrorBoundary/ErrorBoundary.types.ts
new file mode 100644
index 0000000000..11e5fd9a78
--- /dev/null
+++ b/webapp/src/components/AssetPage/ErrorBoundary/ErrorBoundary.types.ts
@@ -0,0 +1,5 @@
+export type Props = {}
+
+export type State = {
+  hasError: boolean
+}
diff --git a/webapp/src/components/AssetPage/ErrorBoundary/index.ts b/webapp/src/components/AssetPage/ErrorBoundary/index.ts
new file mode 100644
index 0000000000..1581392b63
--- /dev/null
+++ b/webapp/src/components/AssetPage/ErrorBoundary/index.ts
@@ -0,0 +1,2 @@
+import ErrorBoundary from './ErrorBoundary'
+export { ErrorBoundary }
diff --git a/webapp/src/components/AssetPage/EstateDetail/EstateDetail.css b/webapp/src/components/AssetPage/EstateDetail/EstateDetail.css
index ed7d9b2c45..6e15ad5329 100644
--- a/webapp/src/components/AssetPage/EstateDetail/EstateDetail.css
+++ b/webapp/src/components/AssetPage/EstateDetail/EstateDetail.css
@@ -22,6 +22,37 @@
   flex: 0 0 auto;
 }
 
+.AssetImage.dissolved {
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.AssetImage.dissolved .atlas-wrapper {
+  filter: blur(5px);
+}
+
+.dissolved-wrapper {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dissolved-notice {
+  background: var(--background);
+  padding: 8px;
+  border-radius: 8px;
+  position: absolute;
+  color: var(--text);
+}
+
+.AssetPage .PageHeader {
+  position: relative;
+}
+
 @media (max-width: 768px) {
   .EstateDetail .estate-title-jump-in {
     display: none !important;
diff --git a/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx b/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx
index b0c1336042..bc8d155024 100644
--- a/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx
+++ b/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Container, Header } from 'decentraland-ui'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAssetName } from '../../../modules/asset/utils'
 import { PageHeader } from '../../PageHeader'
 import { AssetImage } from '../../AssetImage'
@@ -23,16 +24,31 @@ import './EstateDetail.css'
 const EstateDetail = (props: Props) => {
   const { nft } = props
   const estate = nft.data.estate!
-  const { x, y } = estate.parcels[0]
+  let x = 0
+  let y = 0
+
+  if (estate.size > 0) {
+    x = estate.parcels[0].x
+    y = estate.parcels[0].y
+  }
+
   return (
     <>
       <PageHeader>
         <AssetImage
+          className={estate.size === 0 ? 'dissolved' : ''}
           asset={nft}
           isDraggable={true}
           withNavigation={true}
           hasPopup={true}
         />
+        {estate.size === 0 && (
+          <div className="dissolved-wrapper">
+            <div className="dissolved-notice">
+              {t('estate_detail.dissolved')}
+            </div>
+          </div>
+        )}
       </PageHeader>
       <Container className="EstateDetail">
         <Title
@@ -69,7 +85,7 @@ const EstateDetail = (props: Props) => {
         </Row>
         <ProximityHighlights nft={nft} />
         <Bids nft={nft} />
-        <ParcelCoordinates estateId={nft.tokenId} />
+        {estate.size > 0 && <ParcelCoordinates estateId={nft.tokenId} />}
         <TransactionHistory nft={nft} />
       </Container>
     </>
diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json
index c66bf6bc81..c89b01b6d2 100644
--- a/webapp/src/modules/translation/locales/en.json
+++ b/webapp/src/modules/translation/locales/en.json
@@ -23,6 +23,12 @@
     "network": "Network",
     "issue_number": "Issue Number"
   },
+  "error_boundary": {
+    "message": "Oops! Something went wrong..."
+  },
+  "estate_detail": {
+    "dissolved": "This Estate has been dissolved"
+  },
   "vendors": {
     "decentraland": "Decentraland",
     "super_rare": "SuperRare",
diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json
index 336e5a010e..24816006b2 100644
--- a/webapp/src/modules/translation/locales/es.json
+++ b/webapp/src/modules/translation/locales/es.json
@@ -23,6 +23,12 @@
     "network": "Red",
     "issue_number": "Número de emisión"
   },
+  "error_boundary": {
+    "message": "Oops! Algo salió mal..."
+  },
+  "estate_detail": {
+    "dissolved": "Este Estate ha sido disuelto"
+  },
   "vendors": {
     "decentraland": "Decentraland",
     "super_rare": "SuperRare",
diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json
index 265f9d1638..6f82fe1c42 100644
--- a/webapp/src/modules/translation/locales/zh.json
+++ b/webapp/src/modules/translation/locales/zh.json
@@ -23,6 +23,12 @@
     "network": "网络",
     "issue_number": "发行数量"
   },
+  "error_boundary": {
+    "message": "糟糕！出了点问题......"
+  },
+  "estate_detail": {
+    "dissolved": "这个庄园已经解散了"
+  },
   "vendors": {
     "decentraland": "Decentraland",
     "super_rare": "SuperRare",