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) => {
          const currentNode = binaryFind(props.flattenNodes, nodIds);
          // const currentNode = props.flattenNodes.find((aNode) => {
          //   console.log(aNode.id);
          //   return aNode.id === nodIds;
          // });
          console.log({ currentNode });
          if (currentNode != null && currentNode.routePath != null) {
            router.push(currentNode.routePath);
          }
        }}
        sx={{ overflowY: "scroll" }}
      >
        {memoTree}
      </TreeView>
    </>
  );
}

function binaryFind(sourceList, valToFind) {
  let leftIndex = 0;
  let rightIndex = sourceList.length - 1;
  let middleIndex;
  while (rightIndex >= leftIndex) {
    middleIndex = leftIndex + Math.floor((rightIndex - leftIndex) / 2);
    const currentValue = sourceList[middleIndex];
    console.log(currentValue);
    // If the element is present at the middle
    // itself
    if (currentValue.id == valToFind) return currentValue;

    // If element is smaller than mid, then
    // it can only be present in left subarray
    if (currentValue.id > valToFind) rightIndex = middleIndex - 1;
    // Else the element can only be present
    // in right subarray
    else leftIndex = middleIndex + 1;
  }

  // We reach here when element is not
  // present in array
  return null;
}

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>
  );
}