Merge pull request #78 from victorvrv/victor-dev

Set port to null on start recording so it gets updated.

Author: victorvrv

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "lint": "eslint \"*/**/*.{js,jsx}\"",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "bundle_bg": "browserify src/browser/chrome/background.js -o src/browser/chrome/devtools_bundle/bg_bundle.js"
+    "bundle_bg": "browserify src/browser/chrome/background.js -o src/browser/chrome/devtools_bundle/bg_bundle.js",
+    "build": "npm run bundle_bg & npm run webpack --prefix ./src/app"
   },
   "repository": {
     "type": "git",

src/app/components/App.jsx

@@ -83,20 +83,20 @@ class App extends Component {
         // If the user paused the recording session, we return
         const { isRecording } = this.state;
         if (!isRecording) return;
-
+        console.log('got new data');
         const newData = {
           action: msg.action,
           state: msg.state,
           prevState: msg.prevState,
           id: this.state.data.length,
         };
-
+        
         // search field
         const { searchField } = this.state;
         const newDataActionType = newData.action.type.toLowerCase();
 
         const eventTime = Date.now();
-        
+
         // get the date everytime an action fires and add it to state
         if (newDataActionType.includes(searchField.toLowerCase())) {
           this.setState(state => ({
@@ -151,8 +151,12 @@ class App extends Component {
     // if we are hitting the pause or re-starting the record session
     if (isRecording || this.hasInjectedScript) return;
 
+    // We set our port to null so that when the page refreshes, we can
+    // reupdate it to the new value.
+    this.portToExtension = null;
+
     // This variable will prevent the app from refreshing when we refresh 
-    // the userpage.
+    // the userpage after starting to record.
     this.justStartedRecording = true;
     this.hasInjectedScript = true;
 
@@ -291,6 +295,7 @@ class App extends Component {
 
     this.justStartedRecording = false;
     this.hasInjectedScript = false;
+
     this.setState({
       data: [],
       searchField: '',

src/app/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "start": "nodemon server/server.js",
     "start:dev": "webpack-dev-server --mode development --open --hot",
-    "build": "webpack --watch"
+    "build": "webpack --watch",
+    "webpack": "webpack"
   },
   "babel": {
     "presets": [

src/browser/chrome/extension.js

@@ -8,10 +8,11 @@
     // We get an object { type: 'TIMETRAVEL', direction: 'forward' }
     window.postMessage(msg);
   });
-
+  console.log('inject library');
   window.addEventListener('message', (msg) => {
-    // When our injected scripts post messages (from useRedute in 'react'),
+    // When our injected scripts post messages (from useReducer in 'react'),
     // we receive it here and send it to our app loaded on the DevTool.
+    if (msg.data.type === 'DISPATCH') console.log('Got msg from useReducer: ', msg.data.data);
     if (msg.data.type === 'DISPATCH') port.postMessage(msg.data.data);
   });
 }());