feat: improve data structure (#20)

Author: Patrickroelofs

package.json

@@ -6,23 +6,23 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.ts",
-      "types": "./dist/index.ts",
-      "default": "./dist/index.ts"
+      "import": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
     },
     "./client": {
-      "import": "./dist/exports/client.ts",
-      "types": "./dist/exports/client.ts",
-      "default": "./dist/exports/client.ts"
+      "import": "./src/exports/client.ts",
+      "types": "./src/exports/client.ts",
+      "default": "./src/exports/client.ts"
     },
     "./rsc": {
-      "import": "./dist/exports/rsc.ts",
-      "types": "./dist/exports/rsc.ts",
-      "default": "./dist/exports/rsc.ts"
+      "import": "./src/exports/rsc.ts",
+      "types": "./src/exports/rsc.ts",
+      "default": "./src/exports/rsc.ts"
     }
   },
-  "main": "./dist/index.ts",
-  "types": "./dist/index.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "files": [
     "dist"
   ],

src/components/TreeViewComponent.tsx

@@ -1,73 +1,82 @@
-import type { DocType, TreeNode } from 'src/lib/buildFolderTree.js';
+import type { Document, FlatTree } from 'src/lib/buildFolderTree.js';
 
 import { Link, NavGroup } from '@payloadcms/ui';
 import React from 'react';
 
 import styles from "./styles.module.css";
 
 interface TreeViewClientProps {
-  data: TreeNode[];
+  data: FlatTree;
 }
 
 const TreeViewComponent: React.FC<TreeViewClientProps> = ({ data }) => {
-  // TODO: Reimplement open folder icon
-  const buildNodeHref = (node: TreeNode) => {
-    return `/admin/browse-by-folder/${node.id}`;
-  };
+  const getDocumentLabel = (id: string) => id;
+  const getFolderLabel = (id: string) => data.items[id]?.title || id;
 
-  const buildDocumentHref = (doc: DocType) => {
-    return `/admin/collections/${doc.relationTo}/${doc._id}`;
-  };
+  const renderDocuments = (documents: Document[], depth: number) => {
+    if (!documents.length) {
+      return <span className={styles.emptyState}>No documents found...</span>;
+    }
 
-  const getDocumentLabel = (doc: DocType) => {
-    return doc.title || doc._id;
-  };
-
-  const renderDocuments = (docs: DocType[], depth: number) => {
     return (
-      <ul data-depth={depth}>
-        {docs.map((doc) => (
-          <div className={styles.treeItem} data-type="document" key={doc._id}>
+      <ul className={styles.documentList} data-depth={depth}>
+        {documents.map(doc => (
+          <li className={styles.treeItem} data-type="document" key={doc.id}>
             <Link
-              href={buildDocumentHref(doc)}
-              title={getDocumentLabel(doc)}
+              href="#"
+              title={getDocumentLabel(doc.id)}
             >
               <span className={styles.itemName}>
-                {getDocumentLabel(doc)}
+                {getDocumentLabel(doc.id)}
               </span>
             </Link>
-          </div>
+          </li>
         ))}
       </ul>
     );
   };
 
-  const renderFolders = (nodes: TreeNode[], depth = 0) => (
-    <ul className={styles.documentList} data-depth={depth}>
-      {nodes.map(node => {
-        return (
-          <NavGroup data-depth={depth} isOpen={false} key={node.id} label={node.name}>
-            {node.folders && node.folders.length > 0 && renderFolders(node.folders, depth + 1)}
-            {Array.isArray(node.documents) && node.documents.length > 0 ? renderDocuments(node.documents, depth + 1) : (
-              <span className={styles.emptyState}>
-                No documents found...
-              </span>
-            )}
-          </NavGroup>
-        );
-      })}
-    </ul>
-  );
+  const renderFolders = (folderIds: string[], depth = 0): React.ReactNode => {
+    if (!folderIds.length) { return null; }
+
+    return (
+      <ul data-depth={depth}>
+        {folderIds.map(folderId => {
+          const folderNode = data.items[folderId];
+          if (!folderNode) { return null; }
+
+          const childFolderIds =
+            (folderNode.folders || []).map(f => (typeof f === 'string' ? f : f.id));
+
+          const documents = folderNode.documents || [];
+          const hasFolders = childFolderIds.length > 0;
+          const hasDocuments = documents.length > 0;
+
+          return (
+            <NavGroup
+              data-depth={depth}
+              isOpen={false}
+              key={folderId}
+              label={getFolderLabel(folderId)}
+            >
+              {hasFolders && renderFolders(childFolderIds, depth + 1)}
+              {hasDocuments
+                ? renderDocuments(documents, depth + 1)
+                : !hasFolders && <span className={styles.emptyState}>Empty folder...</span>}
+            </NavGroup>
+          );
+        })}
+      </ul>
+    );
+  };
 
   return (
     <div className={styles.treeView}>
       <NavGroup isOpen={false} label="Folders">
-        {data.length === 0 ? (
-          <span className={styles.emptyState}>
-            No folders found...
-          </span>
+        {data.rootIds.length === 0 ? (
+          <span className={styles.emptyState}>No folders found...</span>
         ) : (
-          renderFolders(data)
+          renderFolders(data.rootIds, 0)
         )}
       </NavGroup>
     </div>

src/components/TreeViewServer.tsx

@@ -1,19 +1,25 @@
-import type { ServerComponentProps } from "payload"
+import type { JsonObject, ServerComponentProps, TypeWithID } from "payload"
 import type { PayloadFolderTreeViewConfig } from "src/index.js"
 
-import type { Folder } from "../lib/buildFolderTree.js";
+import type { FolderEntry } from "../lib/buildFolderTree.js";
 
-import { buildFolderTree } from "../lib/buildFolderTree.js"
+import { buildSimpleFolderTree } from "../lib/buildFolderTree.js"
 import TreeViewComponent from "./TreeViewComponent.js";
 
 export const TreeViewServer = async (props: PayloadFolderTreeViewConfig & ServerComponentProps) => {
   const folders = await props.payload.find({
     collection: 'payload-folders',
-  })
+  });
 
-  const treeData = buildFolderTree({
-    allDocs: folders.docs as Folder[],
-  })
+  const folderEntries: FolderEntry[] = folders.docs.map((doc: JsonObject & TypeWithID) => ({
+    ...doc,
+    _id: doc._id !== undefined ? String(doc._id) : undefined,
+    id: doc.id !== undefined ? String(doc.id) : undefined,
+    folderType: doc.folderType,
+    value: doc.value,
+  }));
+
+  const treeData = buildSimpleFolderTree(folderEntries);
 
   return <TreeViewComponent data={treeData} />
 }

src/components/styles.module.css

@@ -2,6 +2,6 @@
   width: 100%;
 }
 
-.documentList {
-  border-left: 2px solid rgba(0, 0, 0, 0.1);
+.treeItem {
+  list-style: none;
 }