useHistory.ts

import { useEffect, useState } from 'react';

const useHistory = <T>( initialValue: T[] = [] ) => {
	const [isDirty, setIsDirty] = useState( false );
	const [step, setStep] = useState( 0 );
	const [history, setHistory] = useState<T[]>( initialValue );

	useEffect( () => {
		console.log( {
			isDirty,
			step,
			history
		} )
	}, [isDirty, step, history] )

	function undo() {
		if ( step <= 0 ) return;
		console.log( 'UNDO' );

		setStep( s => s - 1 )
		setIsDirty( true )
	}

	function redo() {
		if ( step >= history.length - 1 ) return;
		console.log( 'REDO' );

		setStep( s => s + 1 )
		setIsDirty( s => s ? false : true )
	}

	function addStep( element: T ) {
		console.log( 'ADD-STEP' );

		if ( isDirty ) {
			setHistory( h => [...h.slice( 0, step + 1 ), element] )
			setIsDirty( false )
			setStep( s => s + 1 )
			return;
		}

		setHistory( data => [...data, element] )
		setStep( s => s + 1 )
	}

	return {
		undo,
		redo,
		addStep,
		history,
		step
	}
}

export default useHistory;