fixed channel-select to not have internal state

react/actions/publish.js

@@ -51,3 +51,10 @@ export function updateError (name, value) {
     value,
   };
 };
+
+export function updateSelectedChannel (value) {
+  return {
+    type: actions.SELECTED_CHANNEL_UPDATE,
+    value,
+  };
+};

react/constants/action_types.js

@@ -9,3 +9,4 @@ export const CLAIM_UPDATE = 'CLAIM_UPDATE';
 export const SET_PUBLISH_IN_CHANNEL = 'SET_PUBLISH_IN_CHANNEL';
 export const PUBLISH_STATUS_UPDATE = 'PUBLISH_STATUS_UPDATE';
 export const ERROR_UPDATE = 'ERROR_UPDATE';
+export const SELECTED_CHANNEL_UPDATE = 'SELECTED_CHANNEL_UPDATE';

react/constants/channel_select_states.js

@@ -0,0 +1,2 @@
+export const LOGIN = 'Existing';
+export const CREATE = 'New';

react/constants/publishing_states.js

@@ -1,4 +1,3 @@
-// publishing states
 export const LOAD_START = 'LOAD_START';
 export const LOADING = 'LOADING';
 export const PUBLISHING = 'PUBLISHING';

react/containers/ChannelCreateForm/index.js

@@ -1,11 +1,13 @@
 import { connect } from 'react-redux';
 import { updateLoggedInChannel } from 'actions/channel';
 import View from './view';
+import {updateSelectedChannel} from '../../actions/publish';
 
 const mapDispatchToProps = dispatch => {
   return {
     onChannelLogin: (name, shortId, longId) => {
       dispatch(updateLoggedInChannel(name, shortId, longId));
+      dispatch(updateSelectedChannel(name));
     },
   };
 };

react/containers/ChannelLoginForm/index.js

@@ -1,11 +1,13 @@
 import { connect } from 'react-redux';
 import { updateLoggedInChannel } from 'actions/channel';
 import View from './view';
+import {updateSelectedChannel} from '../../actions/publish';
 
 const mapDispatchToProps = dispatch => {
   return {
     onChannelLogin: (name, shortId, longId) => {
       dispatch(updateLoggedInChannel(name, shortId, longId));
+      dispatch(updateSelectedChannel(name));
     },
   };
 };

react/containers/ChannelSelect/index.js

@@ -1,11 +1,13 @@
 import {connect} from 'react-redux';
 import {setPublishInChannel} from 'actions/publish';
 import View from './view.jsx';
+import {updateSelectedChannel} from '../../actions/publish';
 
 const mapStateToProps = ({ channel, publish }) => {
   return {
     loggedInChannelName: channel.loggedInChannel.name,
     publishInChannel   : publish.publishInChannel,
+    selectedChannel    : publish.selectedChannel,
   };
 };
 
@@ -14,6 +16,9 @@ const mapDispatchToProps = dispatch => {
     onPublishInChannelChange: (value) => {
       dispatch(setPublishInChannel(value));
     },
+    onChannelSelect: (value) => {
+      dispatch(updateSelectedChannel(value));
+    },
   };
 }
 

react/containers/ChannelSelect/view.jsx

@@ -1,29 +1,13 @@
 import React from 'react';
 import ChannelLoginForm from 'containers/ChannelLoginForm';
 import ChannelCreateForm from 'containers/ChannelCreateForm';
-
+import * as states from 'constants/channel_select_states';
-const LOGIN = 'Existing';
-const CREATE = 'New';
 
 class ChannelSelect extends React.Component {
   constructor (props) {
     super(props);
-    this.state = {
-      selectedOption: LOGIN,
-    };
     this.toggleAnonymousPublish = this.toggleAnonymousPublish.bind(this);
     this.handleSelection = this.handleSelection.bind(this);
-    this.selectOption = this.selectOption.bind(this);
-  }
-  componentDidMount () {
-    if (this.props.loggedInChannelName) {
-      this.selectOption(this.props.loggedInChannelName);
-    }
-  }
-  componentWillReceiveProps ({ loggedInChannelName }) {
-    if (loggedInChannelName && (loggedInChannelName !== this.props.loggedInChannelName)) {
-      this.selectOption(loggedInChannelName);
-    }
   }
   toggleAnonymousPublish (event) {
     const value = event.target.value;
@@ -35,10 +19,7 @@ class ChannelSelect extends React.Component {
   }
   handleSelection (event) {
     const selectedOption = event.target.selectedOptions[0].value;
-    this.selectOption(selectedOption);
+    this.props.onChannelSelect(selectedOption);
-  }
-  selectOption (option) {
-    this.setState({selectedOption: option});
   }
   render () {
     return (
@@ -59,14 +40,14 @@ class ChannelSelect extends React.Component {
             <div className="column column--3">
               <label className="label" htmlFor="channel-name-select">Channel:</label>
             </div><div className="column column--7">
-            <select type="text" id="channel-name-select" className="select select--arrow" value={this.state.selectedOption} onChange={this.handleSelection}>
+            <select type="text" id="channel-name-select" className="select select--arrow" value={this.props.selectedChannel} onChange={this.handleSelection}>
               { this.props.loggedInChannelName && <option value={this.props.loggedInChannelName} id="publish-channel-select-channel-option">{this.props.loggedInChannelName}</option> }
-              <option value={LOGIN}>Existing</option>
+              <option value={states.LOGIN}>Existing</option>
-              <option value={CREATE}>New</option>
+              <option value={states.CREATE}>New</option>
             </select>
           </div>
-            { (this.state.selectedOption === LOGIN) && <ChannelLoginForm /> }
+            { (this.props.selectedChannel === states.LOGIN) && <ChannelLoginForm /> }
-            { (this.state.selectedOption === CREATE) && <ChannelCreateForm /> }
+            { (this.props.selectedChannel === states.CREATE) && <ChannelCreateForm /> }
           </div>
         )}
       </div>

react/containers/NavBar/index.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { updateLoggedInChannel } from 'actions/channel';
 import View from './view';
+import {updateSelectedChannel} from '../../actions/publish';
 
 const mapStateToProps = ({ channel }) => {
   return {
@@ -14,6 +15,7 @@ const mapDispatchToProps = dispatch => {
   return {
     onChannelLogin: (name, shortId, longId) => {
       dispatch(updateLoggedInChannel(name, shortId, longId));
+      dispatch(updateSelectedChannel(name));
     },
   };
 };

react/containers/NavBar/view.jsx

@@ -43,7 +43,9 @@ class NavBar extends React.Component {
     let channelName, channelShortId, channelLongId;
     ({ channelName, channelShortId, channelLongId } = getUserCookies());
     console.log(`cookies found for channel: ${channelName} ${channelShortId} ${channelLongId}`);
-    this.props.onChannelLogin(channelName, channelShortId, channelLongId);
+    if (channelName) {
+      this.props.onChannelLogin(channelName, channelShortId, channelLongId);
+    }
   }
   handleSelection (event) {
     const value = event.target.selectedOptions[0].value;

react/reducers/publish.js

@@ -1,7 +1,9 @@
 import * as actions from 'constants/action_types';
+import * as channelSelectStates from 'constants/channel_select_states';
 
 const initialState = {
   publishInChannel: false,
+  selectedChannel : channelSelectStates.LOGIN,
   status          : {
     status : null,
     message: null,
@@ -61,6 +63,10 @@ export default function (state = initialState, action) {
           [action.name]: action.value,
         }),
       });
+    case actions.SELECTED_CHANNEL_UPDATE:
+      return Object.assign({}, state, {
+        selectedChannel: action.value,
+      });
     default:
       return state;
   }