react/components/ChannelSelector.jsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import ChannelLoginForm from '../containers/ChannelLoginForm.jsx';
 import ChannelCreateForm from '../containers/ChannelCreateForm.jsx';
-import { connect } from 'react-redux';
 
-const LOGIN = 'login';
-const CREATE = 'create';
+const LOGIN = 'Existing';
+const CREATE = 'New';
 
 class ChannelSelector extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      optionState: LOGIN,
+      selectedOption: LOGIN,
     };
     this.handleSelection = this.handleSelection.bind(this);
     this.selectOption = this.selectOption.bind(this);
@@ -32,7 +32,7 @@ class ChannelSelector extends React.Component {
     this.selectOption(selectedOption);
   }
   selectOption (option) {
-    this.setState({optionState: option});
+    this.setState({selectedOption: option});
   }
   render () {
     return (
@@ -43,16 +43,16 @@ class ChannelSelector 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.optionState} onChange={this.handleSelection}>
+              <select type="text" id="channel-name-select" className="select select--arrow" value={this.state.selectedOption} 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="create">New</option>
+                <option value={LOGIN}>Existing</option>
+                <option value={CREATE}>New</option>
               </select>
             </div>
 
-            { (this.state.optionState === LOGIN) && <ChannelLoginForm /> }
+            { (this.state.selectedOption === LOGIN) && <ChannelLoginForm /> }
 
-            { (this.state.optionState === CREATE) && <ChannelCreateForm /> }
+            { (this.state.selectedOption === CREATE) && <ChannelCreateForm /> }
 
           </div>
         )}

react/containers/PublishForm.jsx

@@ -5,7 +5,7 @@ import ChannelSelector from '../components/ChannelSelector.jsx';
 import PublishUrlInput from './PublishUrlInput.jsx';
 import PublishThumbnailInput from './PublishThumbnailInput.jsx';
 import PublishMetadataInputs from './PublishMetadataInputs.jsx';
-import AnonymousOrChannelSelect from './AnonymousOrChannelSelect.jsx';
+import AnonymousOrChannelSelect from './ChannelSelect.jsx';
 import { connect } from 'react-redux';
 import { getCookie } from '../utils/cookies.js';
 import {selectFile, clearFile, updateLoggedInChannel, updatePublishStatus, updateError} from '../actions';