Merge pull request #88 from oslabs-beta/bryan-sierra/tabs

Bryan sierra/tabs

Author: joshua0308

src/app/components/SwitchApp.jsx

@@ -4,29 +4,27 @@ 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"
       classNamePrefix="react-select"
       value={currTab}
-      // onChange={dispatch(setTab(loadApp))}
       onChange={e => {
         dispatch(setTab(parseInt(e.value, 10)));
-        // console.log(e)
       }}
       options={tabsArray}
     />

src/app/containers/HeadContainer.jsx

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

src/app/containers/MainContainer.jsx

@@ -5,7 +5,9 @@ import StateContainer from './StateContainer';
 import TravelContainer from './TravelContainer';
 import ButtonsContainer from './ButtonsContainer';
 
-import { addNewSnapshots, initialConnect, setPort } from '../actions/actions';
+import {
+  addNewSnapshots, initialConnect, setPort, setTab,
+} from '../actions/actions';
 import { useStoreContext } from '../store';
 
 function MainContainer() {
@@ -25,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;
@@ -34,6 +37,10 @@ function MainContainer() {
           setnpm(true);
           break;
         }
+        case 'activatedTab': {
+          // console.log(payload, 'activatedTab in main Container');
+          break;
+        }
         default:
       }
     });
@@ -47,7 +54,6 @@ function MainContainer() {
   });
 
   if (!npmExists) return <div style={{ color: 'black' }}>please install our npm package in your app</div>;
-
   const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];
 
   // if viewIndex is -1, then use the sliderIndex instead

src/app/reducers/mainReducer.js

@@ -133,18 +133,20 @@ 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,
+          };
+        }
       });
 
       break;
     }
     case types.SET_TAB: {
-      draft.currentTab = action.paylod;
+      draft.currentTab = action.payload;
       break;
     }
     default:

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];