Build a Kanban board with drag and drop

import { useEffect, useRef, useState } from "react";
import {
  initialBoard,
  moveCard,
  addCard,
  newCardId,
  findCard,
} from "./src/utils/board";
import Column from "./src/components/Column";

export default function App() {
  const [board, setBoard] = useState(initialBoard);
  const [over, setOver] = useState(null); // { colId, index } under the pointer
  const [draggingId, setDraggingId] = useState(null);
  const [grab, setGrab] = useState(null); // keyboard move: { id, snapshot }
  const [message, setMessage] = useState("");
  const dragId = useRef(null); // read in drop handlers; never rendered
  const cardEls = useRef(new Map());

  // A card that moves to another column is a NEW DOM node, so focus is lost.
  // Put it back on the card that is being moved with the keyboard.
  useEffect(() => {
    if (grab) cardEls.current.get(grab.id)?.focus();
  }, [board, grab]);

  const where = (b, id) => {
    const pos = findCard(b, id);
    const col = b.columns.find((c) => c.id === pos.colId);
    return (
      col.title + ", position " + (pos.index + 1) + " of " + col.cardIds.length
    );
  };

  // ---- pointer path: HTML5 drag and drop ----
  const drag = {
    start(e, id) {
      dragId.current = id;
      if (e.dataTransfer) {
        e.dataTransfer.effectAllowed = "move";
        // Firefox needs data to start a drag
        e.dataTransfer.setData("text/plain", id);
      }
      setDraggingId(id);
    },
    over(e, target) {
      if (!dragId.current) return;
      e.preventDefault(); // without this the browser refuses the drop
      setOver((o) =>
        o && o.colId === target.colId && o.index === target.index ? o : target,
      );
    },
    leave(colId) {
      setOver((o) => (o && o.colId === colId ? null : o));
    },
    drop(e, target) {
      e.preventDefault();
      const id = dragId.current;
      if (!id) return;
      const next = moveCard(board, id, target.colId, target.index);
      setBoard(next);
      setMessage(board.cards[id].title + " dropped in " + where(next, id));
      drag.end();
    },
    end() {
      dragId.current = null;
      setDraggingId(null);
      setOver(null);
    },
  };

  // ---- keyboard path: Space picks up, arrows
  // move, Space drops, Escape cancels ----
  function onCardKey(e, id) {
    const title = board.cards[id].title;
    if (e.key === " " || e.key === "Enter") {
      e.preventDefault();
      if (grab) {
        setGrab(null);
        setMessage(title + " dropped in " + where(board, id));
      } else {
        setGrab({ id, snapshot: board });
        setMessage(
          "Picked up " +
            title +
            ". Arrow keys move, Space drops, Escape cancels.",
        );
      }
      return;
    }
    if (!grab || grab.id !== id) return;
    if (e.key === "Escape") {
      setBoard(grab.snapshot);
      setGrab(null);
      setMessage(
        "Move cancelled. " + title + " is back in " + where(grab.snapshot, id),
      );
      return;
    }
    const pos = findCard(board, id);
    const c = board.columns.findIndex((col) => col.id === pos.colId);
    let target = null;
    if (e.key === "ArrowUp" && pos.index > 0) target = [c, pos.index - 1];
    if (
      e.key === "ArrowDown" &&
      pos.index < board.columns[c].cardIds.length - 1
    )
      target = [c, pos.index + 2];
    if (e.key === "ArrowLeft" && c > 0) target = [c - 1, pos.index];
    if (e.key === "ArrowRight" && c < board.columns.length - 1)
      target = [c + 1, pos.index];
    if (!target) return;
    e.preventDefault();
    const next = moveCard(board, id, board.columns[target[0]].id, target[1]);
    setBoard(next);
    setMessage(title + " moved to " + where(next, id));
  }

  function onAdd(colId, title) {
    // outside the updater: StrictMode runs updaters twice
    const id = newCardId();
    setBoard((b) => addCard(b, colId, id, title));
  }

  return (
    <main className="board-app">
      <h1>Sprint board</h1>
      <p id="kb-help" className="hint">
        Drag cards, or focus one and press Space to pick it up, arrows to move,
        Space to drop.
      </p>
      <div className="board">
        {board.columns.map((col) => (
          <Column
            key={col.id}
            col={col}
            cards={board.cards}
            over={over && over.colId === col.id ? over.index : null}
            draggingId={draggingId}
            grabbedId={grab && grab.id}
            drag={drag}
            onCardKey={onCardKey}
            onAdd={onAdd}
            cardRef={(id, el) =>
              el ? cardEls.current.set(id, el) : cardEls.current.delete(id)
            }
          />
        ))}
      </div>
      <p
        role="status"
        aria-live="polite"
        className="sr-only"
        data-testid="live"
      >
        {message}
      </p>
    </main>
  );
}