fixed playback button

Author: victorvrv

src/app/components/App.jsx

@@ -71,6 +71,10 @@ class App extends Component {
     // adds listener to the effects that are gonna be sent from
     // our edited useReducer from the 'react' library.
     chrome.runtime.onConnect.addListener((port) => {
+      // if our port is already open with the extension script,
+      // we don't want to change this.portToExtension no more. We want
+      // to keep every instance of the App associated with the specific
+      // extension script that can communicated with the injected timeTravel.
       if (port.name !== 'injected-app' || this.portToExtension) return;
 
       this.portToExtension = port;
@@ -91,10 +95,9 @@ class App extends Component {
         const { searchField } = this.state;
         const newDataActionType = newData.action.type.toLowerCase();
 
-        // get the date everytime an action fires and add it to state
-
         const eventTime = Date.now();
-
+        
+        // get the date everytime an action fires and add it to state
         if (newDataActionType.includes(searchField.toLowerCase())) {
           this.setState(state => ({
             data: [...state.data, newData],
@@ -167,11 +170,13 @@ class App extends Component {
   }
 
   actionInPlay() {
-    const { data, isPlayingIndex, isPlaying } = this.state;
+    const { data, isPlayingIndex } = this.state;
 
     setTimeout(() => {
       this.toTheFuture();
-      if (isPlaying && isPlayingIndex + 1 < data.length - 1) {
+      // We CANT deconstruct isPlaying because we want it to be the value
+      // when this function gets executed - 1000s later.
+      if (this.state.isPlaying && isPlayingIndex + 1 < data.length - 1) {
         this.actionInPlay();
       } else {
         this.setState({ isPlaying: false });
@@ -260,7 +265,7 @@ class App extends Component {
     if (isPlayingIndex === 0) return;
 
     if (!this.portToExtension) return console.error('No connection on stored port.');
-    console.log('Sending timetravel PAST to extension');    
+  
     this.portToExtension.postMessage({
       type: 'TIMETRAVEL',
       direction: 'backwards',
@@ -279,7 +284,8 @@ class App extends Component {
 
   resetApp() {
     if (this.justStartedRecording) {
-      this.justStartedRecording = false;
+      // hacky: some pages will fire update twice on the background script
+      setTimeout(() => this.justStartedRecording = false, 50);
       return;
     }
 

src/browser/chrome/background.js

@@ -7,7 +7,7 @@ const interceptedURLs = {};
 
 chrome.tabs.onUpdated.addListener((id, info, tab) => {
   if (tab.status !== 'complete' || tab.url.startsWith('chrome')) return;
-
+  console.log('refresh completed on: ', tab.url);
   // active page action button and inject extension.js
   chrome.pageAction.show(tab.id);
   chrome.tabs.executeScript(null, {
@@ -24,7 +24,6 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
     { action: 'refresh_devtool', tabId: tab.id },
     'devtools',
   );
-
 });
 
 function handleRequest(request) {

src/browser/chrome/extension.js

@@ -6,7 +6,6 @@
   port.onMessage.addListener((msg) => {
     // This is where we get messages from the App component.
     // We get an object { type: 'TIMETRAVEL', direction: 'forward' }
-    console.log('Got msg to timetravel: ', msg);
     window.postMessage(msg);
   });
 

src/browser/chrome/scripts/parser.js

@@ -107,13 +107,16 @@ function commitAllHostEffectsReplacement() {
 // method names
 const USEREDUCER = 'useReducer';
 const COMMITALLHOSTEFFECTS = 'commitAllHostEffects';
+
 // library key inside of bundle
 const reactLibraryPath = './node_modules/react/cjs/react.development.js';
 const reactDOMLibraryPath = './node_modules/react-dom/cjs/react-dom.development.js';
+
 // get replacer method 
 let injectableUseReducer = esprima.parseScript(useReducerReplacement.toString());
-
-let injectableCommitAllHostEffects = esprima.parseScript(commitAllHostEffectsReplacement.toString());
+let injectableCommitAllHostEffects = esprima.parseScript(
+  commitAllHostEffectsReplacement.toString(),
+);
 
 // traverse ast to find method and replace body with our node's body
 function traverseTree(replacementNode, functionName, ast) {
@@ -136,7 +139,7 @@ function traverseBundledTree(replacementNode, functionName, ast, library) {
       if (node.key && node.key.value === library) {
         if (node.value.body.body[1].type === 'ExpressionStatement') {
           if (node.value.body.body[1].expression.callee.name === 'eval') {
-           // create new ast 
+            // create new ast 
             const reactLib = esprima.parseScript(node.value.body.body[1].expression.arguments[0].value);
              estraverse.traverse(reactLib, {
               enter(libNode) {