Function JsonColumnViewProvider

app/hooks/useJsonColumnView.tsx:32–173

({ children }: { children: ReactNode })

);

export function JsonColumnViewProvider({ children }: { children: ReactNode }) {
  const [json] = useJson();
  const { doc, path: initialNodeId } = useJsonDoc();

  const rootNode = React.useMemo(() => {
    return generateColumnViewNode(json);
  }, [json]);

  const jsonReducer = React.useCallback(
    (
      state: ColumnViewState,
      action: ColumnViewAction,
      changes: ColumnViewState
    ): ColumnViewState => {
      if (action.type === "MOVE_UP" || action.type == "MOVE_DOWN") {
        const { selectedNodeId } = state;
        const { highlightedNodeId } = changes;

        invariant(selectedNodeId, "expected selectedNodeId");
        invariant(highlightedNodeId, "expected highlightedNodeId");

        const calculatedPath = calculateStablePath(
          selectedNodeId,
          highlightedNodeId,
          json
        );

        return {
          ...changes,
          selectedNodeId: calculatedPath,
        };
      }

      if (
        action.type === "MOVE_TO_PARENT" &&
        action.source &&
        action.source.altKey
      ) {
        const { selectedNodeId } = state;

        return {
          ...changes,
          selectedNodeId,
        };
      }

      if (action.type === "MOVE_TO_CHILDREN") {
        const { selectedNodeId, highlightedNodeId } = state;

        invariant(selectedNodeId, "expected selectedNodeId");
        invariant(highlightedNodeId, "expected highlightedNodeId");

        // If the previous highlightedNodeId is an ancestor of the previous selectedNodeId
        if (isAncestorOf(highlightedNodeId, selectedNodeId)) {
          // Get the next child of the highlightedNodeId in the path of selectedNodeId
          // And make the highlightedNodeId that next child
          // And keep the selectedNodeId unchanged
          const highlightedPath = new JSONHeroPath(highlightedNodeId);