Function useHistory

src/tools/shape-magic/ShapeMagic.jsx:9–39

import { createInitialState, createShape, PRESETS } from './types';

const useHistory = initialState => {
  const [history, setHistory] = useState([initialState]);
  const [historyIndex, setHistoryIndex] = useState(0);

  const current = history[historyIndex];

  const push = useCallback(
    newState => {
      setHistory(prev => [...prev.slice(0, historyIndex + 1), newState]);
      setHistoryIndex(prev => prev + 1);
    },
    [historyIndex]
  );

  const undo = useCallback(() => {
    if (historyIndex > 0) {
      setHistoryIndex(prev => prev - 1);
    }
  }, [historyIndex]);

  const redo = useCallback(() => {
    if (historyIndex < history.length - 1) {
      setHistoryIndex(prev => prev + 1);
    }
  }, [historyIndex, history.length]);

  const canUndo = historyIndex > 0;
  const canRedo = historyIndex < history.length - 1;

  return { current, push, undo, redo, canUndo, canRedo };
};

export default function ShapeMagic({ toolSelector }) {
  const isMobile = useBreakpointValue({ base: true, lg: false });