Refreshes the devtools instance when user refreshes tab (#56)

* Fixed bug that made devtool refresh when we started recording.

* added react-json-view to package-lock

* Data stays filtered after new actions get posted

* fixed time travel forward when already at tail of linked list.

Author: victorvrv

src/app/components/App.jsx

@@ -48,6 +48,7 @@ class App extends Component {
     };
 
     this.portToExtension = null;
+    this.justStartedRecording = false;
 
     this.addActionToView = this.addActionToView.bind(this);
     this.toTheFuture = this.toTheFuture.bind(this);
@@ -64,21 +65,31 @@ 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 (port.name === 'injected-app') {
-        this.portToExtension = port;
-
-        port.onMessage.addListener((msg) => {
-          const newData = {
-            action: msg.action,
-            state: msg.state,
-            id: this.state.data.length,
-          };
-          this.setState((state) => ({
+      if (port.name !== 'injected-app') return;
+
+      this.portToExtension = port;
+
+      port.onMessage.addListener((msg) => {
+        const newData = {
+          action: msg.action,
+          state: msg.state,
+          id: this.state.data.length,
+        };
+
+        const { searchField } = this.state;
+        const newDataActionType = newData.action.type.toLowerCase();
+
+        if (newDataActionType.includes(searchField.toLowerCase())) {
+          this.setState(state => ({
             data: [...state.data, newData],
             filteredData: [...state.data, newData],
           }));
-        });
-      }
+        } else {
+          this.setState(state => ({
+            data: [...state.data, newData],
+          }));
+        }
+      });
     });
 
     // We listen to the message from devtools.js (sent originally from 
@@ -93,8 +104,6 @@ class App extends Component {
     });
   }
 
-
-
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
     if (this.state.isPlayingIndex > this.state.data.length - 1) {
@@ -110,9 +119,11 @@ class App extends Component {
     }
   }
 
-  // functionality to change 'record' button to 'pause'
   setIsRecording() {
-    console.log('setIsRecording:', this.state.isRecording)
+    // This variable will prevent the app from refreshing when we refresh 
+    // the userpage. 
+    this.justStartedRecording = true;
+
     this.setState(state => ({
       isRecording: !state.isRecording,
     }));
@@ -206,6 +217,9 @@ class App extends Component {
 
   // function to travel to the FUTURE
   toTheFuture() {
+    const { data, isPlayingIndex } = this.state;
+    if (isPlayingIndex === data.length - 1) return;
+
     if (!this.portToExtension) return console.error('No connection on stored port.');
     this.portToExtension.postMessage({
       type: 'TIMETRAVEL',
@@ -214,7 +228,6 @@ class App extends Component {
 
     // if (isPlayingIndex >= this.state.data.length - 1) isPlayingIndex = 0;
 
-    const { data, isPlayingIndex } = this.state;
     const { id, action, state } = data[isPlayingIndex + 1];
     this.setState(prev => ({
       ...prev,
@@ -229,29 +242,32 @@ class App extends Component {
 
   // function to travel to the PAST
   toThePast() {
+    const { data, isPlayingIndex } = this.state;
+    if (isPlayingIndex === 0) return;
+
     if (!this.portToExtension) return console.error('No connection on stored port.');
     this.portToExtension.postMessage({
       type: 'TIMETRAVEL',
       direction: 'backwards',
     });
 
-    const { data, isPlayingIndex } = this.state;
-
-    if (isPlayingIndex === 0) { 
-      console.log('is playingIdx in toThePast is 0');
-    } else {
-      const { id, action, state } = data[isPlayingIndex - 1];
-      this.setState(prev => ({
-        ...prev,
-        id,
-        action,
-        state,
-        isPlayingIndex: isPlayingIndex - 1,
-      }));
-    }
+    const { id, action, state } = data[isPlayingIndex - 1];
+    this.setState(prev => ({
+      ...prev,
+      id,
+      action,
+      state,
+      isPlayingIndex: isPlayingIndex - 1,
+    }));
   }
 
   resetApp() {
+    if (this.justStartedRecording) {
+      console.log('not reseting...');
+      this.justStartedRecording = false;
+      return;
+    }
+    console.log('reseting...');
     this.setState({
       data: [],
       searchField: '',

src/app/package-lock.json

@@ -25,7 +25,6 @@ function handleRequest(request) {
   // TODO: filter the request from the webRequest call.
   if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false };
 
-  console.log('intercepting... ', request);
   if (request.type === 'script' && !request.url.startsWith('chrome')
   && request.frameId === 0) {
     // TODO: adjust comment
@@ -72,6 +71,59 @@ function addScriptInterception() {
     { urls: ['<all_urls>'] },
     ['blocking'],
   );
+
+  // chrome.webRequest.onBeforeSendHeaders.addListener(
+  //   (request) => {
+  //     if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false };
+
+  //     if (request.type !== 'script' || request.url.startsWith('chrome')
+  //       || request.frameId !== 0) return;
+
+  //     request.requestHeaders.push({
+  //       name: 'Access-Control-Allow-Credentials',
+  //       value: '*',
+  //     });
+
+  //     request.requestHeaders.push({
+  //       name: 'Accept',
+  //       value: 'application/javascript',
+  //     });
+
+  //     request.requestHeaders.push({
+  //       name: 'ABC',
+  //       value: 'abc',
+  //     });
+
+  //     for (let i = 0; i < request.requestHeaders.length; i++) {
+  //       const header = request.requestHeaders[i];
+  //       if (header.name === 'Origin') {
+  //         console.log('found one');
+  //         delete request.requestHeaders[i];
+  //       }
+  //     }
+
+  //     console.log('intercepting fom beforesendheaders:  ', request);
+  //   },
+  //   { urls: ['<all_urls>'] },
+  //   ['blocking', 'requestHeaders'],
+  // );
+
+  // chrome.webRequest.onHeadersReceived.addListener((request) => {
+  //   if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false };
+
+  //   if (request.type !== 'script' || request.url.startsWith('chrome')
+  //     || request.frameId !== 0) return;
+
+  //   const syncRequest = new XMLHttpRequest();
+  //   syncRequest.open('GET', request.url, false);
+  //   syncRequest.send(null);
+
+  //   console.log('Got req onHeadersReceived!!!! ', request);
+
+  //   return { redirectUrl: 'data:application/javascript; charset=utf-8,'.concat(syncRequest.responseText) };
+  // },
+  // { urls: ['<all_urls>'] },
+  // ['blocking', 'responseHeaders']);
 }
 
 let reqIndex = 0;