react/components/channelSelector.jsx

@@ -1,10 +1,72 @@
 import React from 'react';
 
-class ChannelSelector extends React.Component {
+const LOGIN = 'login';
+const CREATE = 'create';
+
+class ChannelLoginForm extends React.Component {
+  constructor (props) {
+    super(props);
+  }
   render () {
     return (
       <div>
-        <h3>channel component</h3>
+        <h4>Channel Login Form</h4>
+      </div>
+    );
+  }
+}
+
+class ChannelCreateForm extends React.Component {
+  constructor (props) {
+    super(props);
+  }
+  render () {
+    return (
+      <div>
+        <h4>Create Channel Form</h4>
+      </div>
+    );
+  }
+}
+
+class ChannelSelector extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      displayCreateOrLogin: LOGIN,
+    };
+    this.toggleCreateOrLogin = this.toggleCreateOrLogin.bind(this);
+  }
+  toggleCreateOrLogin (event) {
+    const selectedOption = event.target.selectedOptions[0].value;
+    if (selectedOption === 'login') {
+      this.setState({ displayCreateOrLogin: LOGIN });
+    } else {
+      this.setState({ displayCreateOrLogin: CREATE });
+    }
+  }
+  render () {
+    return (
+      <div>
+        { this.props.publishToChannel && (
+          <div className="row row--padded row--no-top row--no-bottom row--wide">
+
+            <p id="input-error-channel-select" className="info-message-placeholder info-message--failure">{this.props.channelError}</p>
+
+            <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}>
+                { this.props.loggedInChannel && <option value={this.props.loggedInChannel} id="publish-channel-select-channel-option">{this.props.loggedInChannel}</option> }
+                <option value="login">Existing</option>
+                <option value="create">New</option>
+              </select>
+            </div>
+
+            { (this.state.displayCreateOrLogin === LOGIN) ? <ChannelLoginForm /> : <ChannelCreateForm /> }
+
+          </div>
+        )}
       </div>
     );
   }

react/components/publishForm.jsx

@@ -6,9 +6,45 @@ import UrlInput from './urlInput.jsx';
 import ThumbnailInput from './thumbnailInput.jsx';
 import MetadataInputs from './metadataInputs.jsx';
 
-class PublishDetails extends React.Component {
+class AnonymousOrChannelSelect extends React.Component {
   constructor (props) {
     super(props);
+    this.toggleAnonymousPublish = this.toggleAnonymousPublish.bind(this);
+  }
+  toggleAnonymousPublish (event) {
+    const value = event.target.value;
+    if (value === 'anonymous') {
+      this.props.updateUploaderState('publishToChannel', false);
+    } else {
+      this.props.updateUploaderState('publishToChannel', true);
+    }
+  }
+  render () {
+    return (
+      <div className="row row--padded row--short row--wide">
+        <div className="column column--10">
+          <form>
+            <div className="column column--3 column--med-10">
+              <input type="radio" name="anonymous-or-channel" id="anonymous-radio" className="input-radio" value="anonymous" checked={!this.props.publishToChannel} onChange={this.toggleAnonymousPublish}/>
+              <label className="label label--pointer" htmlFor="anonymous-radio">Anonymous</label>
+            </div>
+            <div className="column column--7 column--med-10">
+              <input type="radio" name="anonymous-or-channel" id="channel-radio" className="input-radio" value="in a channel" checked={this.props.publishToChannel} onChange={this.toggleAnonymousPublish}/>
+              <label className="label label--pointer" htmlFor="channel-radio">In a channel</label>
+          </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+class PublishForm extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      channelError: null,
+    }
     // set defaults
     this.updateUploaderState = this.updateUploaderState.bind(this);
     this.clearUploaderState = this.clearUploaderState.bind(this);
@@ -43,7 +79,15 @@ class PublishDetails extends React.Component {
         <div className="column column--5 column--sml-10 align-content-top">
           <div id="publish-active-area" className="row row--padded">
 
-            <ChannelSelector />
+            <AnonymousOrChannelSelect publishToChannel={this.props.publishToChannel} updateUploaderState={this.props.updateUploaderState}/>
+
+            <ChannelSelector
+              channel={this.props.channel}
+              loggedInChannel={this.props.loggedInChannel}
+              publishToChannel={this.props.publishToChannel}
+              updateUploaderState={this.updateUploaderState}
+              channelError={this.state.channelError}
+            />
 
             <UrlInput file={this.props.file}/>
 
@@ -71,4 +115,4 @@ class PublishDetails extends React.Component {
   }
 };
 
-module.exports = PublishDetails;
+module.exports = PublishForm;

react/components/urlInput.jsx

@@ -1,6 +1,32 @@
 import React from 'react';
 
 class UrlInput extends React.Component {
+  constructor (props) {
+    super(props);
+    this.updateUrl = this.updateUrl.bind(this);
+  }
+  updateUrl (selectedOption) {
+    const urlChannel = document.getElementById('url-channel');
+    const urlNoChannelPlaceholder = document.getElementById('url-no-channel-placeholder');
+    const urlChannelPlaceholder = document.getElementById('url-channel-placeholder');
+    if (selectedOption === 'new' || selectedOption === 'login' || selectedOption === ''){
+      urlChannel.hidden = true;
+      urlNoChannelPlaceholder.hidden = true;
+      urlChannelPlaceholder.hidden = false;
+    } else if (selectedOption === 'anonymous'){
+      urlChannel.hidden = true;
+      urlNoChannelPlaceholder.hidden = false;
+      urlChannelPlaceholder.hidden = true;
+    } else {
+      urlChannel.hidden = false;
+      // show channel and short id
+      const selectedChannel = getCookie('channel_name');
+      const shortChannelId = getCookie('short_channel_id');
+      urlChannel.innerText = `${selectedChannel}:${shortChannelId}`;
+      urlNoChannelPlaceholder.hidden = true;
+      urlChannelPlaceholder.hidden = true;
+    }
+  }
   render () {
     return (
       <div>

react/uploader.js

@@ -1,23 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Dropzone from './components/dropzone.jsx';
-import PublishDetails from './components/publishDetails.jsx';
+import PublishForm from './components/publishForm.jsx';
 import PublishStatus from './components/publishStatus.jsx';
 
 const DROPZONE = 'DROPZONE';
 const DETAILS = 'DETAILS';
 const STATUS = 'STATUS';
 const initialState = {
-  showComponent: DROPZONE,  // DROPZONE, DETAILS, or PUBLISHING
+  showComponent   : DROPZONE,  // DROPZONE, DETAILS, or PUBLISHING
+  loggedInChannel : null,
+  publishToChannel: false,
   file            : null,
   title           : '',
-  channel      : '',
+  channel         : null,
   url             : '',
   thumbnail       : '',
   description     : '',
   license         : '',
   nsfw            : '',
-}
+};
 
 class Uploader extends React.Component {
   constructor (props) {
@@ -29,6 +31,10 @@ class Uploader extends React.Component {
     this.showComponent = this.showComponent.bind(this);
     this.stageFileAndShowDetails = this.stageFileAndShowDetails.bind(this);
   }
+  componentDidMount () {
+    // check for whether a channel is logged in
+    // if so, setState loggedInChannel to the channel name
+  }
   updateUploaderState (name, value) {
     console.log(`updateUploaderState ${name} ${value}`);
     this.setState({[name]: value});
@@ -53,9 +59,11 @@ class Uploader extends React.Component {
           <Dropzone stageFileAndShowDetails={this.stageFileAndShowDetails}/>
         }
         { this.state.showComponent === DETAILS &&
-          <PublishDetails
+          <PublishForm
             updateUploaderState={this.updateUploaderState}
             clearUploaderState={this.clearUploaderState}
+            loggedInChannel={this.state.loggedInChannel}
+            publishToChannel={this.state.publishToChannel}
             file={this.state.file}
             title={this.state.title}
             channel={this.state.channel}

views/partials/publishForm-Channel.handlebars

@@ -1,105 +0,0 @@
-<!-- select whether to publish anonymously or in a channel -->
-<div class="row row--padded row--short row--wide">
-    <div class="column column--10">
-        <form>
-            <div class="column column--3 column--med-10">
-                <input type="radio" name="anonymous-or-channel" id="anonymous-radio" class="input-radio" value="anonymous" {{#unless user}}checked {{/unless}} onchange="toggleChannel(event.target.value)"/>
-                <label class="label label--pointer" for="anonymous-radio">Anonymous</label>
-            </div><div class="column column--7 column--med-10">
-                <input type="radio" name="anonymous-or-channel" id="channel-radio" class="input-radio" value="in a channel" {{#if user}}checked {{/if}} onchange="toggleChannel(event.target.value)"/>
-                <label class="label label--pointer" for="channel-radio">In a channel</label>
-            </div>
-        </form>
-    </div>
-</div>
-
-<div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}>
-    <div class="row row--padded row--no-top row--no-bottom row--wide">
-        <!--error display-->
-        <p id="input-error-channel-select" class="info-message-placeholder info-message--failure"></p>
-        <!--channel login/create select-->
-        <div class="column column--3">
-            <label class="label" for="channel-name-select">Channel:</label>
-        </div><div class="column column--7">
-            <select type="text" id="channel-name-select" class="select select--arrow" onchange="toggleSelectedChannel(event.target.selectedOptions[0].value)">
-            {{#if user}}
-                <option value="{{user.channelName}}" id="publish-channel-select-channel-option">{{user.channelName}}</option>
-            {{/if}}
-                <option value="login">Existing</option>
-                <option value="new" >New</option>
-            </select>
-        </div>
-    </div>
-    <!-- log into an existing channel -->
-    <div id="channel-login-details" class="row row--padded row--short row--wide" {{#if user}}hidden="true"{{/if}}>
-        {{> channelLoginForm}}
-    </div>
-    <!-- create a channel -->
-    <div  id="channel-create-details" class="row row--padded row--short row--wide" hidden="true">
-        {{> channelCreationForm}}
-    </div>
-</div>
-
-<script type="text/javascript">
-    // show or hide the channel selection tools
-    function toggleChannel (selectedOption) {
-        const channelSelectOptions = document.getElementById('channel-select-options');
-        // show/hide the login and new channel forms
-        if (selectedOption === 'anonymous') {
-            channelSelectOptions.hidden = true;
-            channelSelectOptions.hidden = true;
-            // update url
-            updateUrl(selectedOption);
-        } else if (selectedOption === 'in a channel') {
-            channelSelectOptions.hidden = false;
-            // update url
-            let selectedChannel = document.getElementById('channel-name-select').selectedOptions[0].value
-            toggleSelectedChannel(selectedChannel);
-        } else {
-            console.log('selected option was not recognized');
-        }
-
-    }
-    // show or hide the channel create/login tool
-    function toggleSelectedChannel (selectedChannel) {
-         const createChannelTool = document.getElementById('channel-create-details');
-         const loginToChannelTool = document.getElementById('channel-login-details');
-         // show/hide the login and new channel forms
-         if (selectedChannel === 'new') {
-             createChannelTool.hidden = false;
-             loginToChannelTool.hidden = true;
-         } else if (selectedChannel === 'login') {
-             loginToChannelTool.hidden = false;
-             createChannelTool.hidden = true;
-         } else {
-             // hide the login and new channel forms
-             loginToChannelTool.hidden = true;
-             createChannelTool.hidden = true;
-             validationFunctions.hideError(document.getElementById('input-error-channel-select'));
-         }
-        // update url
-        updateUrl(selectedChannel);
-    }
-    function updateUrl (selectedOption) {
-        const urlChannel = document.getElementById('url-channel');
-        const urlNoChannelPlaceholder = document.getElementById('url-no-channel-placeholder');
-        const urlChannelPlaceholder = document.getElementById('url-channel-placeholder');
-        if (selectedOption === 'new' || selectedOption === 'login' || selectedOption === ''){
-            urlChannel.hidden = true;
-            urlNoChannelPlaceholder.hidden = true;
-            urlChannelPlaceholder.hidden = false;
-        } else if (selectedOption === 'anonymous'){
-            urlChannel.hidden = true;
-            urlNoChannelPlaceholder.hidden = false;
-            urlChannelPlaceholder.hidden = true;
-        } else {
-            urlChannel.hidden = false;
-            // show channel and short id
-            const selectedChannel = getCookie('channel_name');
-            const shortChannelId = getCookie('short_channel_id');
-            urlChannel.innerText = `${selectedChannel}:${shortChannelId}`;
-            urlNoChannelPlaceholder.hidden = true;
-            urlChannelPlaceholder.hidden = true;
-        }
-    }
-</script>