Move active tab to redux

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

@@ -0,0 +1,4 @@
+import * as actions from '../constants/embed';
+
+export const setActiveTab = (tab) => ({type: actions.SET_ACTIVE_TAB, tab});
+

client/coral-embed-stream/src/components/Embed.js

@@ -13,29 +13,24 @@ import RestrictedContent from 'coral-framework/components/RestrictedContent';
 import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
 
 export default class Embed extends React.Component {
-  state = {
-    activeTab: 0,
-  };
-
   changeTab = (tab) => {
-    if (tab === 0) {
-      if (this.props.data.comment) {
-        this.props.viewAllComments();
-      }
-      else {
-
-        // TODO: don't rely on refetching.
-        this.props.data.refetch();
-      }
+    switch(tab) {
+    case 0:
+      this.props.setActiveTab('stream');
+      break;
+    case 1:
+      this.props.setActiveTab('profile');
+      break;
+    case 2:
+      this.props.setActiveTab('config');
+      break;
+    default:
+      throw new Error(`Unknown tab ${tab}`);
     }
-
-    this.setState({
-      activeTab: tab
-    });
   }
 
   render () {
-    const {activeTab} = this.state;
+    const {activeTab} = this.props;
     const {asset, comment} = this.props.data;
     const {loggedIn, isAdmin, user, showSignInDialog} = this.props.auth;
 
@@ -63,7 +58,7 @@ export default class Embed extends React.Component {
                 {lang.t('showAllComments')}
               </Button>
           }
-          <TabContent show={activeTab === 0}>
+          <TabContent show={activeTab === 'stream'}>
             { loggedIn ? userBox : null }
             <Stream
               addNotification={this.props.addNotification}
@@ -91,10 +86,10 @@ export default class Embed extends React.Component {
               setCommentCountCache={this.props.setCommentCountCache}
             />
           </TabContent>
-          <TabContent show={activeTab === 1}>
+          <TabContent show={activeTab === 'profile'}>
             <ProfileContainer />
           </TabContent>
-          <TabContent show={activeTab === 2}>
+          <TabContent show={activeTab === 'config'}>
             <RestrictedContent restricted={!loggedIn}>
               { loggedIn ? userBox : null }
               <ConfigureStreamContainer />

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

@@ -0,0 +1 @@
+export const SET_ACTIVE_TAB = 'SET_ACTIVE_TAB';

client/coral-embed-stream/src/containers/Embed.js

@@ -14,6 +14,7 @@ import {notificationActions, authActions, assetActions, pym} from 'coral-framewo
 import {NEW_COMMENT_COUNT_POLL_INTERVAL} from '../constants/stream';
 import Embed from '../components/Embed';
 import {setCommentCountCache, setActiveReplyBox, viewAllComments} from '../actions/stream';
+import {setActiveTab} from '../actions/embed';
 import * as Stream from './Stream';
 
 const {logout, showSignInDialog, requestConfirmEmail} = authActions;
@@ -260,6 +261,7 @@ const mapStateToProps = state => ({
   commentId: state.stream.commentId,
   assetId: state.stream.assetId,
   assetUrl: state.stream.assetUrl,
+  activeTab: state.embed.activeTab,
 });
 
 const mapDispatchToProps = dispatch =>
@@ -274,6 +276,7 @@ const mapDispatchToProps = dispatch =>
     viewAllComments,
     logout,
     setActiveReplyBox,
+    setActiveTab,
   }, dispatch);
 
 export default compose(

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

@@ -0,0 +1,17 @@
+import * as actions from '../constants/embed';
+
+const initialState = {
+  activeTab: 'stream',
+};
+
+export default function stream(state = initialState, action) {
+  switch (action.type) {
+  case actions.SET_ACTIVE_TAB:
+    return {
+      ...state,
+      activeTab: action.tab,
+    };
+  default:
+    return state;
+  }
+}

client/coral-embed-stream/src/reducers/index.js

@@ -1,5 +1,7 @@
 import stream from './stream';
+import embed from './embed';
 
 export default {
-  stream
+  stream,
+  embed,
 };