react/components/channelLoginForm.jsx

@@ -19,6 +19,24 @@ class ChannelLoginForm extends React.Component {
   }
   loginToChannel (event) {
     event.preventDefault();
+    const params = `username=${this.state.name}&password=${this.state.password}`;
+    const url = '/login';
+    const that = this;
+    this.props.makePostRequest(url, params)
+      .then(result => {
+        that.props.updateLoggedInChannelOutsideReact(result.channelName, result.channelClaimId, result.shortChannelId);
+        that.props.updateUploaderState('loggedInChannelName', result.channelName);
+        that.props.updateUploaderState('loggedInChannelShortId', result.shortChannelId);
+        that.props.selectOption(result.channelName);
+      })
+      .catch(error => {
+        console.log('login error', error);
+        if (error.message) {
+          that.setState({'error': error.message});
+        } else {
+          that.setState({'error': 'There was an error logging into your channel'});
+        }
+      });
   }
   render () {
     return (

react/components/channelSelector.jsx

@@ -9,24 +9,28 @@ class ChannelSelector extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      displayCreateOrLogin: LOGIN,
+      optionState: LOGIN,
     };
-    this.toggleCreateOrLogin = this.toggleCreateOrLogin.bind(this);
+    this.handleSelection = this.handleSelection.bind(this);
+    this.selectOption = this.selectOption.bind(this);
+    this.updateLoggedInChannelOutsideReact = this.updateLoggedInChannelOutsideReact.bind(this);
   }
   componentWillMount () {
     if (this.props.loggedInChannelName) {
-      this.setState({ displayCreateOrLogin: null });
+      this.setState({ optionState: null });
     }
   }
-  toggleCreateOrLogin (event) {
+  handleSelection (event) {
     const selectedOption = event.target.selectedOptions[0].value;
-    if (selectedOption === 'login') {
+    this.selectOption(selectedOption);
-      this.setState({ displayCreateOrLogin: LOGIN });
-    } else if (selectedOption === 'create') {
-      this.setState({ displayCreateOrLogin: CREATE });
-    } else {
-      this.setState({ displayCreateOrLogin: null });
   }
+  selectOption (option) {
+    this.setState({optionState: option});
+  }
+  updateLoggedInChannelOutsideReact (channelName, channelClaimId, shortChannelId) {
+    // update anywhere on page that needs to be updated outside of this component
+    setUserCookies(channelName, channelClaimId, shortChannelId);
+    replaceChannelOptionInNavBarChannelSelect(channelName);
   }
   render () {
     return (
@@ -39,18 +43,27 @@ 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" onChange={this.toggleCreateOrLogin}>
+              <select type="text" id="channel-name-select" className="select select--arrow" value={this.state.optionState} 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>
               </select>
             </div>
 
-            { (this.state.displayCreateOrLogin === LOGIN) && <ChannelLoginForm /> }
+            { (this.state.optionState === LOGIN) &&
-            { (this.state.displayCreateOrLogin === CREATE) &&
+              <ChannelLoginForm
+                makePostRequest={this.props.makePostRequest}
+                updateLoggedInChannelOutsideReact={this.updateLoggedInChannelOutsideReact}
+                updateUploaderState={this.props.updateUploaderState}
+                selectOption={this.selectOption}
+              /> }
+            { (this.state.optionState === CREATE) &&
               <ChannelCreateForm
-                  makeGetRequest={this.props.makeGetRequest}
                 cleanseInput={this.props.cleanseInput}
+                makeGetRequest={this.props.makeGetRequest}
+                updateLoggedInChannelOutsideReact={this.updateLoggedInChannelOutsideReact}
+                updateUploaderState={this.props.updateUploaderState}
+                selectOption={this.selectOption}
               /> }
 
           </div>

react/components/publishForm.jsx

@@ -91,12 +91,13 @@ class PublishForm extends React.Component {
               updateUploaderState={this.props.updateUploaderState}
             />
             <ChannelSelector
-              channel={this.props.channel}
               loggedInChannelName={this.props.loggedInChannelName}
               publishToChannel={this.props.publishToChannel}
               cleanseInput={this.props.cleanseInput}
               updateUploaderState={this.updateUploaderState}
               makeGetRequest={this.props.makeGetRequest}
+              makePostRequest={this.props.makePostRequest}
+              updateUploaderState={this.props.updateUploaderState}
             />
 
             <MetadataInputs />

react/uploader.js

@@ -14,7 +14,6 @@ const initialState = {
   publishToChannel      : false,
   file                  : null,
   title                 : '',
-  channel               : null,
   claim                 : '',
   thumbnail             : '',
   description           : '',
@@ -122,13 +121,13 @@ class Uploader extends React.Component {
             updateUploaderState={this.updateUploaderState}
             clearUploaderState={this.clearUploaderState}
             makeGetRequest={this.makeGetRequest}
+            makePostRequest={this.makePostRequest}
             cleanseInput={this.cleanseInput}
             loggedInChannelName={this.state.loggedInChannelName}
             loggedInChannelShortId={this.state.loggedInChannelShortId}
             publishToChannel={this.state.publishToChannel}
             file={this.state.file}
             title={this.state.title}
-            channel={this.state.channel}
             claim={this.state.claim}
             thumbnail={this.state.thumbnail}
             description={this.state.description}