Merge pull request #92 from oslabs-beta/rydang/background

background script bugs cleaned out with refreshing

Author: joshua0308

package/timeJump.js

@@ -1,7 +1,8 @@
+/* eslint-disable no-param-reassign */
 // traverses given tree by accessing children through coords array
 function traverseTree(tree, coords) {
   let curr = tree;
-  coords.forEach((coord) => {
+  coords.forEach(coord => {
     curr = curr.children[coord];
   });
   return curr;
@@ -21,8 +22,7 @@ module.exports = (origin, mode) => {
     });
   }
 
-
-  return (target) => {
+  return target => {
     // setting mode disables setState from posting messages to window
     mode.jumping = true;
     jump(target);

src/app/components/SwitchApp.jsx

@@ -9,7 +9,7 @@ const SwitchAppDropdown = () => {
   const tabsArray = [];
 
   Object.keys(tabs).forEach(tab => {
-    if (tab !== 'sourceTab') tabsArray.push({ value: tab, label: tabs[tab].title });
+    tabsArray.push({ value: tab, label: tabs[tab].title });
   });
 
   const currTab = {

src/app/containers/MainContainer.jsx

@@ -24,15 +24,15 @@ function MainContainer() {
 
     // listen for a message containing snapshots from the background script
     port.onMessage.addListener(message => {
-      const { action, payload } = message;
+      const { action, payload, sourceTab } = message;
       switch (action) {
         case 'deleteTab': {
           dispatch(deleteTab(payload));
           break;
         }
 
         case 'sendSnapshots': {
-          if (payload.sourceTab !== currentTab) dispatch(setTab(payload.sourceTab));
+          dispatch(setTab(sourceTab));
           // set state with the information received from the background script
           dispatch(addNewSnapshots(payload));
           break;

src/app/reducers/mainReducer.js

@@ -111,46 +111,40 @@ export default (state, action) => produce(state, draft => {
       const { payload } = action;
       Object.keys(payload).forEach(tab => {
         // check if tab exists in memory
-        if (!tabs[tab]) {
-          // add new tab
-          tabs[tab] = {
-            ...payload[tab],
-            sliderIndex: 0,
-            viewIndex: -1,
-            intervalId: null,
-            playing: false,
-          };
-        }
+        // add new tab
+        tabs[tab] = {
+          ...payload[tab],
+          sliderIndex: 0,
+          viewIndex: -1,
+          intervalId: null,
+          playing: false,
+        };
       });
 
       // only set first tab if current tab is non existent
       const firstTab = parseInt(Object.keys(payload)[0], 10);
-      draft.currentTab = currentTab === null ? firstTab : currentTab;
-
+      if (currentTab === undefined || currentTab === null) draft.currentTab = firstTab;
       break;
     }
     case types.NEW_SNAPSHOTS: {
       const { payload } = action;
 
       Object.keys(tabs).forEach(tab => {
-        if (tab !== 'sourceTab') {
-          if (!payload[tab]) {
-            delete tabs[tab];
-          } else {
-            const { snapshots: newSnaps } = payload[tab];
-            tabs[tab] = {
-              ...tabs[tab],
-              ...payload[tab],
-              sliderIndex: newSnaps.length - 1,
-            };
-          }
+        if (!payload[tab]) {
+          delete tabs[tab];
+        } else {
+          const { snapshots: newSnaps } = payload[tab];
+          tabs[tab] = {
+            ...tabs[tab],
+            ...payload[tab],
+            sliderIndex: newSnaps.length - 1,
+          };
         }
       });
 
       // only set first tab if current tab is non existent
       const firstTab = parseInt(Object.keys(payload)[0], 10);
-      draft.currentTab = currentTab === null ? firstTab : currentTab;
-
+      if (currentTab === undefined || currentTab === null) draft.currentTab = firstTab;
       break;
     }
     case types.SET_TAB: {
@@ -162,7 +156,7 @@ export default (state, action) => produce(state, draft => {
       if (draft.currentTab === action.payload) {
         // if the deleted tab was set to currentTab, replace currentTab with
         // the first tabId within tabs obj
-        const newCurrentTab = Object.keys(draft.tabs)[0];
+        const newCurrentTab = parseInt(Object.keys(draft.tabs)[0], 10);
         draft.currentTab = newCurrentTab;
       }
       break;

src/extension/background.js

@@ -1,8 +1,8 @@
-const portsArr = [];
 // store ports in an array
-const tabsObj = {
-  sourceTab: null,
-};
+const portsArr = [];
+const reloaded = {};
+const firstSnapshotReceived = {};
+const tabsObj = {};
 
 function createTabObj(title) {
   return {
@@ -13,7 +13,6 @@ function createTabObj(title) {
       locked: false,
       paused: false,
     },
-    firstSnapshot: true,
   };
 }
 
@@ -86,7 +85,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   // Filter out tabs that don't have react-time-travel
   if (action === 'tabReload' || action === 'recordSnap') {
     isReactTimeTravel = true;
-  }
+  } else return;
 
   // everytime we get a new tabid, add it to the object
   if (isReactTimeTravel && !(tabId in tabsObj)) {
@@ -96,17 +95,33 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   const { persist } = tabsObj[tabId].mode;
 
   switch (action) {
-    case 'tabReload':
-      tabsObj[tabId].firstSnapshot = true;
+    case 'tabReload': {
       tabsObj[tabId].mode.locked = false;
       tabsObj[tabId].mode.paused = false;
-      if (!persist) tabsObj[tabId].snapshots = [];
+      // dont remove snapshots if persisting
+      if (!persist) {
+        tabsObj[tabId].snapshots.splice(1);
+
+        // send a message to devtools
+        portsArr.forEach(bg => bg.postMessage({
+          action: 'initialConnectSnapshots',
+          payload: tabsObj,
+        }));
+      }
+
+      reloaded[tabId] = true;
+
       break;
-    case 'recordSnap':
-      if (tabsObj[tabId].firstSnapshot) {
-        tabsObj[tabId].firstSnapshot = false;
-        // don't add anything to snapshot storage if mode is persisting for the initial snapshot
-        if (!persist) tabsObj[tabId].snapshots.push(request.payload);
+    }
+    case 'recordSnap': {
+      const sourceTab = tabId;
+
+      // first snapshot received from tab
+      if (!firstSnapshotReceived[tabId]) {
+        firstSnapshotReceived[tabId] = true;
+        reloaded[tabId] = false;
+
+        tabsObj[tabId].snapshots.push(request.payload);
         if (portsArr.length > 0) {
           portsArr.forEach(bg => bg.postMessage({
             action: 'initialConnectSnapshots',
@@ -116,17 +131,21 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         break;
       }
 
-      tabsObj[tabId].snapshots.push(request.payload);
-      tabsObj.sourceTab = tabId;
+      // don't add anything to snapshot storage if tab is reloaded for the initial snapshot
+      if (reloaded[tabId]) {
+        reloaded[tabId] = false;
+      } else tabsObj[tabId].snapshots.push(request.payload);
 
       // send message to devtools
       if (portsArr.length > 0) {
         portsArr.forEach(bg => bg.postMessage({
           action: 'sendSnapshots',
           payload: tabsObj,
+          sourceTab,
         }));
       }
       break;
+    }
     default:
       break;
   }
@@ -144,4 +163,6 @@ chrome.tabs.onRemoved.addListener(tabId => {
 
   // delete the tab from the tabsObj
   delete tabsObj[tabId];
+  delete reloaded[tabId];
+  delete firstSnapshotReceived[tabId];
 });