pass logged in channel name to channel selector

react/components/channelSelector.jsx

@@ -33,7 +33,7 @@ class ChannelSelector extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      displayCreateOrLogin: LOGIN,
+      displayCreateOrLogin: null,
     };
     this.toggleCreateOrLogin = this.toggleCreateOrLogin.bind(this);
   }
@@ -41,8 +41,10 @@ class ChannelSelector extends React.Component {
     const selectedOption = event.target.selectedOptions[0].value;
     if (selectedOption === 'login') {
       this.setState({ displayCreateOrLogin: LOGIN });
-    } else {
+    } else if (selectedOption === 'create') {
       this.setState({ displayCreateOrLogin: CREATE });
+    } else {
+      this.setState({ displayCreateOrLogin: null });
     }
   }
   render () {
@@ -57,13 +59,14 @@ class ChannelSelector extends React.Component {
               <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}>
-                { this.props.loggedInChannel && <option value={this.props.loggedInChannel} id="publish-channel-select-channel-option">{this.props.loggedInChannel}</option> }
+                { 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 /> : <ChannelCreateForm /> }
+            { (this.state.displayCreateOrLogin === LOGIN) && <ChannelLoginForm /> }
+            { (this.state.displayCreateOrLogin === CREATE) && <ChannelCreateForm /> }
 
           </div>
         )}

react/components/publishForm.jsx

@@ -97,7 +97,7 @@ class PublishForm extends React.Component {
 
             <ChannelSelector
               channel={this.props.channel}
-              loggedInChannel={this.props.loggedInChannel}
+              loggedInChannelName={this.props.loggedInChannelName}
               publishToChannel={this.props.publishToChannel}
               updateUploaderState={this.updateUploaderState}
               channelError={this.state.channelError}

react/uploader.js

@@ -32,14 +32,15 @@ class Uploader extends React.Component {
     this.makeGetRequest = this.makeGetRequest.bind(this);
     this.makePostRequest = this.makePostRequest.bind(this);
     this.cleanseClaimName = this.cleanseClaimName.bind(this);
+    this.getCookie = this.getCookie.bind(this);
   }
   componentDidMount () {
     // check for whether a channel is logged in
     // if so, setState loggedInChannel to the channel name
-    // const loggedInChannel = getCookie('channel_name');
-    // this.setState({loggedInChannel})
-    // const loggedInChannelShortId = getCookie('short_channel_id');
-    // this.setState({loggedInChannelShortId})
+    const loggedInChannelName = this.getCookie('channel_name');
+    this.setState({loggedInChannelName})
+    const loggedInChannelShortId = this.getCookie('short_channel_id');
+    this.setState({loggedInChannelShortId});
   }
   updateUploaderState (name, value) {
     console.log(`updateUploaderState ${name} ${value}`);
@@ -74,10 +75,10 @@ class Uploader extends React.Component {
       xhttp.responseType = 'json';
       xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
       xhttp.onreadystatechange = () => {
-        if (xhttp.readyState == 4 ) {
-          if ( xhttp.status == 200) {
+        if (xhttp.readyState === 4) {
+          if (xhttp.status === 200) {
             resolve(xhttp.response);
-          } else if (xhttp.status == 403) {
+          } else if (xhttp.status === 403) {
             reject('Wrong channel name or password');
           } else {
             reject('request failed with status:' + xhttp.status);
@@ -92,6 +93,21 @@ class Uploader extends React.Component {
     name = name.replace(/[^A-Za-z0-9-]/g, '');  // remove all characters that are not A-Z, a-z, 0-9, or '-'
     return name;
   }
+  getCookie (cname) {
+    const name = cname + '=';
+    const decodedCookie = decodeURIComponent(document.cookie);
+    const ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === ' ') {
+        c = c.substring(1);
+      }
+      if (c.indexOf(name) === 0) {
+        return c.substring(name.length, c.length);
+      }
+    }
+    return '';
+  }
   render () {
     return (
       <div className="row row--tall flex-container--column">