separated view and slider index

Author: rydang

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,34 @@ const handle = (props) => {
   );
 };
 
-class mainSlider extends Component {
-  constructor(props) {
-    super(props);
-  }
+const MainSlider = ({
+  snapshotLength,
+  handleChangeSnapshot,
+  sliderIndex,
+  handleJumpSnapshot,
+  pause,
+}) =>
+  (
+    <Slider
+      min={0}
+      max={snapshotLength - 1}
+      value={sliderIndex}
+      onChange={(index) => {
+        const newIndex = index === -1 ? 0 : index;
+        handleChangeSnapshot(newIndex);
+        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,
+  handleChangeSnapshot: PropTypes.func.isRequired,
+  sliderIndex: PropTypes.number.isRequired,
+  handleJumpSnapshot: PropTypes.func.isRequired,
+  pause: PropTypes.func.isRequired,
+};
 
-export default mainSlider;
+export default MainSlider;

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}`}
@@ -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/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,17 @@ class MainContainer extends Component {
       const { action, payload } = message;
       switch (action) {
         case 'sendSnapshots': {
-          const snapshotIndex = payload.length - 1;
+          const viewIndex = payload.length - 1;
+          const sliderIndex = viewIndex;
           // set state with the information received from the background script
-          this.setState({ snapshots: payload, snapshotIndex });
+          this.setState({ snapshots: payload, viewIndex, sliderIndex });
           break;
         }
         case 'initialConnectSnapshots': {
           const { snapshots, mode } = payload;
-          const snapshotIndex = snapshots.length - 1;
-          this.setState({ snapshots, snapshotIndex, mode });
+          const viewIndex = snapshots.length - 1;
+          const sliderIndex = viewIndex;
+          this.setState({ snapshots, mode, viewIndex, sliderIndex });
           break;
         }
         default:
@@ -64,21 +67,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 +91,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;
@@ -111,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() {
@@ -189,23 +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}
+            sliderIndex={sliderIndex}
             handleChangeSnapshot={this.handleChangeSnapshot}
             handleJumpSnapshot={this.handleJumpSnapshot}
             moveBackward={this.moveBackward}

src/app/containers/TravelContainer.jsx

@@ -29,7 +29,7 @@ class TravelContainer extends Component {
       snapshotsLength,
       handleChangeSnapshot,
       handleJumpSnapshot,
-      snapshotIndex,
+      sliderIndex,
       play,
       playing,
       pause,
@@ -43,7 +43,7 @@ class TravelContainer extends Component {
         <MainSlider
           snapshotLength={snapshotsLength}
           handleChangeSnapshot={handleChangeSnapshot}
-          snapshotIndex={snapshotIndex}
+          sliderIndex={sliderIndex}
           handleJumpSnapshot={handleJumpSnapshot}
           pause={pause}
         />
@@ -71,7 +71,7 @@ TravelContainer.propTypes = {
   snapshotsLength: PropTypes.number.isRequired,
   handleChangeSnapshot: PropTypes.func.isRequired,
   handleJumpSnapshot: PropTypes.func.isRequired,
-  snapshotIndex: PropTypes.number.isRequired,
+  sliderIndex: PropTypes.number.isRequired,
   playing: PropTypes.bool.isRequired,
 };
 export default TravelContainer;