Build a File Explorer with Nested Drag-and-Drop

import { useRef, useState } from "react";
import TreeRow from "./src/components/TreeRow";
import {
  ROOT,
  initialNodes,
  dropPosition,
  isSelfOrAncestor,
  moveNode,
  describeMove,
  visibleIds,
} from "./src/utils/normalized";

export default function App() {
  const [nodes, setNodes] = useState(initialNodes);
  const [expanded, setExpanded] = useState(
    () => new Set(["src", "src/components", "docs"]),
  );
  const [dragId, setDragId] = useState(null); // for styling the dragged row
  const [dropTarget, setDropTarget] = useState(null); // { id, position, valid }
  const [cutId, setCutId] = useState(null); // keyboard move: Ctrl+X then Ctrl+V
  const [focusId, setFocusId] = useState(nodes[ROOT].childIds[0]);
  const [status, setStatus] = useState("");
  const treeRef = useRef(null);
  // During dragover the browser hides
  // dataTransfer data (protected mode), so the
  // id being dragged is kept here instead of read back from the event.
  const dragRef = useRef(null);

  function toggle(id) {
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function doMove(from, targetId, position) {
    const result = moveNode(nodes, from, targetId, position);
    if (result.error) {
      setStatus(result.error);
      return false;
    }
    if (result.nodes === nodes) return false;
    setNodes(result.nodes);
    if (position === "inside")
      setExpanded((prev) => new Set(prev).add(targetId));
    setStatus(describeMove(nodes, from, targetId, position));
    return true;
  }

  function measure(e, id) {
    const r = e.currentTarget.getBoundingClientRect();
    const position = dropPosition(nodes[id], (e.clientY - r.top) / r.height);
    const parentId = position === "inside" ? id : nodes[id].parentId;
    const valid =
      dragRef.current !== id &&
      !isSelfOrAncestor(nodes, dragRef.current, parentId);
    return { id, position, valid };
  }

  function onDragStart(e, id) {
    // Firefox will not start a drag without data
    e.dataTransfer.setData("text/plain", nodes[id].name);
    e.dataTransfer.effectAllowed = "move";
    dragRef.current = id;
    setDragId(id);
  }

  function onDragOver(e, id) {
    if (!dragRef.current) return;
    const t = measure(e, id);
    if (t.valid) {
      e.preventDefault();
      e.dataTransfer.dropEffect = "move";
    } // preventDefault = "drop allowed here"
    setDropTarget((prev) =>
      prev &&
      prev.id === t.id &&
      prev.position === t.position &&
      prev.valid === t.valid
        ? prev
        : t,
    );
  }

  function onDrop(e, id) {
    e.preventDefault();
    if (dragRef.current) {
      const t = measure(e, id);
      doMove(dragRef.current, id, t.position);
    }
    onDragEnd();
  }

  function onDragEnd() {
    dragRef.current = null;
    setDragId(null);
    setDropTarget(null);
  }

  function focusRow(id) {
    setFocusId(id);
    treeRef.current.querySelector(`[data-id="${id}"]`)?.focus();
  }

  function onKeyDown(e, id) {
    const ids = visibleIds(nodes, expanded);
    const i = ids.indexOf(id);
    const mod = e.ctrlKey || e.metaKey;
    if (e.key === "ArrowDown" && ids[i + 1]) focusRow(ids[i + 1]);
    else if (e.key === "ArrowUp" && ids[i - 1]) focusRow(ids[i - 1]);
    else if (e.key === "Enter" && nodes[id].type === "folder") toggle(id);
    else if (mod && e.key.toLowerCase() === "x") {
      setCutId(id);
      setStatus(
        "Cut " +
          nodes[id].name +
          ". Focus a folder and press Ctrl+V to move it there.",
      );
    } else if (mod && e.key.toLowerCase() === "v" && cutId) {
      const position = nodes[id].type === "folder" ? "inside" : "after";
      if (doMove(cutId, id, position)) setCutId(null);
    } else if (e.key === "Escape" && cutId) {
      setCutId(null);
      setStatus("Move cancelled");
    } else return;
    e.preventDefault();
  }

  const api = {
    nodes,
    expanded,
    dragId,
    dropTarget,
    cutId,
    focusId,
    setFocusId,
    toggle,
    onKeyDown,
    onDragStart,
    onDragOver,
    onDrop,
    onDragEnd,
  };

  return (
    <div className="app">
      <h1>Files</h1>
      <p className="hint">
        Drag a row onto a folder to move it inside, or near a top or bottom edge
        to reorder. Keyboard: Ctrl+X, then Ctrl+V on a folder.
      </p>
      <ul role="tree" aria-label="Project files" className="tree" ref={treeRef}>
        {nodes[ROOT].childIds.map((id) => (
          <TreeRow key={id} id={id} depth={1} api={api} />
        ))}
      </ul>
      <p className="status" role="status" data-testid="status">
        {status}
      </p>
    </div>
  );
}