Structure

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>
+);

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>
     );
   }

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>
 );
 

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] : ''}`}>