Merge pull request #50 from oslabs-beta/rydang/snapshot-and-webpack

state viewer and slider index separated. webpack updated

Author: joshua0308

.gitignore

@@ -1,10 +1,7 @@
 node_modules
 .DS_Store
-dist/
-extension/bundle.js
-package/react-time-travel-1.0.1.tgz
+src/extension/build/bundles
+package/react-time-travel-*.tgz
 tictactoe
-tictactoe/build/bundle.js
-tictactoe/package-lock.json
 parents
 coverage

src/app/components/Action.jsx

@@ -12,21 +12,26 @@ const Action = (props) => {
       role="presentation"
     >
       <div className="action-component-text">{index}</div>
-      <div
+      <button
         className="jump-button"
-        onClick={() => handleJumpSnapshot(index)}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleJumpSnapshot(index);
+        }}
         tabIndex={index}
-        role="button"
+        type="button"
       >
         Jump
-      </div>
+      </button>
     </div>
   );
 };
 
-// Action.propTypes = {
-//   selected: PropTypes.bool,
-//   index: PropTypes.number,
-// };
+Action.propTypes = {
+  selected: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  handleChangeSnapshot: PropTypes.func.isRequired,
+  handleJumpSnapshot: PropTypes.func.isRequired,
+};
 
 export default Action;

src/app/components/MainSlider.jsx

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Slider from 'rc-slider';
 import Tooltip from 'rc-tooltip';
-
+import PropTypes from 'prop-types';
 
 const { Handle } = Slider;
 
@@ -23,27 +23,31 @@ const handle = (props) => {
   );
 };
 
-class mainSlider extends Component {
-  constructor(props) {
-    super(props);
-  }
+const MainSlider = ({
+  snapshotLength,
+  sliderIndex,
+  handleJumpSnapshot,
+  pause,
+}) =>
+  (
+    <Slider
+      min={0}
+      max={snapshotLength - 1}
+      value={sliderIndex}
+      onChange={(index) => {
+        const newIndex = index === -1 ? 0 : index;
+        handleJumpSnapshot(newIndex);
+        pause();
+      }}
+      handle={handle}
+    />
+  );
 
-  render() {
-    return (
-        <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);
-            this.props.pause();
-          }}
-          handle={handle}
-        />
-    );
-  }
-}
+MainSlider.propTypes = {
+  snapshotLength: PropTypes.number.isRequired,
+  sliderIndex: PropTypes.number.isRequired,
+  handleJumpSnapshot: PropTypes.func.isRequired,
+  pause: PropTypes.func.isRequired,
+};
 
-export default mainSlider;
+export default MainSlider;

src/app/components/Tree.jsx

@@ -2,11 +2,16 @@ import React from 'react';
 import JSONTree from 'react-json-tree';
 import PropTypes from 'prop-types';
 
-const getItemString = (type, data, itemType, itemString) => (
-  <span>
-    {data.name}
-  </span>
-);
+const getItemString = (type, data) => {
+  // check to make sure that we are on the tree node, not anything else
+  if (Object.keys(data).length === 3 && typeof data.state === 'object' && typeof data.name === 'string' && Array.isArray(data.children)) {
+    return (
+      <span>
+        {data.name}
+      </span>
+    );
+  }
+};
 
 const Tree = (props) => {
   const { snapshot } = props;
@@ -19,7 +24,7 @@ const Tree = (props) => {
           shouldExpandNode={() => true}
           getItemString={getItemString}
           labelRenderer={(raw) => {
-            if (typeof raw[0] !== 'number') return <span>{raw[0]}</span>;
+            return (typeof raw[0] !== 'number') ? <span>{raw[0]}</span> : null;
           }}
         />
       )}

src/app/containers/ActionContainer.jsx

@@ -4,15 +4,15 @@ import Action from '../components/Action';
 
 const ActionContainer = ({
   snapshots,
-  snapshotIndex,
+  viewIndex,
   handleChangeSnapshot,
   handleJumpSnapshot,
   emptySnapshot,
 }) => {
   let actionsArr = [];
   if (snapshots.length > 0) {
     actionsArr = snapshots.map((snapshot, index) => {
-      const selected = index === snapshotIndex;
+      const selected = index === viewIndex;
       return (
         <Action
           key={`action${index}`}
@@ -28,9 +28,9 @@ const ActionContainer = ({
   return (
     <div className="action-container">
       <div className="action-component exclude">
-        <div className="empty-button" onClick={emptySnapshot}>
+        <button className="empty-button" onClick={emptySnapshot} type="button">
           emptySnapshot
-        </div>
+        </button>
       </div>
       <div>{actionsArr}</div>
     </div>
@@ -41,7 +41,7 @@ ActionContainer.propTypes = {
   snapshots: PropTypes.arrayOf(
     PropTypes.object,
   ).isRequired,
-  snapshotIndex: PropTypes.number.isRequired,
+  viewIndex: PropTypes.number.isRequired,
   handleChangeSnapshot: PropTypes.func.isRequired,
   handleJumpSnapshot: PropTypes.func.isRequired,
   emptySnapshot: PropTypes.func.isRequired,

src/app/containers/ButtonsContainer.jsx

@@ -1,15 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ButtonsContainer = ({ mode: { paused, locked, persist }, toggleMode, importSnapshots, exportSnapshots }) => (
-  <div className="buttons-container">
-    <div className="pause-button" onClick={() => toggleMode('paused')}>{(paused) ? 'Resume' : 'Pause'}</div>
-    <div className="lock-button" onClick={() => toggleMode('locked')}>{(locked) ? 'Unlock' : 'Lock'}</div>
-    <div className="persist-button" onClick={() => toggleMode('persist')}>{(persist) ? 'Unpersist' : 'Persist'}</div>
-    <div className="import-button" onClick={importSnapshots}>Import</div>
-    <div className="export-button" onClick={exportSnapshots}>Export</div>
-  </div>
-);
+const ButtonsContainer = ({
+  mode: { paused, locked, persist },
+  toggleMode,
+  importSnapshots,
+  exportSnapshots,
+}) =>
+  (
+    <div className="buttons-container">
+      <button className="pause-button" type="button" onClick={() => toggleMode('paused')}>{(paused) ? 'Resume' : 'Pause'}</button>
+      <button className="lock-button" type="button" onClick={() => toggleMode('locked')}>{(locked) ? 'Unlock' : 'Lock'}</button>
+      <button className="persist-button" type="button" onClick={() => toggleMode('persist')}>{(persist) ? 'Unpersist' : 'Persist'}</button>
+      <button className="import-button" type="button" onClick={importSnapshots}>Import</button>
+      <button className="export-button" type="button" onClick={exportSnapshots}>Export</button>
+    </div>
+  );
 
 ButtonsContainer.propTypes = {
   toggleMode: PropTypes.func.isRequired,

src/app/containers/MainContainer.jsx

@@ -17,7 +17,8 @@ class MainContainer extends Component {
 
     this.state = {
       snapshots: [],
-      snapshotIndex: 0,
+      sliderIndex: 0,
+      viewIndex: 0,
       port: null,
       playing: false,
       mode: {
@@ -39,15 +40,16 @@ class MainContainer extends Component {
       const { action, payload } = message;
       switch (action) {
         case 'sendSnapshots': {
-          const snapshotIndex = payload.length - 1;
+          const sliderIndex = payload.length - 1;
           // set state with the information received from the background script
-          this.setState({ snapshots: payload, snapshotIndex });
+          this.setState({ snapshots: payload, sliderIndex });
           break;
         }
         case 'initialConnectSnapshots': {
           const { snapshots, mode } = payload;
-          const snapshotIndex = snapshots.length - 1;
-          this.setState({ snapshots, snapshotIndex, mode });
+          const viewIndex = 0;
+          const sliderIndex = viewIndex;
+          this.setState({ snapshots, mode, viewIndex, sliderIndex });
           break;
         }
         default:
@@ -64,21 +66,21 @@ class MainContainer extends Component {
   }
 
   moveBackward() {
-    const { snapshots, snapshotIndex } = this.state;
+    const { snapshots, sliderIndex } = this.state;
     this.pause();
-    if (snapshots.length > 0 && snapshotIndex > 0) {
-      const newIndex = snapshotIndex - 1;
+    if (snapshots.length > 0 && sliderIndex > 0) {
+      const newIndex = sliderIndex - 1;
       // second callback parameter of setState to invoke handleJumpSnapshot
-      this.setState({ snapshotIndex: newIndex }, this.handleJumpSnapshot(newIndex));
+      this.setState({ sliderIndex: newIndex }, this.handleJumpSnapshot(newIndex));
     }
   }
 
   moveForward() {
-    const { snapshots, snapshotIndex } = this.state;
+    const { snapshots, sliderIndex } = this.state;
     this.pause();
-    if (snapshotIndex < snapshots.length - 1) {
-      const newIndex = snapshotIndex + 1;
-      this.setState({ snapshotIndex: newIndex }, this.handleJumpSnapshot(newIndex));
+    if (sliderIndex < snapshots.length - 1) {
+      const newIndex = sliderIndex + 1;
+      this.setState({ sliderIndex: newIndex }, this.handleJumpSnapshot(newIndex));
     }
   }
 
@@ -88,10 +90,10 @@ class MainContainer extends Component {
       const { playing } = this.state;
       if (playing) {
         intervalId = setInterval(() => {
-          const { snapshots, snapshotIndex } = this.state;
-          if (snapshotIndex < snapshots.length - 1) {
-            const newIndex = snapshotIndex + 1;
-            this.setState({ snapshotIndex: newIndex }, this.handleJumpSnapshot(newIndex));
+          const { snapshots, sliderIndex } = this.state;
+          if (sliderIndex < snapshots.length - 1) {
+            const newIndex = sliderIndex + 1;
+            this.setState({ sliderIndex: newIndex }, this.handleJumpSnapshot(newIndex));
           } else {
             // clear interval when play reaches the end
             globalPlaying = false;
@@ -112,22 +114,22 @@ class MainContainer extends Component {
 
   emptySnapshot() {
     const { port, snapshots } = this.state;
-    this.setState({ snapshots: [snapshots[0]], snapshotIndex: 0 });
+    this.setState({ snapshots: [snapshots[0]], sliderIndex: 0, viewIndex: 0 });
     port.postMessage({ action: 'emptySnap' });
   }
 
-  // change the snapshot index
+  // change the view index
   // this will change the state shown in the state container but won't change the DOM
-  handleChangeSnapshot(snapshotIndex) {
-    // snapshotIndex
-    // --> 1. affects the action that is highlighted
-    // --> 2. moves the slider
-    this.setState({ snapshotIndex });
+  handleChangeSnapshot(viewIndex) {
+    this.setState({ viewIndex });
   }
 
-  handleJumpSnapshot(snapshotIndex) {
+  // changes the slider index
+  // this will change the dom but not the state shown in the state container
+  handleJumpSnapshot(sliderIndex) {
     const { snapshots, port } = this.state;
-    port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
+    port.postMessage({ action: 'jumpToSnap', payload: snapshots[sliderIndex] });
+    this.setState({ sliderIndex });
   }
 
   importSnapshots() {
@@ -190,24 +192,23 @@ class MainContainer extends Component {
 
   render() {
     const {
-      snapshots, snapshotIndex, mode, playing, playSpeed,
+      snapshots, viewIndex, sliderIndex, mode, playing, playSpeed,
     } = this.state;
     return (
       <div className="main-container">
         <HeadContainer />
         <div className="body-container">
           <ActionContainer
             snapshots={snapshots}
-            snapshotIndex={snapshotIndex}
+            viewIndex={viewIndex}
             handleChangeSnapshot={this.handleChangeSnapshot}
             handleJumpSnapshot={this.handleJumpSnapshot}
             emptySnapshot={this.emptySnapshot}
           />
-          {(snapshots.length) ? <StateContainer snapshot={snapshots[snapshotIndex]} /> : null}
+          {(snapshots.length) ? <StateContainer snapshot={snapshots[viewIndex]} /> : null}
           <TravelContainer
             snapshotsLength={snapshots.length}
-            snapshotIndex={snapshotIndex}
-            handleChangeSnapshot={this.handleChangeSnapshot}
+            sliderIndex={sliderIndex}
             handleJumpSnapshot={this.handleJumpSnapshot}
             moveBackward={this.moveBackward}
             moveForward={this.moveForward}