XeNote/components/FolderTree.js

import * as React from "react";
import { TreeView, TreeItem } from "@mui/x-tree-view";
import { useRouter } from "next/router";
import { styled } from "@mui/material/styles";

const TCTreeItem = styled(TreeItem)(({ theme }) => ({
  "& .MuiTreeItem-content": {
    borderRadius: "10px",
    "&:hover": {
      backgroundColor: "rgba(25, 118, 210, 0.59)",
    },
    "& .MuiTreeItem-label": {
      fontSize: "1rem",
      paddingLeft: "6px",
      fontFamily:
        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,',
      lineHeight: 2.0,
    },
  },
}));

export default function FolderTree(props) {
  const router = useRouter();

  const memoTree = React.useMemo(() => renderTree(props.tree), [props.tree]);
  const expandedNodes = [props.tree.id];

  return (
    <>
      <a href="http://localhost:3000">{"<-"} Back To Portfolio</a>

      <TreeView
        aria-label="rich object"
        defaultCollapseIcon={<ChevronDownIcon />}
        defaultExpanded={expandedNodes}
        defaultExpandIcon={<ChevronRightIcon />}
        onNodeSelect={(event, nodIds) => {
          // TODO: already sorted, impliment binary search
          const currentNode = props.flattenNodes.find((aNode) => {
            return aNode.id === nodIds;
          });
          console.log({ currentNode });
          if (currentNode != null && currentNode.routePath != null) {
            router.push(currentNode.routePath);
          }
        }}
        sx={{ overflowY: "scroll" }}
      >
        {memoTree}
      </TreeView>
    </>
  );
}

function ChevronRightIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      height={10}
      width={10}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="m8.25 4.5 7.5 7.5-7.5 7.5"
      />
    </svg>
  );
}

function ChevronDownIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      height={10}
      width={10}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="m19.5 8.25-7.5 7.5-7.5-7.5"
      />
    </svg>
  );
}

function renderTree(nodes, layer = 0) {
  return (
    <TCTreeItem
      key={nodes.id}
      nodeId={nodes.id}
      label={nodes.name}
      sx={{ marginLeft: 1 * layer }}
    >
      {Array.isArray(nodes.children)
        ? nodes.children.map((node) => renderTree(node, layer + 1))
        : null}
    </TCTreeItem>
  );
}