Merge pull request #22 from oslabs-beta/josh/jumpingBack

send a snap array in sequence to jump back and forth

Author: rydang

extension/app/containers/MainContainer.jsx

@@ -10,23 +10,23 @@ class MainContainer extends Component {
     this.state = {
       snapshots: [],
       snapshotIndex: 0,
+      currentIndex: null,
       port: null,
     };
 
     this.handleChangeSnapshot = this.handleChangeSnapshot.bind(this);
     this.handleSendSnapshot = this.handleSendSnapshot.bind(this);
-    this.emptySnapshot = this.emptySnapshot.bind(this)
+    this.emptySnapshot = this.emptySnapshot.bind(this);
   }
 
-  
-  
   componentDidMount() {
     // open connection with background script
     const port = chrome.runtime.connect();
 
     // listen for a message containing snapshots from the background script
     port.onMessage.addListener((snapshots) => {
       console.log('message from background script', snapshots);
+      console.log('snapshots', this.state.snapshots);
       const snapshotIndex = snapshots.length - 1;
 
       // set state with the information received from the background script
@@ -41,13 +41,11 @@ class MainContainer extends Component {
     // assign port to state so it could be used by other components
     this.setState({ port });
   }
-  
-  emptySnapshot(){
-    const { port } = this.state;
 
-    this.setState({ snapshots: [] })
-    
-    port.postMessage({action: 'emptySnap', payload: [] });
+  emptySnapshot() {
+    const { port } = this.state;
+    this.setState({ snapshots: [] });
+    port.postMessage({ action: 'emptySnap', payload: [] });
   }
 
   // change the snapshot index
@@ -60,7 +58,26 @@ class MainContainer extends Component {
   // when the jump button is clicked, send a message to npm package with the selected snapshot
   handleSendSnapshot(snapshotIndex) {
     const { snapshots, port } = this.state;
-    port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
+    let { currentIndex } = this.state;
+    const payload = [];
+
+    currentIndex = currentIndex === null ? snapshots.length - 1 : currentIndex;
+
+    if (currentIndex > snapshotIndex) {
+      for (let i = currentIndex - 1; i >= snapshotIndex; i -= 1) {
+        payload.push(snapshots[i]);
+      }
+    } else {
+      for (let i = currentIndex + 1; i <= snapshotIndex; i += 1) {
+        payload.push(snapshots[i]);
+      }
+    }
+
+    this.setState({ currentIndex: snapshotIndex });
+
+    console.log('payload', payload);
+    port.postMessage({ action: 'stepToSnap', payload });
+    // port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
   }
 
   render() {
@@ -76,7 +93,7 @@ class MainContainer extends Component {
             snapshotIndex={snapshotIndex}
             handleChangeSnapshot={this.handleChangeSnapshot}
             handleSendSnapshot={this.handleSendSnapshot}
-            emptySnapshot = {this.emptySnapshot}
+            emptySnapshot={this.emptySnapshot}
           />
           <StateContainer snapshot={snapshots[snapshotIndex]} />
         </div>

extension/app/containers/StateContainer.jsx

@@ -1,8 +1,14 @@
 import React, { Component } from 'react';
 import ReactJson from 'react-json-view';
 
-const JsonDisplay = snapshot => (
-  <ReactJson enableClipboard={false} theme="solarized" groupArraysAfterLength={50} src={snapshot} />
+const JsonDisplay = (snapshot, index) => (
+  <ReactJson
+    key={`JsonDisplay${index}`}
+    enableClipboard={false}
+    theme="solarized"
+    groupArraysAfterLength={50}
+    src={snapshot}
+  />
 );
 class StateContainer extends Component {
   constructor(props) {
@@ -13,7 +19,7 @@ class StateContainer extends Component {
     let snapshotObjs = [];
     const { snapshot } = this.props;
     if (snapshot) {
-      snapshotObjs = snapshot.map(component => JsonDisplay(component));
+      snapshotObjs = snapshot.map((component, index) => JsonDisplay(component, index));
     }
     return <div className="state-container">{snapshotObjs}</div>;
   }

extension/contentScript.js

@@ -13,4 +13,5 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   console.log('devtools -> contentScript', request);
   const { action } = request;
   if (action === 'jumpToSnap') window.postMessage(request);
+  if (action === 'stepToSnap') window.postMessage(request);
 });

package/index.js

@@ -8,9 +8,10 @@ const unlinkState = require('./unlinkState')(snapShot);
 const getShot = () => snapShot.map(({ component }) => component.state);
 
 window.addEventListener('message', ({ data: { action, payload } }) => {
+  console.log(action, payload);
   if (action === 'jumpToSnap') {
     timeJump(payload);
-  } else if (action === 'stepToJump') {
+  } else if (action === 'stepToSnap') {
     payload.forEach(snap => timeJump(snap));
   }
 });