Merge pull request #39 from oslabs-beta/rydang/refactorbuttons

refactored stateful components into functional and added props validation

Author: mylee1995

src/app/containers/ActionContainer.jsx

@@ -1,46 +1,50 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Action from '../components/Action';
 
-class ActionContainer extends Component {
-  constructor(props) {
-    super(props);
+const ActionContainer = ({
+  snapshots,
+  snapshotIndex,
+  handleChangeSnapshot,
+  handleJumpSnapshot,
+  emptySnapshot,
+}) => {
+  let actionsArr = [];
+  if (snapshots.length > 0) {
+    actionsArr = snapshots.map((snapshot, index) => {
+      const selected = index === snapshotIndex;
+      return (
+        <Action
+          key={`action${index}`}
+          index={index}
+          snapshot={snapshot}
+          selected={selected}
+          handleChangeSnapshot={handleChangeSnapshot}
+          handleJumpSnapshot={handleJumpSnapshot}
+        />
+      );
+    });
   }
-
-  render() {
-    const {
-      snapshots,
-      snapshotIndex,
-      handleChangeSnapshot,
-      handleJumpSnapshot,
-      emptySnapshot,
-    } = this.props;
-    let actionsArr = [];
-    if (snapshots.length > 0) {
-      actionsArr = snapshots.map((snapshot, index) => {
-        const selected = index === snapshotIndex;
-        return (
-          <Action
-            key={`action${index}`}
-            index={index}
-            snapshot={snapshot}
-            selected={selected}
-            handleChangeSnapshot={handleChangeSnapshot}
-            handleJumpSnapshot={handleJumpSnapshot}
-          />
-        );
-      });
-    }
-    return (
-      <div className="action-container">
-        <div className="action-component exclude">
-          <div className="empty-button" onClick={emptySnapshot}>
-            emptySnapshot
-          </div>
+  return (
+    <div className="action-container">
+      <div className="action-component exclude">
+        <div className="empty-button" onClick={emptySnapshot}>
+          emptySnapshot
         </div>
-        <div>{actionsArr}</div>
       </div>
-    );
-  }
-}
+      <div>{actionsArr}</div>
+    </div>
+  );
+};
+
+ActionContainer.propTypes = {
+  snapshots: PropTypes.arrayOf(
+    PropTypes.object,
+  ).isRequired,
+  snapshotIndex: PropTypes.number.isRequired,
+  handleChangeSnapshot: PropTypes.func.isRequired,
+  handleJumpSnapshot: PropTypes.func.isRequired,
+  emptySnapshot: PropTypes.func.isRequired,
+};
 
 export default ActionContainer;

src/app/containers/ButtonsContainer.jsx

@@ -1,40 +1,19 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-const autoBind = require('auto-bind');
+const ButtonsContainer = ({ mode: { paused, locked }, toggleMode }) => (
+  <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>
+);
 
-class ButtonsContainer extends Component {
-  constructor(props) {
-    super(props);
+ButtonsContainer.propTypes = {
+  toggleMode: PropTypes.func.isRequired,
+  mode: PropTypes.shape({
+    paused: PropTypes.bool,
+    locked: PropTypes.bool,
+  }).isRequired,
+};
 
-    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/HeadContainer.jsx

@@ -1,14 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 
-class HeadContainer extends Component {
-  constructor(props) {
-    super(props);
-    console.log(this);
-  }
-
-  render() {
-    return <div className="head-container" />;
-  }
-}
+const HeadContainer = () => (
+  <div className="head-container" />
+);
 
 export default HeadContainer;

src/app/containers/MainContainer.jsx

@@ -13,24 +13,40 @@ class MainContainer extends Component {
     this.state = {
       snapshots: [],
       snapshotIndex: 0,
-      currentIndex: null,
       port: null,
+      mode: {
+        locked: false,
+        paused: false,
+        persist: false,
+      },
     };
 
     autoBind(this);
   }
 
   componentDidMount() {
-    console.log('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) => {
-      const snapshotIndex = snapshots.length - 1;
-
-      // set state with the information received from the background script
-      this.setState({ snapshots, snapshotIndex });
+    port.onMessage.addListener((message) => {
+      const { action, payload } = message;
+      switch (action) {
+        case 'sendSnapshots': {
+          const snapshotIndex = payload.length - 1;
+
+          // set state with the information received from the background script
+          this.setState({ snapshots: payload, snapshotIndex });
+          break;
+        }
+        case 'initialConnectSnapshot': {
+          const { snapshots, mode } = payload;
+          const snapshotIndex = snapshots.length - 1;
+          this.setState({ snapshots, snapshotIndex, mode });
+          break;
+        }
+        default:
+      }
     });
 
     // console log if the port with background script disconnects
@@ -78,7 +94,8 @@ class MainContainer extends Component {
     port.postMessage({ action: 'emptySnap' });
   }
 
-  // change the snapshot index, this will change the state shown in the state container but won't change the DOM
+  // change the snapshot 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
@@ -88,12 +105,31 @@ class MainContainer extends Component {
 
   handleJumpSnapshot(snapshotIndex) {
     const { snapshots, port } = this.state;
-    this.setState({ currentIndex: snapshotIndex });
     port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
   }
 
+  toggleMode(targetMode) {
+    const { mode, mode: { locked, paused, persist }, port } = this.state;
+    switch (targetMode) {
+      case 'paused':
+        port.postMessage({ action: 'setPause', payload: !paused });
+        mode.paused = !paused;
+        break;
+      case 'locked':
+        port.postMessage({ action: 'setLock', payload: !locked });
+        mode.locked = !locked;
+        break;
+      case 'persist':
+        port.postMessage({ action: 'setPersist', payload: !locked });
+        mode.persist = !persist;
+        break;
+      default:
+    }
+    this.setState({ mode });
+  }
+
   render() {
-    const { snapshots, snapshotIndex, port } = this.state;
+    const { snapshots, snapshotIndex, mode } = this.state;
     return (
       <div className="main-container">
         <HeadContainer />
@@ -115,7 +151,7 @@ class MainContainer extends Component {
             moveForward={this.moveForward}
             playForward={this.playForward}
           />
-          <ButtonsContainer port={port} />
+          <ButtonsContainer mode={mode} toggleMode={this.toggleMode} />
         </div>
       </div>
     );

src/app/containers/StateContainer.jsx

@@ -1,38 +1,40 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {
   MemoryRouter as Router, Route, NavLink, Switch,
 } from 'react-router-dom';
 import Tree from '../components/Tree';
 import Chart from '../components/Chart';
 
-class StateContainer extends Component {
-  constructor(props) {
-    super(props);
-  }
+const StateContainer = ({ snapshot }) => (
+  <Router>
+    <div className="state-container">
+      <div className="navbar">
+        <NavLink className="router-link" activeClassName="is-active" to="/">
+          Tree
+        </NavLink>
+        <NavLink className="router-link" activeClassName="is-active" to="/chart">
+          Chart
+        </NavLink>
+      </div>
+      <Switch>
+        <Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
+        <Route path="/" render={() => <Tree snapshot={snapshot} />} />
+      </Switch>
+    </div>
+  </Router>
+);
 
-  render() {
-    const { snapshot } = this.props;
-    return (
-      <Router>
-        <div className="state-container">
-          <div className="navbar">
-            <NavLink className="router-link" activeClassName="is-active" exact to="/">
-              Tree
-            </NavLink>
-            <NavLink className="router-link" activeClassName="is-active" exact to="/chart">
-              Chart
-            </NavLink>
-          </div>
-          <Switch>
-            <Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
-            <Route path="/" render={() => <Tree snapshot={snapshot} />} />
-          </Switch>
-        </div>
-      </Router>
-    );
-  }
-}
-{
-}
+StateContainer.propTypes = {
+  snapshot: PropTypes.shape({
+    state: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]),
+    children: PropTypes.arrayOf(
+      PropTypes.object,
+    ),
+  }).isRequired,
+};
 
 export default StateContainer;

src/app/containers/TravelContainer.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import MainSlider from '../components/MainSlider';
 
 const TravelContainer = ({
@@ -28,4 +29,14 @@ const TravelContainer = ({
     </div>
   </div>
 );
+
+TravelContainer.propTypes = {
+  playForward: PropTypes.func.isRequired,
+  moveBackward: PropTypes.func.isRequired,
+  moveForward: PropTypes.func.isRequired,
+  snapshotsLength: PropTypes.number.isRequired,
+  handleChangeSnapshot: PropTypes.func.isRequired,
+  handleJumpSnapshot: PropTypes.func.isRequired,
+  snapshotIndex: PropTypes.number.isRequired,
+};
 export default TravelContainer;

src/app/styles/layout/_stateContainer.scss

@@ -1,6 +1,6 @@
 .state-container {
   font-size: 12px;
-  overflow: scroll;
+  overflow: auto;
   background-color: $brand-color;
 }