From efc0f49b0a9e7b7278ac5510fd47094e98582777 Mon Sep 17 00:00:00 2001
From: Nicolas Echezarreta <nicoecheza@gmail.com>
Date: Fri, 9 Jun 2023 06:50:44 -0700
Subject: [PATCH] feat: delete asset from context menu for asset tiles (#638)

---
 .../ProjectAssetExplorer.css                  | 27 ----------
 .../ProjectAssetExplorer/ProjectView.tsx      | 42 ++++-----------
 .../ProjectAssetExplorer/Tile/Tile.css        | 27 ++++++++++
 .../ProjectAssetExplorer/Tile/Tile.tsx        | 52 +++++++++++++++++++
 .../ProjectAssetExplorer/Tile/index.ts        |  2 +
 .../ProjectAssetExplorer/Tile/types.ts        | 10 ++++
 6 files changed, 102 insertions(+), 58 deletions(-)
 create mode 100644 packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/Tile.css
 create mode 100644 packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/Tile.tsx
 create mode 100644 packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/index.ts
 create mode 100644 packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/types.ts

diff --git a/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectAssetExplorer.css b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectAssetExplorer.css
index 260d1b349..6045e00d0 100644
--- a/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectAssetExplorer.css
+++ b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectAssetExplorer.css
@@ -63,30 +63,3 @@
   justify-content: left;
   overflow-y: auto;
 }
-
-.ProjectView .FolderView .NodeView {
-  display: flex;
-  flex-direction: column;
-  margin: 8px;
-  align-items: center;
-  height: 72px;
-  width: 72px;
-  border-radius: 8px;
-  background-color: var(--tree-border-color);
-  cursor: pointer;
-  justify-content: space-evenly;
-}
-
-.ProjectView .FolderView .NodeView span {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  width: inherit;
-  padding: 0 8px;
-  text-align: center;
-  font-size: 10px;
-}
-.ProjectView .FolderView .NodeView svg {
-  width: 42px;
-  height: 42px;
-}
diff --git a/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx
index 07d127165..34ef273ce 100644
--- a/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx
+++ b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import { useDrag } from 'react-dnd'
 import { Entity } from '@dcl/ecs'
-import { IoIosArrowDown, IoIosArrowForward, IoIosImage } from 'react-icons/io'
+import { IoIosImage } from 'react-icons/io'
 
 import { useSdk } from '../../hooks/sdk/useSdk'
 import { fileSystemEvent } from '../../hooks/catalog/useFileSystem'
+import { Tile } from './Tile'
 import { Tree } from '../Tree'
 import { Modal } from '../Modal'
 import Button from '../Button'
@@ -140,7 +140,7 @@ function ProjectView({ folders }: Props) {
       }
       await removeAsset(path)
     },
-    [open, setOpen]
+    [open, setOpen, selectedTreeNode, lastSelected]
   )
 
   const removeAsset = useCallback(
@@ -232,21 +232,25 @@ function ProjectView({ folders }: Props) {
         <div className="FolderView">
           {selectedTreeNode?.type === 'folder'
             ? selectedTreeNode?.children?.map(($) => (
-                <NodeView
+                <Tile
                   key={$}
                   valueId={$}
-                  getDragContext={handleDragContext}
                   value={tree.get($)}
+                  getDragContext={handleDragContext}
                   onSelect={handleClickFolder($)}
+                  onRemove={handleRemove}
+                  dndType={DRAG_N_DROP_ASSET_KEY}
                 />
               ))
             : !!selectedTreeNode &&
               lastSelected && (
-                <NodeView
+                <Tile
                   valueId={lastSelected}
                   value={selectedTreeNode}
+                  getDragContext= {handleDragContext}
                   onSelect={handleClickFolder(selectedTreeNode.name)}
-                  getDragContext={handleDragContext}
+                  onRemove={handleRemove}
+                  dndType={DRAG_N_DROP_ASSET_KEY}
                 />
               )}
         </div>
@@ -255,30 +259,6 @@ function ProjectView({ folders }: Props) {
   )
 }
 
-function NodeView({
-  valueId,
-  value,
-  onSelect,
-  getDragContext
-}: {
-  value?: TreeNode
-  onSelect: () => void
-  getDragContext: () => unknown
-  valueId: string
-}) {
-  if (!value) return null
-  const [, drag] = useDrag(
-    () => ({ type: DRAG_N_DROP_ASSET_KEY, item: { value: valueId, context: getDragContext() } }),
-    [valueId]
-  )
-  return (
-    <div ref={drag} className="NodeView" key={value.name} onDoubleClick={onSelect}>
-      {value.type === 'folder' ? <FolderIcon /> : <IoIosImage />}
-      <span>{value.name}</span>
-    </div>
-  )
-}
-
 function NodeIcon({ value }: { value?: TreeNode }) {
   if (!value) return null
   if (value.type === 'folder') {
diff --git a/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/Tile.css b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/Tile.css
new file mode 100644
index 000000000..8065a5ebf
--- /dev/null
+++ b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/Tile.css
@@ -0,0 +1,27 @@
+.Tile {
+  display: flex;
+  flex-direction: column;
+  margin: 8px;
+  align-items: center;
+  height: 72px;
+  width: 72px;
+  border-radius: 8px;
+  background-color: var(--tree-border-color);
+  cursor: pointer;
+  justify-content: space-evenly;
+}
+
+.Tile span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: inherit;
+  padding: 0 8px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.Tile svg {
+  width: 42px;
+  height: 42px;
+}
diff --git a/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/Tile.tsx b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/Tile.tsx
new file mode 100644
index 000000000..0d494534e
--- /dev/null
+++ b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/Tile.tsx
@@ -0,0 +1,52 @@
+import { useCallback } from 'react'
+import { AiFillDelete as DeleteIcon } from 'react-icons/ai'
+import { IoIosImage } from 'react-icons/io'
+import { Menu, Item as MenuItem } from 'react-contexify'
+import { useDrag } from 'react-dnd'
+
+import FolderIcon from '../../Icons/Folder'
+import { withContextMenu } from '../../../hoc/withContextMenu'
+import { useContextMenu } from '../../../hooks/sdk/useContextMenu'
+import { Props } from './types'
+
+import './Tile.css'
+
+export const Tile = withContextMenu<Props>(({
+  valueId,
+  value,
+  getDragContext,
+  onSelect,
+  onRemove,
+  contextMenuId,
+  dndType
+}) => {
+  const { handleAction } = useContextMenu()
+
+  const [, drag] = useDrag(
+    () => ({ type: dndType, item: { value: valueId, context: getDragContext() } }),
+    [valueId]
+  )
+
+  const handleRemove = useCallback(() => {
+    onRemove(valueId)
+  }, [valueId])
+
+  if (!value) return null
+
+  return (
+    <>
+      {/* TODO: support removing folders */}
+      {value.type === 'asset' && (
+        <Menu id={contextMenuId}>
+          <MenuItem id="delete" onClick={handleAction(handleRemove)}>
+            <DeleteIcon /> Delete
+          </MenuItem>
+        </Menu>
+      )}
+      <div ref={drag} className="Tile" key={value.name} onDoubleClick={onSelect}>
+        {value.type === 'folder' ? <FolderIcon /> : <IoIosImage />}
+        <span>{value.name}</span>
+      </div>
+    </>
+  )
+})
diff --git a/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/index.ts b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/index.ts
new file mode 100644
index 000000000..4c5169549
--- /dev/null
+++ b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/index.ts
@@ -0,0 +1,2 @@
+import { Tile } from './Tile'
+export { Tile }
diff --git a/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/types.ts b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/types.ts
new file mode 100644
index 000000000..66ba8f355
--- /dev/null
+++ b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/types.ts
@@ -0,0 +1,10 @@
+import { TreeNode } from '../ProjectView'
+
+export interface Props {
+  valueId: string
+  value?: TreeNode
+  getDragContext: () => unknown
+  onSelect: () => void
+  onRemove: (value: string) => void
+  dndType: string
+}