Merge pull request #6 from oslabs-beta/rydang/state-record

state is now recorded into snapshot whenever this.setState is called. also snapshot is sent to window

Author: mylee1995

.gitignore

@@ -2,3 +2,5 @@ node_modules
 .DS_Store
 dist/
 extension/bundle.js
+package/react-time-travel-1.0.1.tgz
+testing

package/index.js

@@ -0,0 +1,13 @@
+const snapShot = [];
+
+window.addEventListener('message', ({ data: { action, payload } }) => {
+  if (action === 'jumpToSnap') {
+    console.log('snap received from chrome', payload);
+  }
+});
+
+const linkState = require('./linkState')(snapShot);
+
+module.exports = {
+  linkState,
+};

package/linkState.js

@@ -0,0 +1,29 @@
+// links component state to library
+// changes the setState method to also update our snapshot
+
+module.exports = (snapShot) => {
+  function sendSnapShot() {
+    const payload = snapShot.map(comp => comp.state);
+    window.postMessage({
+      action: 'recordSnap',
+      payload,
+    });
+  }
+
+  return (component) => {
+    snapShot.push(component);
+
+    sendSnapShot();
+
+    const oldSetState = component.setState.bind(component);
+
+    function newSetState(state, callback = () => { }) {
+      oldSetState(state, () => {
+        sendSnapShot();
+        callback();
+      });
+    }
+
+    component.setState = newSetState;
+  };
+};

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-time-travel",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A library that helps debug React by memorizing the state of components with every render.",
   "main": "index.js",
   "repository": {