tab management

Author: mylee1995

src/app/components/SwitchApp.jsx

@@ -4,20 +4,20 @@ import { useStoreContext } from '../store';
 import { setTab } from '../actions/actions';
 
 const SwitchAppDropdown = () => {
-  // const { loadApp } = setTab;
   const [{ currentTab, tabs }, dispatch] = useStoreContext();
 
   const tabsArray = [];
 
   Object.keys(tabs).forEach((tab) => {
-    tabsArray.push({ value: tab, label: tab });
+    if (tab !== 'sourceTab') tabsArray.push({ value: tab, label: tabs[tab].title });
   });
 
   const currTab = {
     value: currentTab,
-    label: currentTab,
+    label: tabs[currentTab].title,
   };
 
+
   return (
     <Select
       className="react-select-container"

src/app/containers/HeadContainer.jsx

@@ -1,10 +1,21 @@
 import React from 'react';
 import SwitchAppDropdown from '../components/SwitchApp';
+import { useStoreContext } from '../store';
+
 
 function HeadContainer() {
+  const [store] = useStoreContext();
+  const { tabs, currentTab } = store;
+  // eslint-disable-next-line prefer-destructuring
+  const title = tabs[currentTab].title;
+  // console.log('tabs', tabs);
+  // console.log('currentTab', currentTab);
   return (
     <div className="head-container">
       <SwitchAppDropdown />
+      <div>
+        {title}
+      </div>
     </div>
   );
 }

src/app/containers/MainContainer.jsx

@@ -6,7 +6,7 @@ import TravelContainer from './TravelContainer';
 import ButtonsContainer from './ButtonsContainer';
 
 import {
-  addNewSnapshots, initialConnect, setPort,
+  addNewSnapshots, initialConnect, setPort, setTab,
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 
@@ -27,6 +27,7 @@ function MainContainer() {
       const { action, payload } = message;
       switch (action) {
         case 'sendSnapshots': {
+          if (payload.sourceTab !== currentTab) dispatch(setTab(payload.sourceTab));
           // set state with the information received from the background script
           dispatch(addNewSnapshots(payload));
           break;
@@ -36,6 +37,10 @@ function MainContainer() {
           setnpm(true);
           break;
         }
+        case 'activatedTab': {
+          // console.log(payload, 'activatedTab in main Container');
+          break;
+        }
         default:
       }
     });

src/app/reducers/mainReducer.js

@@ -123,11 +123,13 @@ export default (state, action) => produce(state, (draft) => {
       const { payload } = action;
 
       Object.keys(payload).forEach((tab) => {
-        const { snapshots: newSnaps } = payload[tab];
-        tabs[tab] = {
-          ...tabs[tab],
-          ...payload[tab],
-          sliderIndex: newSnaps.length - 1,
+        if (tab !== 'sourceTab') {
+          const { snapshots: newSnaps } = payload[tab];
+          tabs[tab] = {
+            ...tabs[tab],
+            ...payload[tab],
+            sliderIndex: newSnaps.length - 1,
+          };
         };
       });
 

src/app/styles/layout/_headContainer.scss

@@ -2,3 +2,10 @@
   height: 5%;
   background-color: $head-color;
 }
+
+.head-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+}

src/extension/background.js

@@ -1,7 +1,11 @@
 let bg;
-const tabsObj = {};
-function createTabObj() {
+const tabsObj = {
+  sourceTab: null,
+};
+
+function createTabObj(title) {
   return {
+    title,
     snapshots: [],
     mode: {
       persist: false,
@@ -62,7 +66,7 @@ chrome.runtime.onConnect.addListener((port) => {
 chrome.runtime.onMessage.addListener((request, sender) => {
   // IGNORE THE AUTOMTAIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED
   if (request.type === 'SIGN_CONNECT') return;
-
+  const tabTitle = sender.tab.title;
   const tabId = sender.tab.id;
   const { action } = request;
   let isReactTimeTravel = false;
@@ -74,7 +78,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 
   // everytime we get a new tabid, add it to the object
   if (isReactTimeTravel && !(tabId in tabsObj)) {
-    tabsObj[tabId] = createTabObj();
+    tabsObj[tabId] = createTabObj(tabTitle);
   }
 
   const { persist } = tabsObj[tabId].mode;
@@ -101,6 +105,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       }
 
       tabsObj[tabId].snapshots.push(request.payload);
+      tabsObj.sourceTab = tabId;
 
       // send message to devtools
       if (bg) {
@@ -111,9 +116,21 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       }
       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];