From 1dc7db9081cca047e22f5f11c42b554c388f67c7 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 28 Nov 2016 14:43:43 -0300
Subject: [PATCH] Structure

---
 .../components/CommentHistory.css             |  0
 .../components/CommentHistory.js              | 15 +++++++++++++
 .../containers/SettingsContainer.js           | 22 +++++++++++++++++--
 client/coral-ui/components/Tab.js             |  4 ++--
 client/coral-ui/components/TabBar.js          |  8 ++++---
 5 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 client/coral-settings/components/CommentHistory.css
 create mode 100644 client/coral-settings/components/CommentHistory.js

diff --git a/client/coral-settings/components/CommentHistory.css b/client/coral-settings/components/CommentHistory.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/coral-settings/components/CommentHistory.js b/client/coral-settings/components/CommentHistory.js
new file mode 100644
index 000000000..3160c8a88
--- /dev/null
+++ b/client/coral-settings/components/CommentHistory.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './CommentHistory.css';
+
+export default ({comments = []}) => (
+  <div className={styles.header}>
+    <h1>Comments</h1>
+    <ul>
+      {comments.map(() => (
+        <li>
+          {/* Comment Data*/}
+        </li>
+      ))}
+    </ul>
+  </div>
+);
diff --git a/client/coral-settings/containers/SettingsContainer.js b/client/coral-settings/containers/SettingsContainer.js
index 2b2c3cd33..8aa01211e 100644
--- a/client/coral-settings/containers/SettingsContainer.js
+++ b/client/coral-settings/containers/SettingsContainer.js
@@ -5,24 +5,42 @@ import {} from '../../coral-framework/actions/embedStream';
 import {TabBar, Tab} from '../../coral-ui';
 
 import Bio from '../components/Bio';
+import CommentHistory from '../components/CommentHistory';
 import SettingsHeader from '../components/SettingsHeader';
 
 class SignInContainer extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      activeTab: 0
+    };
+
+    this.handleTabChange = this.handleTabChange.bind(this);
+  }
+
   componentWillMount () {
     // Get Bio
     // Fetch commentHistory
   }
 
+  handleTabChange(tab) {
+    this.setState({
+      activeTab: tab
+    });
+  }
+
   render() {
     //const {embedStream} = this.props;
+    const {activeTab} = this.state;
     return (
       <div>
         <SettingsHeader />
-        <TabBar cStyle='material'>
+        <TabBar onChange={this.handleTabChange} activeTab={activeTab} cStyle='material'>
           <Tab>All Comments (120)</Tab>
           <Tab>Profile Settings</Tab>
         </TabBar>
-        <Bio {...this.props}/>
+        { activeTab === 0 && <CommentHistory {...this.props}/> }
+        { activeTab === 1 && <Bio {...this.props}/> }
       </div>
     );
   }
diff --git a/client/coral-ui/components/Tab.js b/client/coral-ui/components/Tab.js
index 09b4da4d3..af04bec9c 100644
--- a/client/coral-ui/components/Tab.js
+++ b/client/coral-ui/components/Tab.js
@@ -5,9 +5,9 @@ export default ({children, tabId, active, onTabClick, cStyle = 'base'}) => (
   <li
     key={tabId}
     className={active ? styles[`${cStyle}--active`] : ''}
-    onClick={onTabClick}
+    onClick={() => onTabClick(tabId)}
   >
     {children}
-    </li>
+  </li>
 );
 
diff --git a/client/coral-ui/components/TabBar.js b/client/coral-ui/components/TabBar.js
index 73abd7386..1ab7f47a6 100644
--- a/client/coral-ui/components/TabBar.js
+++ b/client/coral-ui/components/TabBar.js
@@ -7,12 +7,14 @@ export class TabBar extends React.Component {
     this.handleClickTab = this.handleClickTab.bind(this);
   }
 
-  handleClickTab (e) {
-    console.log(e);
+  handleClickTab(tabId) {
+    if (this.props.onChange) {
+      this.props.onChange(tabId);
+    }
   }
 
   render() {
-    const {children, activeTab = 0, cStyle = 'base'} = this.props;
+    const {children, activeTab, cStyle = 'base'} = this.props;
     return (
       <div>
         <ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''}`}>