ready for merge

Author: rydang

package/timeJump.js

@@ -1,7 +1,7 @@
 // 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 +21,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,10 +24,10 @@ 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 '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;
@@ -53,6 +53,8 @@ function MainContainer() {
     dispatch(setPort(port));
   });
 
+  console.log(store);
+
   if (!npmExists) return <div style={{ color: 'black' }}>please install our npm package in your app</div>;
   const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];
 

src/app/reducers/mainReducer.js

@@ -111,42 +111,36 @@ 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(payload).forEach(tab => {
-        if (tab !== 'sourceTab') {
-          const { snapshots: newSnaps } = payload[tab];
-          tabs[tab] = {
-            ...tabs[tab],
-            ...payload[tab],
-            sliderIndex: newSnaps.length - 1,
-          };
-        }
+        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: {

src/extension/background.js

@@ -1,7 +1,7 @@
 let bg;
-const tabsObj = {
-  sourceTab: null,
-};
+const tabsObj = {};
+
+const reloaded = {};
 
 function createTabObj(title) {
   return {
@@ -20,13 +20,10 @@ function createTabObj(title) {
 chrome.runtime.onConnect.addListener(port => {
   bg = port;
 
-  // send it to devtools as soon as connection to devtools is made
-  if (Object.keys(tabsObj).length > 0) {
-    bg.postMessage({
-      action: 'initialConnectSnapshots',
-      payload: tabsObj,
-    });
-  }
+  bg.postMessage({
+    action: 'initialConnectSnapshots',
+    payload: tabsObj,
+  });
 
   // receive snapshot from devtools and send it to contentScript
   port.onMessage.addListener(msg => {
@@ -74,7 +71,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)) {
@@ -84,53 +81,45 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   const { persist } = tabsObj[tabId].mode;
 
   switch (action) {
-    case 'tabReload':
+    case 'tabReload': {
       tabsObj[tabId].firstSnapshot = true;
       tabsObj[tabId].mode.locked = false;
       tabsObj[tabId].mode.paused = false;
-      if (!persist) tabsObj[tabId].snapshots = [];
+      if (!persist) {
+        tabsObj[tabId].snapshots.splice(1);
+        reloaded[tabId] = true;
+      }
+
+      bg.postMessage({
+        action: 'initialConnectSnapshots',
+        payload: tabsObj,
+      });
+
       break;
-    case 'recordSnap':
+    }
+    case 'recordSnap': {
+      const sourceTab = tabId;
+
       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);
-        if (bg) {
-          bg.postMessage({
-            action: 'initialConnectSnapshots',
-            payload: tabsObj,
-          });
-        }
         break;
       }
-
       tabsObj[tabId].snapshots.push(request.payload);
-      tabsObj.sourceTab = tabId;
-
       // send message to devtools
       if (bg) {
         bg.postMessage({
           action: 'sendSnapshots',
           payload: tabsObj,
+          sourceTab,
         });
       }
       break;
+    }
     default:
       break;
   }
 });
 
-// chrome.tabs.onActivated.addListener((info) => {
-//   console.log('this is activated', info);
-//   if (bg) {
-//     console.log('hello', bg);
-//     bg.postMessage({
-//       action: 'activatedTab',
-//       payload: info.tabId,
-//     });
-//   }
-// });
-
 // when tab is closed, remove the tabid from the tabsObj
 chrome.tabs.onRemoved.addListener(tabId => {
   delete tabsObj[tabId];

src/extension/contentScript.js

@@ -1,8 +1,19 @@
+let reloaded = true;
+
 // listening for messages from npm package
 window.addEventListener('message', msg => {
   // post initial Message to npm package
   const { action } = msg.data;
-  if (action === 'recordSnap') chrome.runtime.sendMessage(msg.data);
+  if (action === 'recordSnap') {
+    if (reloaded) {
+      reloaded = false;
+      // since contentScript is run everytime a page is refreshed
+      // tell the background script that the tab has reloaded
+      chrome.runtime.sendMessage({ action: 'tabReload' });
+    }
+
+    chrome.runtime.sendMessage(msg.data);
+  }
 });
 
 // listening for messages from background.js
@@ -20,8 +31,4 @@ chrome.runtime.onMessage.addListener(request => {
   }
 });
 
-// since contentScript is run everytime a page is refreshed
-// tell the background script that the tab has reloaded
-chrome.runtime.sendMessage({ action: 'tabReload' });
-
 window.postMessage({ action: 'contentScriptStarted' });