multiple tabs implemented

Author: rydang

src/app/actions/actions.js

@@ -5,22 +5,14 @@ export const toggleMode = mode => ({
   payload: mode,
 });
 
-export const addNewSnapshots = snapshots => ({
+export const addNewSnapshots = tabsObj => ({
   type: types.NEW_SNAPSHOTS,
-  payload: {
-    snapshots,
-    sliderIndex: snapshots.length - 1,
-  },
+  payload: tabsObj,
 });
 
-export const initialConnect = (snapshots, mode) => ({
+export const initialConnect = tabsObj => ({
   type: types.INITIAL_CONNECT,
-  payload: {
-    snapshots,
-    mode,
-    sliderIndex: 0,
-    viewIndex: -1,
-  },
+  payload: tabsObj,
 });
 
 export const setPort = port => ({
@@ -70,3 +62,8 @@ export const importSnapshots = newSnaps => ({
   type: types.IMPORT,
   payload: newSnaps,
 });
+
+export const setTab = tab => ({
+  type: types.SET_TAB,
+  payload: tab,
+});

src/app/components/App.jsx

@@ -5,16 +5,8 @@ import mainReducer from '../reducers/mainReducer';
 
 const initialState = {
   port: null,
-  sliderIndex: 0,
-  viewIndex: -1,
-  intervalId: null,
-  playing: false,
-  snapshots: [],
-  mode: {
-    locked: false,
-    paused: false,
-    persist: false,
-  },
+  currentTab: null,
+  tabs: {},
 };
 
 function App() {

src/app/components/MainSlider.jsx

@@ -6,6 +6,7 @@ import Tooltip from 'rc-tooltip';
 import PropTypes from 'prop-types';
 
 import { changeSlider, pause } from '../actions/actions';
+import { useStoreContext } from '../store';
 
 const { Handle } = Slider;
 
@@ -27,7 +28,10 @@ const handle = (props) => {
   );
 };
 
-function MainSlider({ snapshotsLength, sliderIndex, dispatch }) {
+function MainSlider({ snapshotsLength }) {
+  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  const { sliderIndex } = tabs[currentTab];
+
   return (
     <Slider
       min={0}
@@ -45,8 +49,6 @@ function MainSlider({ snapshotsLength, sliderIndex, dispatch }) {
 
 MainSlider.propTypes = {
   snapshotsLength: PropTypes.number.isRequired,
-  sliderIndex: PropTypes.number.isRequired,
-  dispatch: PropTypes.func.isRequired,
 };
 
 export default MainSlider;

src/app/constants/actionTypes.js

@@ -10,3 +10,4 @@ export const PAUSE = 'PAUSE';
 export const PLAY = 'PLAY';
 export const INITIAL_CONNECT = 'INITIAL_CONNECT';
 export const NEW_SNAPSHOTS = 'NEW_SNAPSHOTS';
+export const SET_TAB = 'SET_TAB';

src/app/containers/ActionContainer.jsx

@@ -6,7 +6,9 @@ import { emptySnapshots } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 function ActionContainer() {
-  const [{ snapshots, sliderIndex, viewIndex }, dispatch] = useStoreContext();
+  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  const { snapshots, sliderIndex, viewIndex } = tabs[currentTab];
+  // const [{ snapshots, sliderIndex, viewIndex }, dispatch] = useStoreContext();
   let actionsArr = [];
   // build actions array
   if (snapshots.length > 0) {

src/app/containers/ButtonsContainer.jsx

@@ -36,7 +36,9 @@ function importHandler(dispatch) {
 }
 
 function ButtonsContainer() {
-  const [{ snapshots, mode: { paused, locked, persist } }, dispatch] = useStoreContext();
+  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  const { snapshots, mode: { paused, locked, persist } } = tabs[currentTab];
+  // const [{ snapshots, mode: { paused, locked, persist } }, dispatch] = useStoreContext();
   return (
     <div className="buttons-container">
       <button className="pause-button" type="button" onClick={() => dispatch(toggleMode('paused'))}>

src/app/containers/MainContainer.jsx

@@ -5,15 +5,21 @@ import StateContainer from './StateContainer';
 import TravelContainer from './TravelContainer';
 import ButtonsContainer from './ButtonsContainer';
 
-import { addNewSnapshots, initialConnect, setPort } from '../actions/actions';
+import {
+  addNewSnapshots, initialConnect, setPort,
+} from '../actions/actions';
 import { useStoreContext } from '../store';
 
+let npmPackageExists = false;
 
 function MainContainer() {
-  const [mainState, dispatch] = useStoreContext();
+  const [store, dispatch] = useStoreContext();
+  const { tabs, currentTab, port: currentPort } = store;
 
+  // add event listeners to background script
   useEffect(() => {
-    if (mainState.port) return;
+    // only open port once
+    if (currentPort) return;
     // open connection with background script
     const port = chrome.runtime.connect();
 
@@ -27,8 +33,8 @@ function MainContainer() {
           break;
         }
         case 'initialConnectSnapshots': {
-          const { snapshots, mode } = payload;
-          dispatch(initialConnect(snapshots, mode));
+          npmPackageExists = true;
+          dispatch(initialConnect(payload));
           break;
         }
         default:
@@ -41,15 +47,12 @@ function MainContainer() {
     });
 
     // assign port to state so it could be used by other components
-    // this.setState({ port });
     dispatch(setPort(port));
   });
 
-  const {
-    snapshots,
-    sliderIndex,
-    viewIndex,
-  } = mainState;
+  if (!npmPackageExists) 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
   const snapshotView = (viewIndex === -1) ? snapshots[sliderIndex] : snapshots[viewIndex];

src/app/containers/TravelContainer.jsx

@@ -33,7 +33,9 @@ function play(speed, playing, dispatch, snapshotsLength, sliderIndex) {
 
 function TravelContainer({ snapshotsLength }) {
   const [selectedSpeed, setSpeed] = useState(speeds[1]);
-  const [{ sliderIndex, playing }, dispatch] = useStoreContext();
+  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  const { sliderIndex, playing } = tabs[currentTab];
+  // const [{ sliderIndex, playing }, dispatch] = useStoreContext();
 
   return (
     <div className="travel-container">

src/app/reducers/mainReducer.js

@@ -2,71 +2,86 @@ import * as types from '../constants/actionTypes';
 
 export default function mainReducer(state, action) {
   const {
-    sliderIndex, snapshots, viewIndex, port, mode, intervalId,
+    port, currentTab, tabs,
   } = state;
+  const {
+    snapshots, mode, intervalId, viewIndex, sliderIndex,
+  } = (tabs[currentTab] || {});
+
   switch (action.type) {
     case types.MOVE_BACKWARD: {
       if (snapshots.length > 0 && sliderIndex > 0) {
         const newIndex = sliderIndex - 1;
-        clearInterval(intervalId);
+
         port.postMessage({ action: 'jumpToSnap', payload: snapshots[newIndex] });
+        clearInterval(intervalId);
+
+        tabs[currentTab].sliderIndex = newIndex;
+        tabs[currentTab].playing = false;
+
         return {
           ...state,
-          sliderIndex: newIndex,
-          playing: false,
+          tabs,
         };
       }
       return state;
     }
     case types.MOVE_FORWARD: {
       if (sliderIndex < snapshots.length - 1) {
         const newIndex = sliderIndex + 1;
+
         port.postMessage({ action: 'jumpToSnap', payload: snapshots[newIndex] });
 
-        // if payload is true, then message is coming from the setInterval
+        tabs[currentTab].sliderIndex = newIndex;
+
+        // message is coming from the user
         if (!action.payload) {
           clearInterval(intervalId);
-          return {
-            ...state,
-            sliderIndex: newIndex,
-            playing: false,
-          };
+          tabs[currentTab].playing = false;
         }
+        // message is coming from the setInterval
         return {
           ...state,
-          sliderIndex: newIndex,
+          tabs,
         };
       }
       return state;
     }
     case types.CHANGE_VIEW: {
       // unselect view if same index was selected
-      if (viewIndex === action.payload) return { ...state, viewIndex: -1 };
-      return { ...state, viewIndex: action.payload };
+      if (viewIndex === action.payload) tabs[currentTab].viewIndex = -1;
+      else tabs[currentTab].viewIndex = action.payload;
+
+      return {
+        ...state,
+        tabs,
+      };
     }
     case types.CHANGE_SLIDER: {
       port.postMessage({ action: 'jumpToSnap', payload: snapshots[action.payload] });
-      return { ...state, sliderIndex: action.payload };
+      tabs[currentTab].sliderIndex = action.payload;
+      return { ...state, tabs };
     }
     case types.EMPTY: {
-      port.postMessage({ action: 'emptySnap' });
+      port.postMessage({ action: 'emptySnap', tabd: currentTab });
+      tabs[currentTab].sliderIndex = 0;
+      tabs[currentTab].viewIndex = -1;
+      tabs[currentTab].playing = false;
+      tabs[currentTab].snapshots = [];
       return {
-        sliderIndex: 0,
-        viewIndex: -1,
-        playing: false,
-        snapshots: [],
+        ...state,
+        tabs,
       };
     }
     case types.SET_PORT: {
       return { ...state, port: action.payload };
     }
     case types.IMPORT: {
       port.postMessage({ action: 'import', payload: action.payload });
+      tabs[currentTab].snapshots = action.payload;
       return {
         ...state,
-        snapshots: action.payload,
-        sliderIndex: 0,
-        viewIndex: -1,
+        tabs,
       };
     }
     case types.TOGGLE_MODE: {
@@ -86,35 +101,63 @@ export default function mainReducer(state, action) {
         default:
       }
       port.postMessage({ action: actionText, payload: newMode });
-      return { ...state, mode };
+      return { ...state, tabs };
     }
     case types.PAUSE: {
       clearInterval(intervalId);
-      return { ...state, playing: false, intervalId: null };
+      tabs[currentTab].playing = false;
+      tabs[currentTab].intervalId = null;
+      return { ...state, tabs };
     }
     case types.PLAY: {
+      tabs[currentTab].playing = true;
+      tabs[currentTab].intervalId = action.payload;
       return {
         ...state,
-        playing: true,
-        intervalId: action.payload,
+        tabs,
       };
     }
     case types.INITIAL_CONNECT: {
       const { payload } = action;
+      Object.keys(payload).forEach((tab) => {
+        payload[tab] = {
+          ...payload[tab],
+          sliderIndex: 0,
+          viewIndex: -1,
+          intervalId: null,
+          playing: false,
+        };
+      });
+
+      // only set first tab if current tab is non existent
+      const firstTab = Object.keys(payload)[0];
       return {
         ...state,
-        snapshots: payload.snapshots,
-        mode: payload.mode,
-        viewIndex: payload.viewIndex,
-        sliderIndex: payload.sliderIndex,
+        currentTab: (currentTab === null) ? firstTab : currentTab,
+        tabs: payload,
       };
     }
     case types.NEW_SNAPSHOTS: {
       const { payload } = action;
+
+      Object.keys(payload).forEach((tab) => {
+        const { snapshots: newSnaps } = payload[tab];
+        payload[tab] = {
+          ...tabs[tab],
+          ...payload[tab],
+          sliderIndex: newSnaps.length - 1,
+        };
+      });
+
+      return {
+        ...state,
+        tabs: payload,
+      };
+    }
+    case types.SET_TAB: {
       return {
         ...state,
-        snapshots: payload.snapshots,
-        sliderIndex: payload.sliderIndex,
+        currentTab: action.payload,
       };
     }
     default: