Merge branch 'dev' into rydang/snapshotrefactor

Author: rydang

extension/app/containers/ActionContainer.jsx

@@ -26,7 +26,13 @@ class ActionContainer extends Component {
         );
       });
     }
-    return <div className="action-container">{actionsArr}</div>;
+    return (
+      <div>
+        <button onClick = {this.props.emptySnapshot}>emptySnapshot</button>
+        <div className="action-container">{actionsArr}</div>
+      </div>
+    );
+
   }
 }
 

extension/app/containers/MainContainer.jsx

@@ -15,8 +15,11 @@ class MainContainer extends Component {
 
     this.handleChangeSnapshot = this.handleChangeSnapshot.bind(this);
     this.handleSendSnapshot = this.handleSendSnapshot.bind(this);
+    this.emptySnapshot = this.emptySnapshot.bind(this)
   }
 
+  
+  
   componentDidMount() {
     // open connection with background script
     const port = chrome.runtime.connect();
@@ -38,6 +41,14 @@ class MainContainer extends Component {
     // assign port to state so it could be used by other components
     this.setState({ port });
   }
+  
+  emptySnapshot(){
+    const { port } = this.state;
+
+    this.setState({ snapshots: [] })
+    
+    port.postMessage({action: 'emptySnap', payload: [] });
+  }
 
   // change the snapshot index
   // --> 1. affects the action that is highlighted
@@ -65,6 +76,7 @@ class MainContainer extends Component {
             snapshotIndex={snapshotIndex}
             handleChangeSnapshot={this.handleChangeSnapshot}
             handleSendSnapshot={this.handleSendSnapshot}
+            emptySnapshot = {this.emptySnapshot}
           />
           <StateContainer snapshot={snapshots[snapshotIndex]} />
         </div>

extension/background.js

@@ -3,7 +3,7 @@ console.log('background.js file is running');
 let bg;
 
 // need a function to clear snapshotArr when either tab is closed or page is refreshed
-const snapshotArr = [];
+let snapshotArr = [];
 
 // establishing connection with devtools
 chrome.runtime.onConnect.addListener((port) => {
@@ -19,11 +19,15 @@ chrome.runtime.onConnect.addListener((port) => {
   // receive snapshot from devtools and send it to contentScript
   port.onMessage.addListener((msg) => {
     console.log('background -> contentScript', msg);
-    // find active tab
-    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-      // send message to tab
-      chrome.tabs.sendMessage(tabs[0].id, msg);
-    });
+    if(msg.action==='emptySnap') {
+      snapshotArr = [];
+    } else {
+      // find active tab
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        // send message to tab
+        chrome.tabs.sendMessage(tabs[0].id, msg);
+      });
+    }
   });
 });
 

extension/contentScript.js

@@ -5,7 +5,6 @@ window.addEventListener('message', (msg) => {
   const { action, payload } = msg.data;
 
   if (action === 'recordSnap') chrome.runtime.sendMessage(payload);
-  // console.log(msg);
 });
 
 // listening for messages from background.js