Minor changes

src/app/components/App.jsx

@@ -1,9 +1,6 @@
 import React, { useContext, Component } from 'react';
 import { createGlobalStyle } from 'styled-components';
 
-// data
-import data from '../data.jsx'
-
 // containers
 import SplitPane from '../container/SplitPane.jsx';
 
@@ -39,7 +36,7 @@ class App extends Component {
     super(props);
 
     this.state = {
-      data: []
+      data: [],
     };
 
     this.addActionToView = this.addActionToView.bind(this);
@@ -50,18 +47,24 @@ 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((portFromExtension) => {
-      portFromExtension.onMessage.addListener(msg => {
-        const newData = { action: msg.action, state: msg.state, id: this.state.data.length };
-        const newDataArray = [...this.state.data, newData];
-        this.setState({ data: newDataArray });
+      portFromExtension.onMessage.addListener((msg) => {
+        const newData = {
+          action: msg.action,
+          state: msg.state,
+          id: this.state.length,
+        };
+        this.setState((state) => ({
+          data: [...state.data, newData]
+        }));
       });
     });
   }
 
   // function to select an event from the data
   // and set state with all required info
   addActionToView(e) {
-    const actionToView = this.state.data.filter(action => e.target.id === String(action.id));
+    const { data } = this.state;
+    const actionToView = data.filter(action => e.target.id === String(action.id));
     const {
       action, id, payload, state,
     } = actionToView[0];
@@ -92,7 +95,7 @@ class App extends Component {
 
   render() {
     const {
-      action, id, payload, state, data
+      action, id, payload, state, data,
     } = this.state;
     return (
       <>
@@ -116,4 +119,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default App;

src/app/components/DetailCards/Actions/ActionsDisplay.jsx

@@ -6,10 +6,10 @@ export default function Actions(props) {
   return (
     <>
       action:
-      {action.type || 'select an event'}
+      {(action && action.type) || 'select an event'}
       <br></br>
       payload:
-      {action.payload || 'select an event'}
+      {(action && action.payload) || 'select an event'}
     </>
   );
 }

src/app/container/Events.jsx

@@ -11,11 +11,11 @@ class Events extends Component {
   }
 
   render() {
-    const { addAction } = this.props;
+    const { addAction, data } = this.props;
     return (
       <>
         <EventsNav />
-        <EventsDisplay data={this.props.data} addAction={addAction} />
+        <EventsDisplay data={data} addAction={addAction} />
       </>
     );
   }

src/app/webpack.config.js

@@ -1,17 +1,17 @@
-var path = require('path');
+const path = require('path');
 
 module.exports = {
   mode: 'development',
   entry: './index.js',
   output: {
     path: path.resolve(__dirname, '../browser/chrome/devtools_bundle'),
-    filename: 'devtools_bundle.js'
+    filename: 'devtools_bundle.js',
   },
   devtool: 'source-map',
   module: {
     rules: [
       { test: /\.(js|jsx)$/, use: 'babel-loader' },
-      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
-    ]
-  }
-}
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+    ],
+  },
+};

src/browser/chrome/background.js

@@ -1,20 +1,18 @@
-chrome.tabs.onUpdated.addListener(function(id, info, tab) {
+chrome.tabs.onUpdated.addListener((id, info, tab) => {
   if (tab.status !== 'complete' || tab.url.startsWith('chrome')) return;
 
   chrome.pageAction.show(tab.id);
   chrome.tabs.executeScript(null, {
     file: 'extension.js',
-    runAt: 'document_end'
+    runAt: 'document_end',
   });
 });
 
-chrome.runtime.onMessage.addListener(msg => {
-  if (msg.hasOwnProperty('init_app') && msg['init_app']) {
-    // the injected script is gonna tell 
-  } else if (msg['react_check']) {
+chrome.runtime.onMessage.addListener((msg) => {
+  if (msg.react_check) {
     console.log('Background got the react_check! Resending...');
-    
-    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       chrome.tabs.sendMessage(tabs[0].id, msg);
     });
   }
@@ -28,7 +26,7 @@ chrome.runtime.onMessage.addListener(msg => {
 //       shouldRedirect = false;
 //       return { redirectUrl: chrome.extension.getURL('hack.js') };
 //     }
-//   }, 
+//   },
 //   { urls: ["<all_urls>"] },
 //   ["blocking"]
-// );
+// );

src/browser/chrome/devtools.js

@@ -1 +1 @@
-chrome.devtools.panels.create('React Rewind', null, 'devtools.html');
+chrome.devtools.panels.create('React Rewind', null, 'devtools.html');

src/browser/chrome/extension.js

@@ -1,21 +1,28 @@
-chrome.runtime.onMessage.addListener(msg => {
-  if (msg['react_check']) {
-    console.log('Extension got the react_check!');
-  }
-})
-console.log('Now listening for messages...');
-
-let port = chrome.runtime.connect({
-  name: "Injected-Background Connection" 
+const port = chrome.runtime.connect({
+  name: 'Injected-Background Connection',
 });
 
 port.onDisconnect.addListener(() => console.log('Disconecting...'));
 
-window.addEventListener("message", msg => {
-  console.log(msg);
-  if (msg.data.type === 'DISPATCH') {
-    // sends message to devtools
-    console.log('Posting msg: ', msg);
-    port.postMessage(msg.data.data);
-  }
+window.addEventListener('message', (msg) => {
+  // When our injected scripts post messages (both from the 'react'
+  // and 'react-dom'), we receive it here and send it to our app loaded
+  // on the DevTool. If storage.isAppTurnedOff is false, it means that
+  // the user started the application, but stopped recording. So even
+  // though our injected scripts keep posting messages, we don't want to
+  // send them over to the App anymore.
+  chrome.storage.sync.get(['isAppTurnedOn'], (status) => {
+    if (!status.isAppTurnedOn) return;
+
+    switch (msg.data.type) {
+      case 'DISPATCH':
+        port.postMessage(msg.data.data);
+        break;
+      case 'EFFECT':
+        console.log('Received effect: ', msg.data);
+        break;
+      default:
+        console.log('default');
+    }
+  });
 });

src/browser/chrome/manifest.json

@@ -12,6 +12,7 @@
   "permissions": [
     "<all_urls>",
     "tabs",
+    "storage",
     "webRequest",
     "webRequestBlocking"
   ],