add filters for asset explorer

Author: nicoecheza

packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css

@@ -10,6 +10,10 @@
   height: 100%;
 }
 
+.ImportAsset .children.hidden {
+  display: none;
+}
+
 .ImportAssetHover {
   padding: 8px;
 }

packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react'
+import React, { PropsWithChildren, useCallback, useEffect, useState, useMemo } from 'react'
 import cx from 'classnames'
 import { HiOutlineUpload } from 'react-icons/hi'
 
@@ -117,6 +117,8 @@ const ImportAsset = React.forwardRef<InputRef, PropsWithChildren<PropTypes>>(({
     [assets]
   )
 
+  const isImportActive = useMemo(() => !files.length && isHover, [files, isHover])
+
   return (
     <div className={cx('ImportAsset', { ImportAssetHover: isHover })}>
       <FileInput
@@ -127,16 +129,15 @@ const ImportAsset = React.forwardRef<InputRef, PropsWithChildren<PropTypes>>(({
         accept={ACCEPTED_FILE_TYPES}
         multiple
       >
-        {!files.length && isHover ? (
+        {isImportActive && (
           <>
             <div className="upload-icon">
               <HiOutlineUpload />
             </div>
             <span className="text">Drop {ACCEPTED_FILE_TYPES_STR} files</span>
           </>
-        ) : (
-          children
         )}
+        <div className={cx('children', { hidden: isImportActive })}>{children}</div>
         <Modal
           isOpen={!!files.length}
           onRequestClose={handleCloseModal}

packages/@dcl/inspector/src/components/ProjectAssetExplorer/Filters/Filters.css

@@ -0,0 +1,33 @@
+.ProjectFilters {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  height: calc(100% - 30px);
+  overflow-y: auto;
+  user-select: none;
+}
+
+.ProjectFilters .filter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  margin-bottom: 10px;
+  border-radius: 8px;
+}
+
+.ProjectFilters .filter:last-child {
+  margin: 0;
+}
+
+.ProjectFilters .filter:hover,
+.ProjectFilters .filter.active {
+  background-color: var(--accent-blue-07);
+}
+
+.ProjectFilters .filter svg {
+  width: 20px;
+  height: 20px;
+  margin-bottom: 4px;
+}

packages/@dcl/inspector/src/components/ProjectAssetExplorer/Filters/Filters.tsx

@@ -0,0 +1,48 @@
+import { useCallback } from 'react'
+import cx from 'classnames'
+import { AiOutlineSound as AudioIcon } from 'react-icons/ai'
+import { IoIosImage as ImageIcon } from 'react-icons/io'
+import { IoCubeOutline as ModelIcon, IoVideocamOutline as VideoIcon } from 'react-icons/io5'
+import { FaFile as AssetIcon } from 'react-icons/fa'
+import { GoClock as RecentIcon } from 'react-icons/go'
+
+import { PropTypes, Filter } from './types'
+
+import './Filters.css'
+
+export function Filters({ filters, active, onClick }: PropTypes) {
+  const getFilter = useCallback((type: Filter) => {
+    switch (type) {
+      case 'all':
+        return { title: 'All Assets', icon: AssetIcon }
+      case 'recents':
+        return { title: 'Recents', icon: RecentIcon }
+      case 'models':
+        return { title: 'Models', icon: ModelIcon }
+      case 'images':
+        return { title: 'Images', icon: ImageIcon }
+      case 'audio':
+        return { title: 'Audio', icon: AudioIcon }
+      case 'video':
+        return { title: 'Video', icon: VideoIcon }
+      case 'other':
+        return { title: 'Other', icon: AssetIcon }
+    }
+  }, [])
+
+  const handleClick = useCallback((type: Filter) => () => onClick(type), [])
+
+  return (
+    <div className="ProjectFilters">
+      {filters.map(($) => {
+        const _filter = getFilter($)
+        return (
+          <div className={cx('filter', { active: $ === active })} onClick={handleClick($)}>
+            {<_filter.icon />}
+            {_filter.title}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

packages/@dcl/inspector/src/components/ProjectAssetExplorer/Filters/index.ts

@@ -0,0 +1 @@
+export { Filters } from './Filters'

packages/@dcl/inspector/src/components/ProjectAssetExplorer/Filters/types.ts

@@ -0,0 +1,7 @@
+export type Filter = 'all' | 'recents' | 'models' | 'images' | 'video' | 'audio' | 'other'
+
+export type PropTypes = {
+  filters: Filter[]
+  active?: Filter
+  onClick(type: Filter): void
+}

packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectAssetExplorer.css

@@ -4,8 +4,8 @@
 }
 
 .ProjectView > .Tree-View {
-  border-right: 0.1px solid;
-  border-color: var(--border-gray);
+  border-right: 0.1px solid var(--border-gray);
+  border-left: 0.1px solid var(--border-gray);
 }
 
 .ProjectView > .Tree-View > .with-context-menu > .editor-assets-tree {

packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx

@@ -11,13 +11,18 @@ import { Tree } from '../Tree'
 import { Modal } from '../Modal'
 import { Button } from '../Button'
 import FolderIcon from '../Icons/Folder'
-import { AssetNode, AssetNodeFolder } from './types'
-import { getFullNodePath } from './utils'
+import { AssetNodeFolder } from './types'
+import { getFilterFromTree, getFullNodePath } from './utils'
 import Search from '../Search'
 import { withAssetDir } from '../../lib/data-layer/host/fs-utils'
 import { removeAsset } from '../../redux/data-layer'
 import { useAppDispatch } from '../../redux/hooks'
 import { determineAssetType, extractFileExtension } from '../ImportAsset/utils'
+import { generateAssetTree, getChildren as _getChildren, TreeNode, ROOT, getTiles } from './tree'
+import { Filters } from './Filters'
+import { Filter } from './Filters/types'
+
+export { TreeNode }
 
 function noop() {}
 
@@ -32,81 +37,34 @@ interface ModalState {
   entities: Entity[]
 }
 
-export const ROOT = 'File System'
-
 export const DRAG_N_DROP_ASSET_KEY = 'local-asset'
 
-export type TreeNode = Omit<AssetNode, 'children'> & { children?: string[]; matches?: string[] }
-
 const FilesTree = Tree<string>()
 
 function ProjectView({ folders, thumbnails }: Props) {
   const sdk = useSdk()
   const dispatch = useAppDispatch()
   const [open, setOpen] = useState(new Set<string>())
   const [modal, setModal] = useState<ModalState | undefined>(undefined)
-  const [lastSelected, setLastSelected] = useState<string>()
+  const [lastSelected, setLastSelected] = useState<string>(ROOT)
   const [search, setSearch] = useState<string>('')
   const [tree, setTree] = useState<Map<string, TreeNode>>(new Map())
-
-  const getTree = useCallback(() => {
-    function getPath(node: string, children: string) {
-      if (!node) return children
-      return `${node}/${children}`
-    }
-    const tree = new Map<string, TreeNode>()
-    tree.set(ROOT, { children: folders.map((f) => f.name), name: ROOT, type: 'folder', parent: null })
-    open.add(ROOT)
-
-    function hasMatch(name: string) {
-      return search && name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
-    }
-
-    function generateTree(node: AssetNodeFolder, parentName: string = ''): string[] {
-      const namePath = getPath(parentName, node.name)
-      const childrens = node.children.map((c) => `${namePath}/${c.name}`)
-      const matchesList: string[] = []
-      for (const children of node.children) {
-        if (children.type === 'folder') {
-          matchesList.push(...generateTree(children, namePath))
-        } else {
-          const name = getPath(namePath, children.name)
-          const matches = hasMatch(name)
-          if (matches) {
-            open.add(name)
-            matchesList.push(name)
-          }
-          tree.set(name, { ...children, matches: matches ? [name] : [], parent: node })
-        }
-      }
-      if (matchesList.length) {
-        open.add(namePath)
-      }
-      tree.set(namePath, { ...node, children: childrens, parent: null, matches: matchesList })
-      return matchesList
-    }
-
-    for (const f of folders) {
-      generateTree(f)
-    }
-    return tree
-  }, [folders, search])
+  const [filters, setFilters] = useState<Filter[]>([])
+  const [activeFilter, setActiveFilter] = useState<Filter>('all')
 
   useEffect(() => {
-    setTree(getTree())
-  }, [folders, search])
-
-  /**
-   * Values
-   */
-  const selectedTreeNode = tree.get(lastSelected ?? ROOT)
+    const { tree, filters } = generateAssetTree(folders, open, search, activeFilter)
+    setTree(tree)
+    setFilters(getFilterFromTree(filters))
+  }, [folders, search, activeFilter])
 
   /**
    * Callbacks
    */
 
   const onSelect = useCallback(
     (value: string) => {
+      open.add(value)
       setLastSelected(value)
     },
     [setLastSelected]
@@ -148,7 +106,7 @@ function ProjectView({ folders, thumbnails }: Props) {
       }
       dispatch(removeAsset({ path }))
     },
-    [open, setOpen, selectedTreeNode, lastSelected]
+    [open, setOpen, lastSelected]
   )
 
   const handleConfirm = useCallback(async () => {
@@ -158,11 +116,13 @@ function ProjectView({ folders, thumbnails }: Props) {
   }, [modal, setModal])
 
   const handleModalClose = useCallback(() => setModal(undefined), [])
+
   const handleClickFolder = useCallback(
-    (val: string) => () => {
-      if (lastSelected === val) return
-      open.add(val)
-      setLastSelected(val)
+    (node: TreeNode) => () => {
+      if (node.type === 'asset') return
+      const path = getFullNodePath(node).slice(1)
+      open.add(path)
+      setLastSelected(path)
     },
     [setLastSelected]
   )
@@ -171,16 +131,10 @@ function ProjectView({ folders, thumbnails }: Props) {
 
   const getChildren = useCallback(
     (val: string) => {
-      const value = tree.get(val)
-      if (!value?.children?.length) return []
-      if (!search.length) return value.children
-
-      return value.children.filter(($) => {
-        const childrenValue = tree.get($)
-        return !!childrenValue?.matches?.length
-      })
+      const childs = _getChildren(val, tree, search, activeFilter)
+      return childs
     },
-    [tree, search]
+    [tree, search, activeFilter]
   )
 
   const getThumbnail = useCallback(
@@ -192,6 +146,12 @@ function ProjectView({ folders, thumbnails }: Props) {
     [thumbnails]
   )
 
+  const handleFilterClick = useCallback((type: Filter) => {
+    setActiveFilter(type)
+  }, [])
+
+  const tiles = getTiles(lastSelected, tree, search, activeFilter)
+
   return (
     <>
       <Modal isOpen={!!modal?.isOpen} onRequestClose={handleModalClose} className="RemoveAsset">
@@ -206,6 +166,7 @@ function ProjectView({ folders, thumbnails }: Props) {
         </div>
       </Modal>
       <div className="ProjectView">
+        <Filters filters={filters} active={activeFilter} onClick={handleFilterClick} />
         <div className="Tree-View">
           <Search
             value={search}
@@ -241,31 +202,18 @@ function ProjectView({ folders, thumbnails }: Props) {
           />
         </div>
         <div className="FolderView">
-          {selectedTreeNode?.type === 'folder'
-            ? selectedTreeNode?.children?.map(($) => (
-                <Tile
-                  key={$}
-                  valueId={$}
-                  value={tree.get($)}
-                  getDragContext={handleDragContext}
-                  onSelect={handleClickFolder($)}
-                  onRemove={handleRemove}
-                  getThumbnail={getThumbnail}
-                  dndType={DRAG_N_DROP_ASSET_KEY}
-                />
-              ))
-            : !!selectedTreeNode &&
-              lastSelected && (
-                <Tile
-                  valueId={lastSelected}
-                  value={selectedTreeNode}
-                  getDragContext={handleDragContext}
-                  onSelect={handleClickFolder(selectedTreeNode.name)}
-                  onRemove={handleRemove}
-                  getThumbnail={getThumbnail}
-                  dndType={DRAG_N_DROP_ASSET_KEY}
-                />
-              )}
+          {tiles.map((node) => (
+            <Tile
+              key={node.name}
+              valueId={getFullNodePath(node).slice(1)}
+              value={node}
+              getDragContext={handleDragContext}
+              onSelect={handleClickFolder(node)}
+              onRemove={handleRemove}
+              getThumbnail={getThumbnail}
+              dndType={DRAG_N_DROP_ASSET_KEY}
+            />
+          ))}
         </div>
       </div>
     </>

packages/@dcl/inspector/src/components/ProjectAssetExplorer/Tile/Tile.tsx

@@ -14,10 +14,10 @@ import { ContextMenu as Menu } from '../../ContexMenu'
 import FolderIcon from '../../Icons/Folder'
 import { withContextMenu } from '../../../hoc/withContextMenu'
 import { useContextMenu } from '../../../hooks/sdk/useContextMenu'
+import { determineAssetType, extractFileExtension } from '../../ImportAsset/utils'
 import { Props } from './types'
 
 import './Tile.css'
-import { determineAssetType, extractFileExtension } from '../../ImportAsset/utils'
 
 export const Tile = withContextMenu<Props>(
   ({ valueId, value, getDragContext, onSelect, onRemove, contextMenuId, dndType, getThumbnail }) => {