Merge branch 'dev' into bryan/main-reducer-testing

Author: mylee1995

package/timeJump.js

@@ -1,7 +1,8 @@
+/* eslint-disable no-param-reassign */
 // 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 +22,7 @@ module.exports = (origin, mode) => {
     });
   }
 
-
-  return (target) => {
+  return target => {
     // setting mode disables setState from posting messages to window
     mode.jumping = true;
     jump(target);

readme.md

@@ -1,5 +1,13 @@
 # React-Time-Travel
 
+![GitHub](https://img.shields.io/github/license/oslabs-beta/react-time-travel) 
+![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/react-time-travel/dev?label=dev%20build)
+![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/react-time-travel/master?label=master%20build)
+![npm](https://img.shields.io/npm/v/react-time-travel?color=green)
+![David](https://img.shields.io/david/oslabs-beta/react-time-travel)
+![DevDependencies](https://img.shields.io/david/dev/oslabs-beta/react-time-travel.svg)
+![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/oslabs-beta/react-time-travel)
+
 <p align="center">
   <img src="demo.gif" alt="Demo of React-Time-Travel">
 </p>
@@ -10,7 +18,7 @@ Two parts are needed for this tool to function. The chrome extension must be ins
 
 ## Installing
 
-1. Download the Chrome extension from Chrome Web Store.
+1. Download the [extension](https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
 
 2. Install the [npm package](https://www.npmjs.com/package/react-time-travel) in your code.
 

src/app/__tests__/MainContainer.test.js

@@ -1,8 +1,7 @@
 /* eslint-disable react/jsx-filename-extension */
 
-import { mount, configure } from 'enzyme';
+import { shallow, configure } from 'enzyme';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Adapter from 'enzyme-adapter-react-16';
 import MainContainer from '../containers/MainContainer';
 import { useStoreContext } from '../store';
@@ -18,15 +17,8 @@ const chrome = require('sinon-chrome');
 configure({ adapter: new Adapter() });
 
 const state = {
-  tabs: {
-    87: {
-      snapshots: [{}, {}, {}, {}],
-      sliderIndex: 0,
-      viewIndex: -1,
-      mode: {},
-    },
-  },
-  currentTab: 87,
+  tabs: {},
+  currentTab: null,
 };
 
 const dispatch = jest.fn();
@@ -35,12 +27,9 @@ useStoreContext.mockImplementation(() => [state, dispatch]);
 
 let wrapper;
 global.chrome = chrome;
-let eventListener;
 const port = {
   onMessage: {
-    addListener: fn => {
-      eventListener = fn;
-    },
+    addListener: () => {},
   },
   onDisconnect: {
     addListener: () => {},
@@ -49,29 +38,32 @@ const port = {
 chrome.runtime.connect.returns(port);
 
 beforeEach(() => {
-  wrapper = mount(<MainContainer />);
+  wrapper = shallow(<MainContainer />);
   useStoreContext.mockClear();
   dispatch.mockClear();
 });
 
 describe('MainContainer rendering', () => {
-  test.skip('With no connection, should not render any containers', () => {
-    expect(wrapper.text()).toEqual('please install our npm package in your app');
+  test('With no snapshots, should not render any containers', () => {
+    expect(wrapper.text()).toEqual(
+      'No React application found. Please install our npm package in your app.',
+    );
     expect(wrapper.find(HeadContainer).length).toBe(0);
     expect(wrapper.find(ActionContainer).length).toBe(0);
     expect(wrapper.find(StateContainer).length).toBe(0);
     expect(wrapper.find(TravelContainer).length).toBe(0);
     expect(wrapper.find(ButtonsContainer).length).toBe(0);
   });
-  test('With connection established, should render all containers', () => {
-    // fake connect
-    act(() => {
-      eventListener({
-        action: 'initialConnectSnapshots',
-        payload: 'test',
-      });
-    });
-    wrapper.update();
+  test('With snapshots, should render all containers', () => {
+    state.currentTab = 87;
+    state.tabs[87] = {
+      snapshots: [{}],
+      viewIndex: -1,
+      sliderIndex: 0,
+      mode: {},
+    };
+
+    wrapper = shallow(<MainContainer />);
     expect(wrapper.find(HeadContainer).length).toBe(1);
     expect(wrapper.find(ActionContainer).length).toBe(1);
     expect(wrapper.find(StateContainer).length).toBe(1);

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import HeadContainer from './HeadContainer';
 import ActionContainer from './ActionContainer';
 import StateContainer from './StateContainer';
@@ -11,7 +11,6 @@ import {
 import { useStoreContext } from '../store';
 
 function MainContainer() {
-  const [npmExists, setnpm] = useState(false);
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
 
@@ -24,22 +23,21 @@ 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 'deleteTab': {
           dispatch(deleteTab(payload));
           break;
         }
 
         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;
         }
         case 'initialConnectSnapshots': {
           dispatch(initialConnect(payload));
-          setnpm(true);
           break;
         }
         default:
@@ -54,7 +52,19 @@ function MainContainer() {
     dispatch(setPort(port));
   });
 
-  if (!npmExists) return <div style={{ color: 'black' }}>Please install our npm package in your app</div>;
+  if (!tabs[currentTab]) {
+    return (
+      <div className="error-container">
+        <a
+          href="https://www.npmjs.com/package/react-time-travel"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          No React application found. Please install our npm package in your app.
+        </a>
+      </div>
+    );
+  }
   const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];
 
   // if viewIndex is -1, then use the sliderIndex instead

src/app/reducers/mainReducer.js

@@ -111,46 +111,40 @@ 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(tabs).forEach(tab => {
-        if (tab !== 'sourceTab') {
-          if (!payload[tab]) {
-            delete tabs[tab];
-          } else {
-            const { snapshots: newSnaps } = payload[tab];
-            tabs[tab] = {
-              ...tabs[tab],
-              ...payload[tab],
-              sliderIndex: newSnaps.length - 1,
-            };
-          }
+        if (!payload[tab]) {
+          delete tabs[tab];
+        } else {
+          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: {
@@ -162,7 +156,7 @@ export default (state, action) => produce(state, draft => {
       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];
+        const newCurrentTab = parseInt(Object.keys(draft.tabs)[0], 10);
         draft.currentTab = newCurrentTab;
       }
       break;

src/app/styles/styles.scss

@@ -18,15 +18,30 @@ body {
   overflow: hidden;
 }
 
+.error-container {
+  height: 100%;
+  margin: 0 auto;
+  background-color: $brand-color;
+  overflow: hidden;
+
+  display: grid;
+  justify-content: center;
+  a {
+    color: white;
+    margin-top: 5%;
+    height: 3%;
+  }
+}
+
 .body-container {
   height: 94%;
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 8fr 1fr;
   grid-template-areas:
-    "actions states"
-    "travel travel"
-    "buttons buttons";
+    'actions states'
+    'travel travel'
+    'buttons buttons';
 }
 
 /* if extension width is less than 500px, stack the body containers */
@@ -35,10 +50,10 @@ body {
     grid-template-rows: 3fr 5fr 1fr;
     grid-template-columns: auto;
     grid-template-areas:
-      "actions"
-      "states"
-      "travel"
-      "buttons";
+      'actions'
+      'states'
+      'travel'
+      'buttons';
   }
 }
 .travel-container {