feat: add useHistory

nefe · Mar 7, 2020 · ee2b8a2 · ee2b8a2
1 parent f5dcf7a
commit ee2b8a2
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-scripts": "3.4.0",
-    "regraph-next": "^0.0.1-beat4",
+    "regraph-next": "^0.0.1-beta1",
     "typescript": "^3.7.5",
     "uuid": "^3.3.2"
   },

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>ReGraph Demo</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "ReGraph Demo",
+  "name": "Demo Based ReGraph",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/editor/hooks/useHistory.tsx b/src/editor/hooks/useHistory.tsx
@@ -0,0 +1,98 @@
+import { useReducer, useCallback } from 'react';
+
+// Initial state that we pass into useReducer
+const initialState = {
+  // Array of previous state values updated each time we push a new state
+  past: [],
+  // Current state value
+  present: null,
+  // Will contain "future" state values if we undo (so we can redo)
+  future: []
+};
+
+// Our reducer function to handle state changes based on action
+const reducer = (state, action) => {
+  const { past, present, future } = state;
+  switch (action.type) {
+    case 'UNDO':
+      const previous = past[past.length - 1];
+      const newPast = past.slice(0, past.length - 1);
+
+      return {
+        past: newPast,
+        present: previous,
+        future: [present, ...future]
+      };
+    case 'REDO':
+      const next = future[0];
+      const newFuture = future.slice(1);
+
+      return {
+        past: [...past, present],
+        present: next,
+        future: newFuture
+      };
+    case 'SET':
+      const { newPresent } = action;
+
+      if (newPresent === present) {
+        return state;
+      }
+      return {
+        past: [...past, present],
+        present: newPresent,
+        future: []
+      };
+    case 'CLEAR':
+      const { initialPresent } = action;
+
+      return {
+        ...initialState,
+        present: initialPresent
+      };
+  }
+};
+
+const useHistory = initialPresent => {
+  const [state, dispatch] = useReducer(reducer, {
+    ...initialState,
+    present: initialPresent
+  });
+
+  const canUndo = state.past.length !== 0;
+  const canRedo = state.future.length !== 0;
+
+  // Setup our callback functions
+  // We memoize with useCallback to prevent unecessary re-renders
+
+  const undo = useCallback(
+    () => {
+      if (canUndo) {
+        dispatch({ type: 'UNDO' });
+      }
+    },
+    [canUndo, dispatch]
+  );
+
+  const redo = useCallback(
+    () => {
+      if (canRedo) {
+        dispatch({ type: 'REDO' });
+      }
+    },
+    [canRedo, dispatch]
+  );
+
+  const set = useCallback(newPresent => dispatch({ type: 'SET', newPresent }), [
+    dispatch
+  ]);
+
+  const clear = useCallback(() => dispatch({ type: 'CLEAR', initialPresent }), [
+    dispatch
+  ]);
+
+  // If needed we could also return past and future state
+  return { state: state.present, set, undo, redo, clear, canUndo, canRedo };
+};
+
+export default useHistory;