Josh/statecontainer

extension/app/components/Action.jsx

@@ -2,8 +2,20 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 const Action = (props) => {
-  const { snapshot } = props;
-  return <div className="action-component">{snapshot.state}</div>;
+  const {
+    snapshot, selected, handleChangeSnapshot, index,
+  } = props;
+  return (
+    <div
+      className={selected ? 'action-component selected' : 'action-component'}
+      onClick={() => {
+        handleChangeSnapshot(index);
+      }}
+    >
+      {snapshot.state}
+      {selected.toString()}
+    </div>
+  );
 };
 
 Action.propTypes = {

extension/app/containers/ActionContainer.jsx

@@ -7,12 +7,21 @@ class ActionContainer extends Component {
   }
 
   render() {
-    const { snapshots } = this.props;
+    const { snapshots, snapshotIndex, handleChangeSnapshot } = this.props;
     let actionsArr = [];
     if (snapshots) {
-      actionsArr = snapshots.map((snapshot, index) => (
-        <Action key={`action${index}`} snapshot={snapshot} />
-      ));
+      actionsArr = snapshots.map((snapshot, index) => {
+        const selected = index === snapshotIndex;
+        return (
+          <Action
+            key={`action${index}`}
+            index={index}
+            snapshot={snapshot}
+            selected={selected}
+            handleChangeSnapshot={handleChangeSnapshot}
+          />
+        );
+      });
     }
     return <div className="action-container">{actionsArr}</div>;
   }

extension/app/containers/MainContainer.jsx

@@ -7,7 +7,12 @@ import TravelContainer from './TravelContainer';
 class MainContainer extends Component {
   constructor() {
     super();
-    this.state = { snapshots: [] };
+    this.state = {
+      snapshots: [{ state: 'snapshot1' }, { state: 'snapshot2' }, { state: 'snapshot3' }],
+      snapshotIndex: 0,
+    };
+
+    this.handleChangeSnapshot = this.handleChangeSnapshot.bind(this);
   }
 
   componentDidMount() {
@@ -22,22 +27,28 @@ class MainContainer extends Component {
     //   },
     //   false,
     // );
+  }
 
-    // MOCK DATA -- FOR TESTING PURPOSES ONLY
-    this.setState({
-      snapshots: [{ state: 'snapshot1' }, { state: 'snapshot2' }, { state: 'snapshot3' }],
-    });
+  handleChangeSnapshot(snapshotIndex) {
+    console.log('handleChangeSnapshot', snapshotIndex);
+    // change snapshotIndex
+    // snapshotIndex could be changed from either the ActionContainer or the TravelContainer
+    this.setState({ snapshotIndex });
   }
 
   render() {
-    const { snapshots } = this.state;
+    const { snapshots, snapshotIndex } = this.state;
 
     return (
       <div className="main-container">
         <HeadContainer />
         <div className="body-container">
-          <ActionContainer snapshots={snapshots} />
-          <StateContainer />
+          <ActionContainer
+            snapshots={snapshots}
+            snapshotIndex={snapshotIndex}
+            handleChangeSnapshot={this.handleChangeSnapshot}
+          />
+          <StateContainer snapshot={snapshots[snapshotIndex]} />
         </div>
         <TravelContainer />
       </div>

extension/app/containers/StateContainer.jsx

@@ -1,12 +1,23 @@
 import React, { Component } from 'react';
+import ReactJson from 'react-json-view';
 
 class StateContainer extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
   }
 
   render() {
-    return <div className="state-container">StateContainer</div>;
+    const { snapshot } = this.props;
+    return (
+      <div className="state-container">
+        <ReactJson
+          enableClipboard={false}
+          theme="solarized"
+          groupArraysAfterLength={50}
+          src={snapshot}
+        />
+      </div>
+    );
   }
 }
 

extension/app/styles/styles.css

@@ -21,7 +21,9 @@
 }
 
 .state-container {
+  font-size: 15px;
   flex: 7 auto;
+  background-color: rgb(0, 43, 54);
 }
 
 /* if extension width is less than 500px, stack the body containers */
@@ -54,4 +56,9 @@
   background-color: rgb(170, 170, 170);
   border-style: solid;
   border-width: thin;
+  cursor: pointer;
+}
+
+.action-component.selected {
+  background-color: rgb(134, 134, 134);
 }