Implement dataflow for Options bar

Uses callbacks and props to enable clicking on an option bar and changing
the state of the app.

app/components/Canvas.js

@@ -7,11 +7,15 @@ import DotGrid from './DotGrid'
 import Diagram from './Diagram'
 
 export default class Canvas extends Component {
+  constructor(props) {
+    super(props);
+  }
+
   render() {
     return (
       <div style={{position: 'absolute', width: '100%', height: '90%', margin: 0, padding: 0, top: '10%'}}>
         <DotGrid />
-        <Diagram />
+        <Diagram shape={this.props.shape}/>
       </div>);
   }
 }

app/components/Diagram.js

@@ -45,6 +45,7 @@ export default class Diagram extends Component {
     });
 
     console.log(updatedBlocks); // Debugging
+    console.log(this.props.shape);
   };
 
   render() {

app/components/ShapeBar.js

@@ -6,16 +6,20 @@ var electron = require('electron');
 import ShapeOption from './ShapeOption';
 
 export default class ShapeBar extends Component {
-
+  // Props: onShapeOptionClick, shape
+  constructor(props) {
+    super(props);
+  };
+
   render() {
     return (
       <div style={{position: 'absolute', backgroundColor: 'red', width: '100%', height: '10%', margin: 0, padding: 0}}>
-        <ShapeOption />
-        <ShapeOption />
-        <ShapeOption />
-        <ShapeOption />
-        <ShapeOption />
-        <ShapeOption />
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Rect'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Circle'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='No option'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='No option'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='No option'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='No option'/>
       </div>);
   }
 }

app/components/ShapeOption.js

@@ -6,10 +6,16 @@ var electron = require('electron');
 const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
 
 export default class Canvas extends Component {
+  // Props: onClick, shape, and option
+  constructor(props) {
+    super(props);
+  };
+
   render() {
     return (
-      <div style={{position: 'relative', float: 'left', backgroundColor: 'grey', width: '10%', height: '90%', marginLeft: '5%', marginTop: '0.5%'}}>
-        <div></div>
+      <div onClick={this.props.onClick.bind(null, this)}
+          style={{position: 'relative', float: 'left', backgroundColor: 'grey', width: '10%', height: '90%', marginLeft: '5%', marginTop: '0.5%'}}>
+        <p>{this.props.option}</p>
       </div>);
   }
 }

app/containers/App.js

@@ -13,13 +13,33 @@ export default class App extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      shape: 'Rect',
+    };
+
+    this.onShapeOptionClick = this.onShapeOptionClick.bind(this);
+  };
+
+  // Handle ShapeOption Click
+  onShapeOptionClick(component, e) {
+    // Set the state of the app based on the option click
+    console.log("Before: This.state: %s\n", this.state.shape);
+
+    if (component.props.option == 'Rect') {
+      this.setState({shape: 'Rect'});
+    } else if (component.props.option == 'Circle') {
+      this.setState({shape: 'Circle'});
+    }
+
+    console.log("Handling Shape Option Click!\n");
   };
 
   render() {
     return (
       <div style={{position: 'absolute', width: '100%', height: '100%', margin: 0, padding: 0}}>
-        <ShapeBar />
-        <Canvas />
+        <ShapeBar onShapeOptionClick={this.onShapeOptionClick} shape={this.state.shape}/>
+        <Canvas shape='Rect'/>
       </div>);
   }
 }