Undo i redo

Napisz hook useHistory(initial) - stan z historią zmian. Zwraca { value, set, undo, redo, canUndo, canRedo }.

set(v) ustawia v jako bieżącą wartość i zapamiętuje poprzednią. undo() przywraca poprzednią wartość, redo() - cofniętą. Nowy set po undo usuwa gałąź do redo. undo i redo bez historii nic nie robią. Kilka wywołań set z rzędu w jednym handlerze musi zostać zapisanych.

function useHistory(initial) {
  // return { value, set, undo, redo, canUndo, canRedo }
}

Ctrl+Enter uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (6)

const { result } = renderHook(() => useHistory('a'));
expect(result.current.value).toBe('a');
expect(result.current.canUndo).toBe(false);
expect(result.current.canRedo).toBe(false);

const { result } = renderHook(() => useHistory(0));
act(() => result.current.set(1));
act(() => result.current.set(2));
act(() => result.current.undo());
expect(result.current.value).toBe(1);
act(() => result.current.undo());
expect(result.current.value).toBe(0);
expect(result.current.canUndo).toBe(false);

const { result } = renderHook(() => useHistory(0));
act(() => result.current.set(1));
act(() => result.current.undo());
expect(result.current.canRedo).toBe(true);
act(() => result.current.redo());
expect(result.current.value).toBe(1);
expect(result.current.canRedo).toBe(false);

const { result } = renderHook(() => useHistory(0));
act(() => result.current.set(1));
act(() => result.current.set(2));
act(() => result.current.undo());
act(() => result.current.set(3));
expect(result.current.value).toBe(3);
expect(result.current.canRedo).toBe(false);
act(() => result.current.undo());
expect(result.current.value).toBe(1);

const { result } = renderHook(() => useHistory('x'));
act(() => result.current.undo());
act(() => result.current.redo());
expect(result.current.value).toBe('x');

const { result } = renderHook(() => useHistory(0));
act(() => {
  result.current.set(1);
  result.current.set(2);
});
act(() => result.current.undo());
expect(result.current.value).toBe(1);