Merge pull request #37 from oslabs-beta/rydang/locking

locking and pause button implemented

Author: joshua0308

package-lock.json

@@ -45,6 +45,7 @@
     "webpack-cli": "^3.3.6"
   },
   "dependencies": {
+    "auto-bind": "^2.1.0",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.6.13",
     "rc-tooltip": "^3.7.3",

package.json

@@ -1,6 +1,6 @@
 const snapShot = { tree: null };
 
-const mode = { jumping: false };
+const mode = { jumping: false, paused: false, locked: false };
 
 const linkFiber = require('./linkFiber')(snapShot, mode);
 const timeJump = require('./timeJump')(snapShot, mode);
@@ -12,11 +12,12 @@ window.addEventListener('message', ({ data: { action, payload } }) => {
     case 'jumpToSnap':
       timeJump(payload);
       break;
-    case 'stepToSnap': {
-      const { steps, speed } = payload;
-      console.log('i would like to step through here');
+    case 'setLock':
+      mode.locked = payload;
+      break;
+    case 'setPause':
+      mode.paused = payload;
       break;
-    }
     default:
   }
 });

package/index.js

@@ -6,8 +6,8 @@ module.exports = (snap, mode) => {
   let fiberRoot = null;
 
   function sendSnapshot() {
-    // don't send messages while jumping
-    if (mode.jumping) return;
+    // don't send messages while jumping or while paused
+    if (mode.jumping || mode.paused) return;
     const payload = snap.tree.getCopy();
     window.postMessage({
       action: 'recordSnap',
@@ -23,6 +23,8 @@ module.exports = (snap, mode) => {
     const oldSetState = component.setState.bind(component);
 
     function newSetState(state, callback = () => { }) {
+      // dont do anything if state is locked
+      if (mode.locked) return;
       // continue normal setState functionality, except add sending message middleware
       oldSetState(state, () => {
         updateSnapShotTree();

package/linkFiber.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+
+const autoBind = require('auto-bind');
+
+class ButtonsContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      paused: false,
+      locked: false,
+    };
+
+    autoBind(this);
+  }
+
+  togglePause(port) {
+    const { paused } = this.state;
+    port.postMessage({ action: 'setPause', payload: !paused });
+    this.setState({ paused: !paused });
+  }
+
+  toggleLock(port) {
+    const { locked } = this.state;
+    port.postMessage({ action: 'setLock', payload: !locked });
+    this.setState({ locked: !locked });
+  }
+
+  render() {
+    const { paused, locked } = this.state;
+    const { port } = this.props;
+    return (
+      <div className="buttons-container">
+        <div className="pause-button" onClick={() => this.togglePause(port)}>{(paused) ? 'Resume' : 'Pause'}</div>
+        <div className="lock-button" onClick={() => this.toggleLock(port)}>{(locked) ? 'Unlock' : 'Lock'}</div>
+      </div>
+    );
+  }
+}
+export default ButtonsContainer;

src/app/containers/ButtonsContainer.jsx

@@ -3,6 +3,9 @@ import HeadContainer from './HeadContainer';
 import ActionContainer from './ActionContainer';
 import StateContainer from './StateContainer';
 import TravelContainer from './TravelContainer';
+import ButtonsContainer from './ButtonsContainer';
+
+const autoBind = require('auto-bind');
 
 class MainContainer extends Component {
   constructor(props) {
@@ -13,13 +16,8 @@ class MainContainer extends Component {
       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);
-    this.moveBackward = this.moveBackward.bind(this);
-    this.moveForward = this.moveForward.bind(this);
-    this.playForward = this.playForward.bind(this);
+
+    autoBind(this);
   }
 
   componentDidMount() {
@@ -63,20 +61,20 @@ class MainContainer extends Component {
   }
 
   playForward() {
-    var play = setInterval(() => {
+    const play = setInterval(() => {
       const { snapshots, snapshotIndex } = this.state;
       if (snapshotIndex < snapshots.length - 1) {
         const newIndex = snapshotIndex + 1;
         this.handleJumpSnapshot(newIndex);
         this.setState({ snapshotIndex: newIndex });
       } else clearInterval(play);
-    }, 1000)
+    }, 1000);
     play();
   }
 
   emptySnapshot() {
-    const { port } = this.state;
-    this.setState({ snapshots: [], snapshotIndex: 0 });
+    const { port, snapshots } = this.state;
+    this.setState({ snapshots: [snapshots[0]], snapshotIndex: 0 });
     port.postMessage({ action: 'emptySnap' });
   }
 
@@ -94,37 +92,8 @@ class MainContainer extends Component {
     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;
-    let { currentIndex } = this.state;
-    const payload = [];
-
-    // currentIndex is initialized to null
-    // currentIndex = null means that the user hasn't jumped yet
-    currentIndex = currentIndex === null ? snapshots.length - 1 : currentIndex;
-
-    // if the user wants to jump backward
-    if (currentIndex > snapshotIndex) {
-      for (let i = currentIndex - 1; i >= snapshotIndex; i -= 1) {
-        payload.push(snapshots[i]);
-      }
-    } else {
-      // if the user wants to jump forward
-      for (let i = currentIndex + 1; i <= snapshotIndex; i += 1) {
-        payload.push(snapshots[i]);
-      }
-    }
-
-    // currentIndex should be changed to index the user jumped to
-    this.setState({ currentIndex: snapshotIndex });
-
-    // send the arrays of snapshots to background script
-    port.postMessage({ action: 'stepToSnap', payload });
-  }
-
   render() {
-    const { snapshots, snapshotIndex } = this.state;
+    const { snapshots, snapshotIndex, port } = this.state;
     return (
       <div className="main-container">
         <HeadContainer />
@@ -146,6 +115,7 @@ class MainContainer extends Component {
             moveForward={this.moveForward}
             playForward={this.playForward}
           />
+          <ButtonsContainer port={port} />
         </div>
       </div>
     );

src/app/containers/MainContainer.jsx

@@ -45,6 +45,14 @@
   margin: 7px;
 }
 
+.lock-button {
+  @extend %button-shared;
+}
+
+.pause-button {
+  @extend %button-shared;
+}
+
 %button-shared {
   display: flex;
   justify-content: center;

src/app/styles/components/_buttons.scss

@@ -0,0 +1,7 @@
+.buttons-container {
+  margin: 0 1% 0 1%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 1%;
+  padding: 1% 0 1% 0;
+}

src/app/styles/layout/_buttonsContainer.scss

@@ -7,7 +7,7 @@
 @import 'base/base', 'base/fonts', 'base/helpers', 'base/typography';
 
 // 4. Layout-related sections
-@import 'layout/actionContainer', 'layout/stateContainer', 'layout/travelContainer';
+@import 'layout/actionContainer', 'layout/stateContainer', 'layout/travelContainer', 'layout/buttonsContainer';
 
 // 5. Components
 @import 'components/buttons', 'components/actionComponent',
@@ -17,4 +17,4 @@
 @import 'styles';
 
 // slider component
-@import './components/rc-slider', './components/sliderHandle';
+@import './components/rc-slider', './components/sliderHandle';