From b228264dac8a6929f3e5ee0f374dfce63ca05e89 Mon Sep 17 00:00:00 2001
From: "Carter J. Bastian" <carter.bastian1@gmail.com>
Date: Sat, 4 Mar 2017 13:45:11 -0500
Subject: [PATCH] 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      |  6 +++++-
 app/components/Diagram.js     |  1 +
 app/components/ShapeBar.js    | 18 +++++++++++-------
 app/components/ShapeOption.js | 10 ++++++++--
 app/containers/App.js         | 24 ++++++++++++++++++++++--
 5 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/app/components/Canvas.js b/app/components/Canvas.js
index a5466fb..c52d3d3 100644
--- a/app/components/Canvas.js
+++ b/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>);
   }
 }
diff --git a/app/components/Diagram.js b/app/components/Diagram.js
index 5201560..05a9caa 100644
--- a/app/components/Diagram.js
+++ b/app/components/Diagram.js
@@ -45,6 +45,7 @@ export default class Diagram extends Component {
     });
     
     console.log(updatedBlocks); // Debugging
+    console.log(this.props.shape);
   };
 
   render() {
diff --git a/app/components/ShapeBar.js b/app/components/ShapeBar.js
index e64921a..4f85869 100644
--- a/app/components/ShapeBar.js
+++ b/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>);
   }
 }
diff --git a/app/components/ShapeOption.js b/app/components/ShapeOption.js
index 082746c..65c02bb 100644
--- a/app/components/ShapeOption.js
+++ b/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>);
   }
 }
diff --git a/app/containers/App.js b/app/containers/App.js
index 6667d83..14b6311 100644
--- a/app/containers/App.js
+++ b/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>);
   }
 }