【React】多様な操作をまとめて戻る/進むする機能をフックにする

import { useState } from "react";

export type UseTuringTapeRet<T> = {
  current: () => T;
  next: () => null | T;
  prev: () => null | T;
  extendTape: (newData: T) => void;
  addNextCellWithOverrideCursorIncrement: (cell: T) => void;
  cutForwardThanCurrent: () => void;
  reset: (initItem: T) => void;
  tape: T[];
  cursor: number;
};

/**
 * チューリングマシンテープ的な状態管理をするフックです。
 * 時系列準等の順番のある状態管理で特に便利です。
 * 例えば Undo, Redo 機能のあるシステムです。
 * do された時の状態をテープに保持することで Undo, Redo 時にテープのカーソルを動かすだけで直前、直後の状態に遷移できます。
 * @param {T[]} initTape テープの初期状態
 */
export const useTuringTape = <T>(initTape?: T[]): UseTuringTapeRet<T> => {
  /** 現在表示している状態を指すカーソル */
  const [cursor, setCursor] = useState<number>(
    initTape ? initTape.length - 1 : -1
  );
  /** 保持するテープ */
  const [tape, setTape] = useState<T[]>(initTape || []);
  /** テープとカーソルをまっさらにします。axios 等の後から得た非同期データで後から実質的初期化を行うときに便利です */
  const reset = (initItem: T): void => {
    setTape([initItem]);
    setCursor(0);
  };
  /** 現在状態を返します */
  const current = (): T => tape[cursor];
  /** 新しい要素を増やしてテープの先端を伸ばします */
  const extendTape = (newData: T): void => setTape([...tape, newData]);
  /**
   *  現在のカーソルよりも先にテープが余っているならカーソルを先に移動して、移動先要素を返します。
   *  Undo、Redo用状態管理の例では Redo に対応します
   */
  const next = (): null | T => {
    const nextCursor = cursor + 1;
    if (tape[nextCursor] === undefined) {
      // これ以上先がないならば
      return null; // no action
    }
    setCursor((p) => p + 1);
    return tape[nextCursor];
  };

  /**
   *  現在のカーソルがもっとも手前でないならばカーソルを手前に移動して、移動先要素を返します
   *  Undo、Redo用状態管理の例では Undo に対応します
   */
  const prev = (): null | T => {
    const prevCursor = cursor - 1;
    if (tape[prevCursor] === undefined) {
      // これ以上手前がないならば
      return null; // no action
    }
    setCursor((p) => p - 1);

    return tape[prevCursor];
  };

  /**
   *  現在のカーソルの次の要素を上書きして、次の次から先の既存要素を消して、カーソルを次に動かします
   *  Undo, Redo 例では、新規に do された時に実行して新たな状態をテープに追加します。
   *  Undo された後にこれを実行することで過去の Redo と混じって惨事になることを防げます。
   */
  const addNextCellWithOverrideCursorIncrement = (cell: T): void => {
    setTape([...tape.slice(0, cursor + 1), cell]);
    setCursor((preCursor) => preCursor + 1);
  };

  /**
   * 現在のカーソルより先のテープを削除します。
   * ここから先に Redo する場合を無くす時に使えます。
   */
  const cutForwardThanCurrent = () => {
    setTape([...tape.slice(0, cursor + 1)]);
  };

  return {
    current,
    extendTape,
    next,
    prev,
    addNextCellWithOverrideCursorIncrement,
    cutForwardThanCurrent,
    reset,
    tape,
    cursor
  };
};

import { useEffect } from "react";
import { useTuringTape, UseTuringTapeRet } from "./useTuringTape";

type UseTuringTapesControllerRet = {
  reset: () => void;
  undo: () => void;
  redo: () => void;
  tape: UseTuringTapeRet<number>;
};

// tape は空を想定していないので一番目のマスに入れる何も動かない値が必要
const INIT_VAL = -1;

/**
 * 複数のテープを使った Undo / Redo
 * @param tapes Undo / Redo 対象のテープ
 */
export const useTuringTapesController = (
  tapes: Array<{
    tape: UseTuringTapeRet<any>;
    tapeInitItem: any;
  }>
): UseTuringTapesControllerRet => {
  // このテープの指すカーソルが次に undo すべきテープのインデックスを指します
  const cursorTape = useTuringTape<number>([INIT_VAL]);
  // 全テープをリセットします
  const reset = () => {
    tapes.forEach((t) =>
      t.tape.reset(
        typeof t.tapeInitItem === "function" ? t.tapeInitItem() : t.tapeInitItem
      )
    );
    cursorTape.reset(INIT_VAL);
  };

  useEffect(() => {
    // 各テープの新たな要素を追加してカーソルを次に進める処理を改造します
    tapes.forEach((t, i) => {
      // 元々の処理を退避させます
      const old = t.tape.addNextCellWithOverrideCursorIncrement;
      t.tape.addNextCellWithOverrideCursorIncrement = (v) => {
        // 元々の処理を呼びます。単に t.tape.~ とすると無限ループです
        old(v);
        // 管理用のテープを伸ばします
        cursorTape.addNextCellWithOverrideCursorIncrement(i);
        // 操作が起きたテープ以外の現カーソルより先のテープを消します。
        // この消す部分はまとめて進む操作では決して参照されない部分です。
        // この処理はデバッグ時の混乱を抑えるための処理です（使われていない状態が無駄にあるとわかりにくい）。
        tapes.forEach((_t, j) => i !== j && _t.tape.cutForwardThanCurrent());
      };
    });
  }, [tapes, cursorTape]);

  // 戻る
  const undo = () => {
    // 現在管理用テープの指すインデックスのテープがあるならば
    const i = cursorTape.current();
    if (i !== INIT_VAL) {
      // 管理用テープを戻し
      cursorTape.prev();
      // そのテープを undo します
      tapes[i].tape.prev();
    }
  };

  // 進む
  const redo = () => {
    // 管理用テープを一つ進めた部分が次に redo すべきテープのインデックスです
    const i = cursorTape.next();
    if (i != null) {
      // もしインデックスが返って来たのであれば、そのインデックスのテープを redo します
      tapes[i].tape.next();
    }
  };

  return {
    reset,
    undo,
    redo,
    tape: cursorTape
  };
};

const Example: React.FC = () => {
  const makeNewData = () => Math.random();
  const tapeA = useTuringTape<number>([makeNewData()]);
  const tapeB = useTuringTape<number>([makeNewData()]);
  const tapeCursor = useTuringTapesController([
    { tape: tapeA, tapeInitItem: makeNewData },
    { tape: tapeB, tapeInitItem: makeNewData }
  ]);
  
  return (
    <>
      <button
        onClick={() => tapeA.addNextCellWithOverrideCursorIncrement(makeNewData())}
      >
        テープAに関する操作を実行
      </button>
      <button
        onClick={() => tapeB.addNextCellWithOverrideCursorIncrement(makeNewData())}
      >
        テープBに関する操作を実行
      </button>
      <div className="controller">
        <button onClick={() => tapeCursor.reset()}>リセット</button>
        <button onClick={() => tapeCursor.undo()}>戻る</button>
        <button onClick={() => tapeCursor.redo()}>進む</button>
      </div>
    </>
  );
}