fix: Prevent land unpublish if lessor (#3233)

decentraland · Jan 6, 2025 · bdc7c65 · bdc7c65
1 parent 6ab0cc6
commit bdc7c65
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 49 deletions.
diff --git a/src/components/LandDetailPage/LandDetailPage.tsx b/src/components/LandDetailPage/LandDetailPage.tsx
@@ -12,7 +12,7 @@ import Profile from 'components/Profile'
 import JumpIn from 'components/JumpIn'
 import RentalPeriod from 'components/RentalPeriod'
 import ENSChip from './ENSChip'
-import Scene from './Scene'
+import { Scene } from './Scene'
 import { Props, State } from './LandDetailPage.types'
 import './LandDetailPage.css'
 
@@ -114,6 +114,7 @@ export default class LandDetailPage extends React.PureComponent<Props, State> {
     const { hovered, mouseX, mouseY, showTooltip } = this.state
     const occupiedTotal = this.computeOccupiedLand(land, deployments)
     const landOwner = rental && (land.roles.includes(RoleType.LESSOR) || land.roles.includes(RoleType.TENANT)) ? rental.lessor : land.owner
+    const isRentingLand = land.roles.includes(RoleType.LESSOR)
 
     const canBuildEstate = parcelsAvailableToBuildEstates[land.id]
     const isAtlasClickable = showTooltip && hovered && hovered.projectId && hovered.projectId in projects
@@ -257,6 +258,7 @@ export default class LandDetailPage extends React.PureComponent<Props, State> {
                 <div className="deployments">
                   {deployments.map(deployment => (
                     <Scene
+                      disabled={isRentingLand}
                       key={deployment.id}
                       deployment={deployment}
                       onMouseEnter={this.handleMouseEnter}

diff --git a/src/components/LandDetailPage/Scene/Scene.tsx b/src/components/LandDetailPage/Scene/Scene.tsx
@@ -6,53 +6,69 @@ import { DeployModalView, DeployModalMetadata } from 'components/Modals/DeployMo
 import { Props } from './Scene.types'
 import './Scene.css'
 
-export default class Scene extends React.PureComponent<Props> {
-  render() {
-    const { deployment, onMouseEnter, onMouseLeave, onNavigate, onOpenModal, projects } = this.props
-    const project = deployment.projectId && deployment.projectId in projects ? projects[deployment.projectId] : null
+export const Scene: React.FC<Props> = (props: Props) => {
+  const { deployment, onMouseEnter, onMouseLeave, onNavigate, onOpenModal, projects, disabled } = props
+  const project = deployment.projectId && deployment.projectId in projects ? projects[deployment.projectId] : null
 
-    return (
-      <div
-        className={`Scene ${project ? 'clickable' : ''}`}
-        onClick={() => project && onNavigate(locations.sceneDetail(project.id))}
-        onMouseEnter={() => onMouseEnter(deployment)}
-        onMouseLeave={() => onMouseLeave(deployment)}
-      >
-        {deployment.thumbnail ? (
-          <div className="thumbnail" style={{ backgroundImage: `url(${deployment.thumbnail})` }}></div>
-        ) : (
-          <div className="no-thumbnail" />
-        )}
-        <div className="stat">
-          <div className="title" title={deployment.name}>
-            {deployment.name}
-          </div>
-          {deployment.layout ? (
-            <div className="secondary-text">
-              {deployment.layout.rows}x{deployment.layout.cols}
-            </div>
-          ) : null}
+  const handleOnMouseEnter = React.useCallback(() => {
+    if (!disabled) {
+      onMouseEnter(deployment)
+    }
+  }, [onMouseEnter, disabled, deployment])
+
+  const handleOnMouseLeave = React.useCallback(() => {
+    if (!disabled) {
+      onMouseLeave(deployment)
+    }
+  }, [onMouseLeave, disabled, deployment])
+
+  const handleOnClick = React.useCallback(() => {
+    if (project && !disabled) {
+      onNavigate(locations.sceneDetail(project.id))
+    }
+  }, [onNavigate, project, disabled])
+
+  const handleUnpublishClick = React.useCallback(() => {
+    onOpenModal('DeployModal', { view: DeployModalView.CLEAR_DEPLOYMENT, deploymentId: deployment.id } as DeployModalMetadata)
+  }, [onOpenModal, deployment])
+
+  return (
+    <div
+      className={`Scene ${project && !disabled ? 'clickable' : ''}`}
+      onClick={handleOnClick}
+      onMouseEnter={handleOnMouseEnter}
+      onMouseLeave={handleOnMouseLeave}
+    >
+      {deployment.thumbnail ? (
+        <div className="thumbnail" style={{ backgroundImage: `url(${deployment.thumbnail})` }}></div>
+      ) : (
+        <div className="no-thumbnail" />
+      )}
+      <div className="stat">
+        <div className="title" title={deployment.name}>
+          {deployment.name}
         </div>
-        <SceneStats deployment={deployment} />
-        <Dropdown
-          trigger={
-            <Button basic>
-              <Icon name="ellipsis horizontal" />
-            </Button>
-          }
-          inline
-          direction="left"
-        >
-          <Dropdown.Menu>
-            <Dropdown.Item
-              text="Unpublish"
-              onClick={() =>
-                onOpenModal('DeployModal', { view: DeployModalView.CLEAR_DEPLOYMENT, deploymentId: deployment.id } as DeployModalMetadata)
-              }
-            />
-          </Dropdown.Menu>
-        </Dropdown>
+        {deployment.layout ? (
+          <div className="secondary-text">
+            {deployment.layout.rows}x{deployment.layout.cols}
+          </div>
+        ) : null}
       </div>
-    )
-  }
+      <SceneStats deployment={deployment} />
+      <Dropdown
+        trigger={
+          <Button basic>
+            <Icon name="ellipsis horizontal" />
+          </Button>
+        }
+        inline
+        disabled={disabled}
+        direction="left"
+      >
+        <Dropdown.Menu>
+          <Dropdown.Item text="Unpublish" onClick={handleUnpublishClick} />
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  )
 }
diff --git a/src/components/LandDetailPage/Scene/Scene.types.ts b/src/components/LandDetailPage/Scene/Scene.types.ts
@@ -3,6 +3,7 @@ import { ProjectState } from 'modules/project/reducer'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 
 export type Props = {
+  disabled?: boolean
   deployment: Deployment
   projects: ProjectState['data']
   onNavigate: (path: string) => void

diff --git a/src/components/LandDetailPage/Scene/index.ts b/src/components/LandDetailPage/Scene/index.ts
@@ -1,2 +1,2 @@
-import Scene from './Scene'
-export default Scene
+export { Scene } from './Scene'
+export type { Props } from './Scene.types'