fixed multi tab issue

Author: joshua0308

src/app/actions/actions.js

@@ -67,3 +67,8 @@ export const setTab = tab => ({
   type: types.SET_TAB,
   payload: tab,
 });
+
+export const deleteTab = tab => ({
+  type: types.DELETE_TAB,
+  payload: tab,
+});

src/app/constants/actionTypes.js

@@ -11,3 +11,4 @@ export const PLAY = 'PLAY';
 export const INITIAL_CONNECT = 'INITIAL_CONNECT';
 export const NEW_SNAPSHOTS = 'NEW_SNAPSHOTS';
 export const SET_TAB = 'SET_TAB';
+export const DELETE_TAB = 'DELETE_TAB';

src/app/containers/MainContainer.jsx

@@ -6,7 +6,7 @@ import TravelContainer from './TravelContainer';
 import ButtonsContainer from './ButtonsContainer';
 
 import {
-  addNewSnapshots, initialConnect, setPort, setTab,
+  addNewSnapshots, initialConnect, setPort, setTab, deleteTab,
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 
@@ -26,6 +26,15 @@ function MainContainer() {
     port.onMessage.addListener(message => {
       const { action, payload } = message;
       switch (action) {
+        case 'deleteTab': {
+          console.log('maincontainer', action, payload);
+          dispatch(deleteTab(payload));
+
+          // if (payload === currentTab) dispatch(setTab(Object.keys(tabs)[0]));
+
+          break;
+        }
+
         case 'sendSnapshots': {
           if (payload.sourceTab !== currentTab) dispatch(setTab(payload.sourceTab));
           // set state with the information received from the background script
@@ -53,7 +62,10 @@ function MainContainer() {
     dispatch(setPort(port));
   });
 
-  if (!npmExists) return <div style={{ color: 'black' }}>please install our npm package in your app</div>;
+  if (!npmExists) return <div style={{ color: 'black' }}>Please install our npm package in your app</div>;
+  // if (!tabs[currentTab]) return <div style={{ color: 'black' }}>Please select another tab</div>;
+  console.log('maincontainer => tabs', tabs);
+  console.log('maincontainer => currentTab', currentTab);
   const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];
 
   // if viewIndex is -1, then use the sliderIndex instead

src/app/reducers/mainReducer.js

@@ -132,14 +132,21 @@ export default (state, action) => produce(state, draft => {
     case types.NEW_SNAPSHOTS: {
       const { payload } = action;
 
-      Object.keys(payload).forEach(tab => {
+      Object.keys(tabs).forEach(tab => {
         if (tab !== 'sourceTab') {
-          const { snapshots: newSnaps } = payload[tab];
-          tabs[tab] = {
-            ...tabs[tab],
-            ...payload[tab],
-            sliderIndex: newSnaps.length - 1,
-          };
+          console.log('reducer => payload', payload);
+          console.log('reducer => tabs[tab]', tabs[tab]);
+          console.log('reducer => state', state);
+          if (!payload[tab]) {
+            delete tabs[tab];
+          } else {
+            const { snapshots: newSnaps } = payload[tab];
+            tabs[tab] = {
+              ...tabs[tab],
+              ...payload[tab],
+              sliderIndex: newSnaps.length - 1,
+            };
+          }
         }
       });
 
@@ -153,6 +160,17 @@ export default (state, action) => produce(state, draft => {
       draft.currentTab = action.payload;
       break;
     }
+    case types.DELETE_TAB: {
+      delete draft.tabs[action.payload];
+      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];
+        draft.currentTab = newCurrentTab;
+      }
+      console.log('reducer => delete tab', action.payload);
+      break;
+    }
     default:
       throw new Error(`nonexistent action: ${action.type}`);
   }

src/extension/background.js

@@ -1,4 +1,4 @@
-let bg;
+const bgArr = [];
 const tabsObj = {
   sourceTab: null,
 };
@@ -18,16 +18,30 @@ function createTabObj(title) {
 
 // establishing connection with devtools
 chrome.runtime.onConnect.addListener(port => {
-  bg = port;
+  bgArr.push(port);
 
+  console.log('bgArr', bgArr);
   // send it to devtools as soon as connection to devtools is made
   if (Object.keys(tabsObj).length > 0) {
-    bg.postMessage({
+    port.postMessage({
       action: 'initialConnectSnapshots',
       payload: tabsObj,
     });
   }
 
+  port.onDisconnect.addListener(e => {
+    console.log('port disconnected => e', e);
+    console.log('port disconnected => port', port);
+    for (let i = 0; i < bgArr.length; i += 1) {
+      if (bgArr[i] === e) {
+        console.log('inside if statement');
+        bgArr.splice(i, 1);
+        break;
+      }
+    }
+    console.log(bgArr);
+  });
+
   // receive snapshot from devtools and send it to contentScript
   port.onMessage.addListener(msg => {
     // ---------------------------------------------------------------
@@ -95,11 +109,11 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         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({
+        if (bgArr.length > 0) {
+          bgArr.forEach(bg => bg.postMessage({
             action: 'initialConnectSnapshots',
             payload: tabsObj,
-          });
+          }));
         }
         break;
       }
@@ -108,30 +122,28 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       tabsObj.sourceTab = tabId;
 
       // send message to devtools
-      if (bg) {
-        bg.postMessage({
+      if (bgArr.length > 0) {
+        bgArr.forEach(bg => bg.postMessage({
           action: 'sendSnapshots',
           payload: tabsObj,
-        });
+        }));
       }
       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 => {
+  // after deleting the tab, send the updated tabs object to devtools
+  if (bgArr.length > 0) {
+    console.log('background => delete tab');
+    bgArr.forEach(bg => bg.postMessage({
+      action: 'deleteTab',
+      payload: tabId,
+    }));
+  }
+
   delete tabsObj[tabId];
 });

src/extension/contentScript.js

@@ -1,7 +1,20 @@
+let firstMessage = true;
+
 // listening for messages from npm package
 window.addEventListener('message', msg => {
+  // window listener picks up the message it sends, so we should filter
+  // messages sent by contentscript
+  if (msg.data.action !== 'contentScriptStarted' && firstMessage) {
+    // since contentScript is run everytime a page is refreshed
+    // tell the background script that the tab has reloaded
+    console.log('before sending tabReload');
+    chrome.runtime.sendMessage({ action: 'tabReload' });
+    firstMessage = false;
+  }
+
   // post initial Message to npm package
   const { action } = msg.data;
+  console.log('before sending recordsnap');
   if (action === 'recordSnap') chrome.runtime.sendMessage(msg.data);
 });
 
@@ -20,8 +33,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' });