react/PublishTool.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Dropzone from './components/dropzone.jsx';
+import PublishDropzone from './components/PublishDropzone.jsx';
-import PublishForm from './components/publishForm.jsx';
+import PublishForm from './components/PublishForm.jsx';
-import PublishStatus from './components/publishStatus.jsx';
+import PublishStatus from './components/PublishStatus.jsx';
 
 const DROPZONE = 'DROPZONE';
 const DETAILS = 'DETAILS';
@@ -12,6 +12,7 @@ const initialState = {
   loggedInChannelName   : null,
   loggedInChannelShortId: null,
   publishToChannel      : false,
+  error                 : null,
   file                  : null,
   title                 : '',
   claim                 : '',
@@ -21,7 +22,7 @@ const initialState = {
   nsfw                  : '',
 };
 
-class Uploader extends React.Component {
+class PublishTool extends React.Component {
   constructor (props) {
     super(props);
     this.state = initialState;
@@ -54,10 +55,10 @@ class Uploader extends React.Component {
       xhttp.open('GET', url, true);
       xhttp.responseType = 'json';
       xhttp.onreadystatechange = () => {
-        if (xhttp.readyState == 4 ) {
+        if (xhttp.readyState === 4) {
-          if ( xhttp.status == 200) {
+          if (xhttp.status === 200) {
             resolve(xhttp.response);
-          } else if (xhttp.status == 403) {
+          } else if (xhttp.status === 401) {
             reject('Wrong channel name or password');
           } else {
             reject('request failed with status:' + xhttp.status);
@@ -77,7 +78,7 @@ class Uploader extends React.Component {
         if (xhttp.readyState === 4) {
           if (xhttp.status === 200) {
             resolve(xhttp.response);
-          } else if (xhttp.status === 403) {
+          } else if (xhttp.status === 401) {
             reject('Wrong channel name or password');
           } else {
             reject('request failed with status:' + xhttp.status);
@@ -111,7 +112,7 @@ class Uploader extends React.Component {
     return (
       <div className="row row--tall flex-container--column">
         { this.state.showComponent === DROPZONE &&
-          <Dropzone
+          <PublishDropzone
             updateUploaderState={this.updateUploaderState}
             cleanseInput={this.cleanseInput}
           />
@@ -126,6 +127,7 @@ class Uploader extends React.Component {
             loggedInChannelName={this.state.loggedInChannelName}
             loggedInChannelShortId={this.state.loggedInChannelShortId}
             publishToChannel={this.state.publishToChannel}
+            error={this.state.error}
             file={this.state.file}
             title={this.state.title}
             claim={this.state.claim}
@@ -144,6 +146,6 @@ class Uploader extends React.Component {
 };
 
 ReactDOM.render(
-  <Uploader />,
+  <PublishTool />,
   document.getElementById('react-uploader')
 );

react/components/AnonymousOrChannelSelect.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+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>
+    );
+  }
+}
+
+module.exports = AnonymousOrChannelSelect;

react/components/ChannelSelector.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import ChannelLoginForm from './channelLoginForm.jsx';
+import ChannelLoginForm from './ChannelLoginForm.jsx';
-import ChannelCreateForm from './channelCreateForm.jsx';
+import ChannelCreateForm from './ChannelCreateForm.jsx';
 
 const LOGIN = 'login';
 const CREATE = 'create';

react/components/PublishDropzone.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const DETAILS = 'DETAILS';
 
-class Dropzone extends React.Component {
+class PublishDropzone extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
@@ -154,4 +154,4 @@ class Dropzone extends React.Component {
   }
 };
 
-module.exports = Dropzone;
+module.exports = PublishDropzone;

react/components/PublishForm.jsx

@@ -1,58 +1,22 @@
 import React from 'react';
-import PreviewDropzone from './previewDropzone.jsx';
+import PreviewDropzone from './PreviewDropzone.jsx';
-import TitleInput from './titleInput.jsx';
+import TitleInput from './PublishTitleInput.jsx';
-import ChannelSelector from './channelSelector.jsx';
+import ChannelSelector from './ChannelSelector.jsx';
-import UrlChooser from './urlChooser.jsx';
+import UrlChooser from './PublishUrlInput.jsx';
-import ThumbnailInput from './thumbnailInput.jsx';
+import PublishThumbnailInput from './PublishThumbnailInput.jsx';
-import MetadataInputs from './metadataInputs.jsx';
+import PublishMetadataInputs from './PublishMetadataInputs.jsx';
-
+import AnonymousOrChannelSelect from './AnonymousOrChannelSelect.jsx';
-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);
     // set defaults
-    this.updateUploaderState = this.updateUploaderState.bind(this);
+    this.state = {
-    this.clearUploaderState = this.clearUploaderState.bind(this);
+      error             : null,
+      showMetadataInputs: false,
+    }
     this.publish = this.publish.bind(this);
   }
-  updateUploaderState (name, value) {
-    this.props.updateUploaderState(name, value);
-  }
-  clearUploaderState () {
-    this.props.clearUploaderState();
-  }
   publish () {
     // publish the asset
   }
@@ -61,7 +25,10 @@ class PublishForm extends React.Component {
       <div className="row row--no-bottom">
         <div className="column column--10">
 
-          <TitleInput title={this.props.title} updateUploaderState={this.updateUploaderState}/>
+          <TitleInput
+            title={this.props.title}
+            updateUploaderState={this.updateUploaderState}
+          />
 
         </div>
         <div className="column column--5 column--sml-10" >
@@ -70,7 +37,11 @@ class PublishForm extends React.Component {
             <PreviewDropzone
               file={this.props.file}
             />
-            { (this.props.file.type === 'video/mp4') && <ThumbnailInput thumbnail={this.props.thumbnail}/> }
+            { (this.props.file.type === 'video/mp4') &&
+              <PublishThumbnailInput
+                thumbnail={this.props.thumbnail}
+              />
+            }
           </div>
         </div>
         <div className="column column--5 column--sml-10 align-content-top">
@@ -83,7 +54,7 @@ class PublishForm extends React.Component {
               loggedInChannelName={this.props.loggedInChannelName}
               loggedInChannelShortId={this.props.loggedInChannelShortId}
               cleanseInput={this.props.cleanseInput}
-              updateUploaderState={this.updateUploaderState}
+              updateUploaderState={this.props.updateUploaderState}
               makeGetRequest={this.props.makeGetRequest}
             />
             <AnonymousOrChannelSelect
@@ -94,21 +65,22 @@ class PublishForm extends React.Component {
               loggedInChannelName={this.props.loggedInChannelName}
               publishToChannel={this.props.publishToChannel}
               cleanseInput={this.props.cleanseInput}
-              updateUploaderState={this.updateUploaderState}
+              updateUploaderState={this.props.updateUploaderState}
               makeGetRequest={this.props.makeGetRequest}
               makePostRequest={this.props.makePostRequest}
+            />
+
+            <PublishMetadataInputs
               updateUploaderState={this.props.updateUploaderState}
             />
 
-            <MetadataInputs />
-
             <div className="row row--padded row--wide">
-              <div className="input-error" id="input-error-publish-submit" hidden="true">{this.props.inputError}</div>
+              <div className="input-error" id="input-error-publish-submit" hidden="true">{this.state.error}</div>
               <button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
             </div>
 
             <div className="row row--short align-content-center">
-              <button className="button--cancel" onClick={this.clearUploaderState}>Cancel</button>
+              <button className="button--cancel" onClick={this.props.clearUploaderState}>Cancel</button>
             </div>
 
             <div className="row row--short align-content-center">

react/components/PublishMetadataInputs.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+class MetadataInputs extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      showInputs: false,
+    };
+    this.toggleShowInputs = this.toggleShowInputs.bind(this);
+  }
+  toggleShowInputs () {
+    if (this.state.showInputs) {
+      this.setState({'showInputs': false});
+    } else {
+      this.setState({'showInputs': true});
+    }
+  }
+  render () {
+    return (
+      <div>
+        <div className="row row--padded row--no-top row--no-bottom row--wide">
+          <div className="column column--10">
+            <a className="label link--primary" id="publish-details-toggle" href="#" onClick={this.toggleShowInputs}>{this.state.showInputs ? '[hide]' : '[show]'}</a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = MetadataInputs;

react/components/metadataInputs.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-class MetadataInputs extends React.Component {
-  render () {
-    return (
-      <div>
-        <h3>details component</h3>
-      </div>
-    );
-  }
-}
-
-module.exports = MetadataInputs;

webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  entry : './react/uploader.js',
+  entry : './react/PublishTool.js',
   output: {
     path    : path.join(__dirname, '/public/bundle/'),
     filename: 'bundle.js',