Main Tabs

client/coral-embed-stream/src/CommentStream.js

@@ -52,7 +52,7 @@ const mapDispatchToProps = (dispatch) => ({
   appendItemArray: (item, property, value, addToFront, itemType) =>
     dispatch(appendItemArray(item, property, value, addToFront, itemType)),
   logout: () => dispatch(logout()),
-  changeTab: tab => dispatch(changeTab(tab))
+  changeTab: activeTab => dispatch(changeTab(activeTab))
 });
 
 class CommentStream extends Component {
@@ -92,19 +92,18 @@ class CommentStream extends Component {
     const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
     const {actions, users, comments} = this.props.items;
     const {loggedIn, user, showSignInDialog} = this.props.auth;
-    const {changeTab} = this.props.embedStream;
-
+    const {activeTab} = this.props.embedStream;
     return <div className={showSignInDialog ? 'expandForSignin' : ''}>
       {
         rootItem
         ? <div>
 
-          <TabBar onClickTab={changeTab}>
+          <TabBar onChange={this.props.changeTab} activeTab={activeTab}>
             <Tab><Count id={rootItemId} items={this.props.items}/></Tab>
             <Tab>Settings</Tab>
           </TabBar>
 
-          <ContentBox show={true}>
+          <ContentBox show={activeTab === 0}>
             <div id="commentBox">
               <InfoBox
                 content={this.props.config.infoBoxContent}
@@ -232,7 +231,7 @@ class CommentStream extends Component {
               notification={this.props.notification}
             />
           </ContentBox>
-          <ContentBox>
+          <ContentBox show={activeTab === 1}>
             <SettingsContainer/>
           </ContentBox>
         </div>

client/coral-framework/actions/embedStream.js

@@ -1,10 +1,10 @@
 import {base, handleResp, getInit} from '../helpers/response';
 import * as actions from '../constants/embedStream';
 
-export const changeTab = view => dispatch =>
+export const changeTab = activeTab => dispatch =>
   dispatch({
     type: actions.CHANGE_TAB,
-    view
+    activeTab
   });
 
 const userBioRequest = () => ({type: actions.FETCH_USER_BIO_REQUEST});

client/coral-framework/reducers/embedStream.js

@@ -2,14 +2,14 @@ import {Map} from 'immutable';
 import * as actions from '../constants/embedStream';
 
 const initialState = Map({
-  tab: 'COMMENT_BOX'
+  activeTab: 0
 });
 
 export default function embedStream (state = initialState, action) {
   switch (action.type) {
   case actions.CHANGE_TAB :
     return state
-      .set('tab', action.tab);
+      .set('activeTab', action.activeTab);
   default :
     return state;
   }