use-revisioned-state

React hook for keeping the state revisioned and revertable as same as git do. It stores not the whole copy, only the diff of changes.

Example

import useRevisionedState from "use-revisioned-state";

type AppState = {
  users: string[];
  viewsCount: number;
};
function App() {
  const [appState, setAppState, history, revert] = useRevisionedState<AppState>({
    users: ["fatih"],
    viewsCount: 0,
  });

  return (
    <div>
      <button onClick={() => setState({ ...appState, viewsCount: 1 })}>
        increase
      </button>
    </div>
  );
}

After the button click, the history will be:

[
  {
    "hasChange": true,
    "changed": [["viewCount", 1, 0]],
    "added": [],
    "removed": []
  }
]

The changed value "viewCount" will be in the "changed" key with the previous value. The added and removed keys stand for Array and Object keys.

import useRevisionedState from "use-revisioned-state";

type AppState = {
  users: string[];
  viewsCount: number;
};
function App() {
  const [appState, setAppState, history, revert] = useRevisionedState({
    users: ["fatih"],
    viewsCount: 0,
  });

  return (
    <div>
      <button
        onClick={() =>
          setState({ ...appState, viewsCount: 0, users: ["fatih", "sarah"] })
        }
      >
        add user
      </button>
    </div>
  );
}

The change log will be:

[ {
  "hasChange": true,
  "changed": [],
  "added": [ [ "users.1", "sarah" ] ],
  "removed": []
}, ] `

The ChangeLog type looks like:

export type ChangeLog<S> = {
  hasChange: boolean;
  added: [path: string, value: any][];
  removed: [path: string, value: any][];
  changed: [path: string, value: any, previousValue?: any][];
  updated?: [value: S, previousValue: S];
};

The path of the changed value is separated by "." dot. users.0.name corresponds to the users[0].name.

Reverting the history

useRevisionedState hooks returns with the history collection and revert function.

function App() {
  const [appState, setAppState, history, revert] = useRevisionedState({
    users: ["fatih"],
    viewsCount: 0,
  });

  return (
    <div>
      <button
        onClick={() =>
          setState({ ...appState, viewsCount: 0, users: ["fatih", "sarah"] })
        }
      >
        add user
      </button>
      <button
        onClick={() =>
          revert(history[history.length - 1]);
        }
      >
        undo
      </button>
    </div>
  );
}

You can undo the last change by reverting the last change. It will create an another change log.

If you want to revert the whole state, you need to reverse the history and pass it to the revert function.

<button
  onClick={() =>
    const back = [...history];
    back.reverse();
    revert(back);
  }
>
  Revert all changes
</button>

If you want to do the redo, you can count the undo click of user, and slice the history with that number and pass it to the revert function.

Implementing an Undo-Redo

For each Undo and Redo action, you need to go to the history twice as user clicked to the back or redo button, because revert function also writes to the history as same as git cherry-pick.

import useRevisionedState from "use-revisioned-state";
import { useState } from "react";

function App() {
  const [appState, setAppState, history, revert] = useRevisionedState({
    users: [],
    viewCount: 1,
  });

  const [clickedUndoCount, setClickedUndoCount] = useState(0);
  const [clickedRedoCount, setClickedRedoCount] = useState(0);

  return (
    <div className="App">
      {appState.viewCount}
      <br />
      <button
        onClick={() => {
          setClickedUndoCount(0);
          setAppState({ ...appState, viewCount: appState.viewCount + 1 });
        }}
      >
        Increase
      </button>
      <button
        onClick={() => {
          setClickedUndoCount(clickedUndoCount + 1);
          revert([
            history[history.length - 1 - clickedUndoCount * 2],
          ]);
        }}
      >
        Undo
      </button>
      <button
        disabled={clickedUndoCount === 0 || clickedUndoCount === clickedRedoCount}
        onClick={() => {
          const back = history[history.length - 1 - clickedRedoCount * 2];
          revert([back]);
          setClickedRedoCount(clickedRedoCount + 1);
        }}
      >
        Redo
      </button>
      <button
        onClick={() => {
          setClickedRedoCount(0);
          setClickedUndoCount(0);
          const back = [...history];
          back.reverse();
          revert(back);
        }}
      >
        Revert all history
      </button>
      <br />
      <h3>The change log</h3>
      {history.map((item) => (
        <pre>{JSON.stringify(item, null, 4)}</pre>
      ))}
    </div>
  );
}