added snapshotIndex and handler function

Author: joshua0308

extension/app/components/Action.jsx

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

extension/app/containers/ActionContainer.jsx

@@ -7,13 +7,20 @@ class ActionContainer extends Component {
   }
 
   render() {
-    const { snapshots, snapshotIndex } = this.props;
+    const { snapshots, snapshotIndex, handleChangeSnapshot } = this.props;
     let actionsArr = [];
     if (snapshots) {
       actionsArr = snapshots.map((snapshot, index) => {
         const selected = index === snapshotIndex;
-        console.log(selected);
-        return <Action key={`action${index}`} snapshot={snapshot} selected={selected} />;
+        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,10 @@ import TravelContainer from './TravelContainer';
 class MainContainer extends Component {
   constructor() {
     super();
-    this.state = { snapshots: [], snapshotIndex: 0 };
+    this.state = {
+      snapshots: [{ state: 'snapshot1' }, { state: 'snapshot2' }, { state: 'snapshot3' }],
+      snapshotIndex: 0,
+    };
 
     this.handleChangeSnapshot = this.handleChangeSnapshot.bind(this);
   }
@@ -24,16 +27,10 @@ class MainContainer extends Component {
     //   },
     //   false,
     // );
-
-    // MOCK DATA -- FOR TESTING PURPOSES ONLY
-    this.setState({
-      snapshots: [{ state: 'snapshot1' }, { state: 'snapshot2' }, { state: 'snapshot3' }],
-      snapshotIndex: 1,
-    });
   }
 
   handleChangeSnapshot(snapshotIndex) {
-    console.log('handleChangeSnapshot');
+    console.log('handleChangeSnapshot', snapshotIndex);
     // change snapshotIndex
     // snapshotIndex could be changed from either the ActionContainer or the TravelContainer
     this.setState({ snapshotIndex });
@@ -46,7 +43,11 @@ class MainContainer extends Component {
       <div className="main-container">
         <HeadContainer />
         <div className="body-container">
-          <ActionContainer snapshots={snapshots} snapshotIndex={snapshotIndex} />
+          <ActionContainer
+            snapshots={snapshots}
+            snapshotIndex={snapshotIndex}
+            handleChangeSnapshot={this.handleChangeSnapshot}
+          />
           <StateContainer snapshot={snapshots[snapshotIndex]} />
         </div>
         <TravelContainer />

extension/app/styles/styles.css

@@ -58,3 +58,7 @@
   border-width: thin;
   cursor: pointer;
 }
+
+.action-component.selected {
+  background-color: rgb(134, 134, 134);
+}