mode zoom toolbar and message area to separate components

3 files changed, 71 insertions, 29 deletions

diff --git a/src/App.js b/src/App.js
index e6ccfb2..c38227a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import Gantt from './Gantt';
+import Toolbar from './Toolbar';
+import MessageArea from './MessageArea';
 import './App.css';
 
-var data = {
+let data = {
   data: [
     {id: 1, text: 'Task #1', start_date: '15-04-2017', duration: 3, progress: 0.6},
     {id: 2, text: 'Task #2', start_date: '18-04-2017', duration: 3, progress: 0.4}
@@ -50,36 +52,19 @@ class App extends Component {
     this.addMessage(message)
   }
 
-  handleZoomChange(e) {
+  handleZoomChange(zoom) {
     this.setState({
-      currentZoom: e.target.value
+      currentZoom: zoom
     });
   }  
   
   render() {
-    let zoomRadios = ['Hours', 'Days', 'Months'].map((value) => {
-      let isActive = this.state.currentZoom === value;
-      return (
-        <label key={value} className={`radio-label ${isActive ? 'radio-label-active': ''}`}>
-          <input type='radio'
-            checked={isActive}
-            onChange={this.handleZoomChange}
-            value={value}/>
-          {value}
-        </label>
-      );
-    });
-
-    let messages = this.state.messages.map(({key, message}) => {
-      return <li key={key}>{message}</li>
-    });
-
     return (
       <div>
-        <div className="zoom-bar">
-          <b>Zooming: </b>
-          {zoomRadios}
-        </div>
+        <Toolbar
+            zoom={this.state.currentZoom}
+            onZoomChange={this.handleZoomChange}
+        />
         <div className="gantt-container">
           <Gantt
             tasks={data}
@@ -88,11 +73,9 @@ class App extends Component {
             onLinkUpdated={this.logLinkUpdate}
           />
         </div>
-        <div className="message-area">
-          <ul>
-            {messages}
-          </ul>
-        </div>
+        <MessageArea
+            messages={this.state.messages}
+        />
       </div>
     );
   }
diff --git a/src/MessageArea.js b/src/MessageArea.js
new file mode 100644
index 0000000..bef505d
--- /dev/null
+++ b/src/MessageArea.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+class MessageArea extends Component {
+  render() {
+    let messages = this.props.messages.map(({key, message}) => {
+      return <li key={key}>{message}</li>
+    });
+
+    return (
+      <div className="message-area">
+        <ul>
+          {messages}
+        </ul>
+      </div>
+    );
+  }
+}
+
+MessageArea.defaultProps = {
+  messages: []
+};
+
+export default MessageArea;
\ No newline at end of file
diff --git a/src/Toolbar.js b/src/Toolbar.js
new file mode 100644
index 0000000..ca42f75
--- /dev/null
+++ b/src/Toolbar.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+
+export default class Toolbar extends Component {
+  constructor(props) {
+    super(props);
+    this.handleZoomChange = this.handleZoomChange.bind(this);
+  }
+
+  handleZoomChange(e) {
+    if(this.props.onZoomChange){
+      this.props.onZoomChange(e.target.value)
+    }
+  }
+
+  render() {
+    let zoomRadios = ['Hours', 'Days', 'Months'].map((value) => {
+      let isActive = this.props.zoom === value;
+      return (
+        <label key={value} className={`radio-label ${isActive ? 'radio-label-active': ''}`}>
+          <input type='radio'
+             checked={isActive}
+             onChange={this.handleZoomChange}
+             value={value}/>
+          {value}
+        </label>
+      );
+    });
+
+    return (
+      <div className="zoom-bar">
+        <b>Zooming: </b>
+          {zoomRadios}
+      </div>
+    );
+  }
+}