connected backend with frontend using linkFiber

Author: joshua0308

src/app/components/Action.jsx

@@ -1,28 +1,33 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 const Action = (props) => {
   const {
-    selected, handleChangeSnapshot, handleSendSnapshot, index,
+    selected, handleChangeSnapshot, handleJumpSnapshot, index,
   } = props;
   return (
     <div
       className={selected ? 'action-component selected' : 'action-component'}
-      onClick={() => {
-        handleChangeSnapshot(index);
-      }}
+      onClick={() => handleChangeSnapshot(index)}
+      role="presentation"
     >
       <div className="action-component-text">{index}</div>
-      <div className="jump-button" onClick={() => handleSendSnapshot(index)}>
+      <div
+        className="jump-button"
+        onClick={() => handleJumpSnapshot(index)}
+        onKeyPress={() => console.log('key pressed')}
+        tabIndex={index}
+        role="button"
+      >
         Jump
       </div>
     </div>
   );
 };
 
-Action.propTypes = {
-  selected: PropTypes.bool,
-  index: PropTypes.number,
-};
+// Action.propTypes = {
+//   selected: PropTypes.bool,
+//   index: PropTypes.number,
+// };
 
 export default Action;

src/app/components/Slider.jsx

@@ -5,49 +5,48 @@ import Tooltip from 'rc-tooltip';
 import 'rc-slider/assets/index.css';
 import 'rc-tooltip/assets/bootstrap.css';
 
-const Handle  = Slider.Handle;
-
+const { Handle } = Slider;
 
 const handle = (props) => {
-    const { value, dragging, index, ...restProps } = props;
-
-    return (
-      <Tooltip
-        prefixCls="rc-slider-tooltip"
-        overlay={value}
-        visible={dragging}
-        placement="top"
-        key={index}
-      >
-        <Handle value={value} {...restProps} />
-      </Tooltip>
-    );
+  const {
+    value, dragging, index, ...restProps
+  } = props;
+
+  return (
+    <Tooltip
+      prefixCls="rc-slider-tooltip"
+      overlay={value}
+      visible={dragging}
+      placement="top"
+      key={index}
+    >
+      <Handle value={value} {...restProps} />
+    </Tooltip>
+  );
 };
 
 class mainSlider extends Component {
-    constructor(props){
-        super(props)
-    }
+  constructor(props) {
+    super(props);
+  }
 
-
-    render(){
-        return(
-            <div>
-                <Slider 
-                min={0} 
-                max={this.props.snapshotLength-1} 
-                value = {this.props.snapshotIndex}
-                onChange={(index) => {
-                    index = index === -1 ? 0 : index;
-                    this.props.handleChangeSnapshot(index)
-                }}
-                handle={handle}
-                 >
-                </Slider>
-            </div>
-        )
-    }
+  render() {
+    return (
+      <div>
+        <Slider
+          min={0}
+          max={this.props.snapshotLength - 1}
+          value={this.props.snapshotIndex}
+          onChange={(index) => {
+            index = index === -1 ? 0 : index;
+            this.props.handleChangeSnapshot(index);
+            this.props.handleJumpSnapshot(index);
+          }}
+          handle={handle}
+        />
+      </div>
+    );
+  }
 }
 
 export default mainSlider;
-

src/app/containers/ActionContainer.jsx

@@ -8,7 +8,11 @@ class ActionContainer extends Component {
 
   render() {
     const {
-      snapshots, snapshotIndex, handleChangeSnapshot, handleSendSnapshot,
+      snapshots,
+      snapshotIndex,
+      handleChangeSnapshot,
+      handleJumpSnapshot,
+      emptySnapshot,
     } = this.props;
     let actionsArr = [];
     if (snapshots.length > 0) {
@@ -21,15 +25,15 @@ class ActionContainer extends Component {
             snapshot={snapshot}
             selected={selected}
             handleChangeSnapshot={handleChangeSnapshot}
-            handleSendSnapshot={handleSendSnapshot}
+            handleJumpSnapshot={handleJumpSnapshot}
           />
         );
       });
     }
     return (
       <div className="action-container">
         <div className="action-component">
-          <div className="empty-button" onClick={this.props.emptySnapshot}>
+          <div className="empty-button" onClick={emptySnapshot}>
             emptySnapshot
           </div>
         </div>

src/app/containers/MainContainer.jsx

@@ -5,18 +5,17 @@ import StateContainer from './StateContainer';
 import TravelContainer from './TravelContainer';
 
 class MainContainer extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = {
       snapshots: [],
-      snapshotsTree: null,
       snapshotIndex: 0,
       currentIndex: null,
       port: null,
     };
-
     this.handleChangeSnapshot = this.handleChangeSnapshot.bind(this);
     this.handleSendSnapshot = this.handleSendSnapshot.bind(this);
+    this.handleJumpSnapshot = this.handleJumpSnapshot.bind(this);
     this.emptySnapshot = this.emptySnapshot.bind(this);
   }
 
@@ -57,6 +56,12 @@ class MainContainer extends Component {
     this.setState({ snapshotIndex });
   }
 
+  handleJumpSnapshot(snapshotIndex) {
+    const { snapshots, port } = this.state;
+    this.setState({ currentIndex: snapshotIndex });
+    port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
+  }
+
   // when the jump button is clicked, send a message to npm package with the selected snapshot
   handleSendSnapshot(snapshotIndex) {
     const { snapshots, port } = this.state;
@@ -88,7 +93,6 @@ class MainContainer extends Component {
 
   render() {
     const { snapshots, snapshotIndex } = this.state;
-
     return (
       <div className="main-container">
         <HeadContainer />
@@ -97,14 +101,15 @@ class MainContainer extends Component {
             snapshots={snapshots}
             snapshotIndex={snapshotIndex}
             handleChangeSnapshot={this.handleChangeSnapshot}
-            handleSendSnapshot={this.handleSendSnapshot}
+            handleJumpSnapshot={this.handleJumpSnapshot}
             emptySnapshot={this.emptySnapshot}
           />
           <StateContainer snapshot={snapshots[snapshotIndex]} />
         </div>
         <TravelContainer
           snapshotsLength={snapshots.length}
           handleChangeSnapshot={this.handleChangeSnapshot}
+          handleJumpSnapshot={this.handleJumpSnapshot}
           snapshotIndex={snapshotIndex}
         />
       </div>

src/app/containers/TravelContainer.jsx

@@ -1,8 +1,5 @@
 import React, { Component } from 'react';
-import Slider from '../components/Slider'
-
-
-
+import Slider from '../components/Slider';
 
 class TravelContainer extends Component {
   constructor(props) {
@@ -12,17 +9,17 @@ class TravelContainer extends Component {
   render() {
     return (
       <div>
-      <div className="travel-container">TravelContainer</div>
-      <Slider 
-        className="travel-slider" 
-        snapshotLength = {this.props.snapshotsLength} 
-        handleChangeSnapshot = {this.props.handleChangeSnapshot}
-        snapshotIndex = {this.props.snapshotIndex}
-      />
-      {`travelContainer snapshotIndex ${this.props.snapshotIndex}`}
+        <div className="travel-container">TravelContainer</div>
+        <Slider
+          className="travel-slider"
+          snapshotLength={this.props.snapshotsLength}
+          handleChangeSnapshot={this.props.handleChangeSnapshot}
+          handleJumpSnapshot={this.props.handleJumpSnapshot}
+          snapshotIndex={this.props.snapshotIndex}
+        />
+        {`travelContainer snapshotIndex ${this.props.snapshotIndex}`}
       </div>
-    )
-
+    );
   }
 }
 export default TravelContainer;

src/app/styles/components/_jsonTree.scss

@@ -3,4 +3,5 @@
   padding: 10px;
   background-color: $brand-color;
   list-style: none;
+  min-width: 300px;
 }

src/extension/background.js

@@ -32,7 +32,7 @@ chrome.runtime.onConnect.addListener((port) => {
 
 // background.js recieves message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  console.log(request);
+  console.log('npm -> background', request);
   // if port is not null, send a message to devtools
   if (bg) {
     // get active tab id

src/extension/contentScript.js

@@ -3,7 +3,7 @@ console.log('contentScript running');
 // listening for messages from npm package
 window.addEventListener('message', (msg) => {
   const { action, payload } = msg.data;
-  console.log(msg.data);
+  console.log('npm -> contentScript', msg.data);
   if (action === 'recordSnap') chrome.runtime.sendMessage(payload);
 });
 
@@ -12,6 +12,14 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   // send the message to npm package
   console.log('devtools -> contentScript', request);
   const { action } = request;
-  if (action === 'jumpToSnap') window.postMessage(request);
-  if (action === 'stepToSnap') window.postMessage(request);
+  switch (action) {
+    case 'jumpToSnap':
+      window.postMessage(request);
+      break;
+    case 'stepToSnap':
+      window.postMessage(request);
+      break;
+    default:
+      break;
+  }
 });