react/containers/Dropzone.jsx

@@ -152,6 +152,7 @@ const mapDispatchToProps = dispatch => {
   return {
     onFileSelect: (file) => {
       dispatch(selectFile(file));
+      dispatch(updateError('publishSubmit', null));
     },
     onFileError: (value) => {
       dispatch(updateError('file', value));

react/containers/PublishForm.jsx

@@ -125,13 +125,13 @@ class PublishForm extends React.Component {
       .then(() => {
         const metadata = that.createMetadata();
         // publish the claim
-        return that.makePublishRequest(this.props.file, metadata);
+        return that.makePublishRequest(that.props.file, metadata);
       })
       .then(() => {
         that.props.onPublishStatusChange('publish request made');
       })
       .catch((error) => {
-        that.props.onPublishRequestError(error.message);
+        that.props.onPublishSubmitError(error.message);
       });
   }
   render () {
@@ -174,8 +174,8 @@ class PublishForm extends React.Component {
               <PublishMetadataInputs />
             </div>
 
-            <div className="row row--padded row--wide align-content-center">
+            <div className="row row--padded row--no-top row--wide align-content-center">
-              <p className="info-message-placeholder info-message--failure">{this.props.publishRequestError}</p>
+              <p className="info-message-placeholder info-message--failure">{this.props.publishSubmitError}</p>
               <button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
             </div>
 
@@ -196,18 +196,18 @@ class PublishForm extends React.Component {
 
 const mapStateToProps = state => {
   return {
-    file               : state.file,
+    file              : state.file,
-    claim              : state.claim,
+    claim             : state.claim,
-    title              : state.metadata.title,
+    title             : state.metadata.title,
-    thumbnail          : state.metadata.thumbnail,
+    thumbnail         : state.metadata.thumbnail,
-    description        : state.metadata.description,
+    description       : state.metadata.description,
-    license            : state.metadata.license,
+    license           : state.metadata.license,
-    nsfw               : state.metadata.nsfw,
+    nsfw              : state.metadata.nsfw,
-    loggedInChannel    : state.loggedInChannel,
+    loggedInChannel   : state.loggedInChannel,
-    publishInChannel   : state.publishInChannel,
+    publishInChannel  : state.publishInChannel,
-    fileError          : state.error.file,
+    fileError         : state.error.file,
-    urlError           : state.error.url,
+    urlError          : state.error.url,
-    publishRequestError: state.error.publishRequest,
+    publishSubmitError: state.error.publishSubmit,
   };
 };
 
@@ -225,8 +225,8 @@ const mapDispatchToProps = dispatch => {
     onPublishStatusChange: (status, message) => {
       dispatch(updatePublishStatus(status, message));
     },
-    onPublishRequestError: (value) => {
+    onPublishSubmitError: (value) => {
-      dispatch(updateError('publishRequest', value));
+      dispatch(updateError('publishSubmit', value));
     },
   };
 };
@@ -243,12 +243,12 @@ PublishForm.propTypes = {
   publishInChannel     : PropTypes.bool.isRequired,
   fileError            : PropTypes.string,
   urlError             : PropTypes.string,
-  publishRequestError  : PropTypes.string,
+  publishSubmitError   : PropTypes.string,
   onFileSelect         : PropTypes.func.isRequired,
   onFileClear          : PropTypes.func.isRequired,
   onChannelLogin       : PropTypes.func.isRequired,
   onPublishStatusChange: PropTypes.func.isRequired,
-  onPublishRequestError: PropTypes.func.isRequired,
+  onPublishSubmitError: PropTypes.func.isRequired,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(PublishForm);

react/containers/PublishMetadataInputs.jsx

@@ -45,42 +45,39 @@ class MetadataInputs extends React.Component {
   }
   render () {
     return (
-      <div>
+      <div id="publish-details" className="row row--padded row--no-top row--wide">
-        <div className="column column--10">
+        <a className="label link--primary" id="publish-details-toggle" href="#" onClick={this.toggleShowInputs}>{this.state.showInputs ? '[less]' : '[more]'}</a>
-          <a className="label link--primary" id="publish-details-toggle" href="#" onClick={this.toggleShowInputs}>{this.state.showInputs ? '[less]' : '[more]'}</a>
+      {this.state.showInputs && (
-        </div>
+        <div>
-        {this.state.showInputs && (
+          <div className="row row--no-top">
-          <div id="publish-details" className="row row--padded row--wide">
+            <div className="column column--3 column--med-10 align-content-top">
-
+              <label htmlFor="publish-license" className="label">Description:</label>
-            <div className="row row--no-top">
+            </div><div className="column column--7 column--sml-10">
-              <div className="column column--3 column--med-10 align-content-top">
+              <textarea rows="1" id="publish-description" className="textarea textarea--primary textarea--full-width" name="description" placeholder="Optional description" value={this.props.description} onChange={this.handleInput} />
-                <label htmlFor="publish-license" className="label">Description:</label>
-              </div><div className="column column--7 column--sml-10">
-                <textarea rows="1" id="publish-description" className="textarea textarea--primary textarea--full-width" name="description" placeholder="Optional description" value={this.props.description} onChange={this.handleInput} />
-              </div>
-            </div>
-
-            <div className="row row--no-top">
-              <div className="column column--3 column--med-10">
-                <label htmlFor="publish-license" className="label">License:</label>
-              </div><div className="column column--7 column--sml-10">
-                <select type="text" name="license" id="publish-license" className="select select--primary" onChange={this.handleSelection}>
-                  <option value=" ">Unspecified</option>
-                  <option value="Public Domain">Public Domain</option>
-                  <option value="Creative Commons">Creative Commons</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="row row--no-top">
-              <div className="column column--3">
-                <label htmlFor="publish-nsfw" className="label">Mature:</label>
-              </div><div className="column column--7">
-                <input className="input-checkbox" type="checkbox" id="publish-nsfw" name="nsfw" checked={this.props.nsfw} onChange={this.handleCheck} />
-              </div>
             </div>
           </div>
-        )}
+
+          <div className="row row--no-top">
+            <div className="column column--3 column--med-10">
+              <label htmlFor="publish-license" className="label">License:</label>
+            </div><div className="column column--7 column--sml-10">
+              <select type="text" name="license" id="publish-license" className="select select--primary" onChange={this.handleSelection}>
+                <option value=" ">Unspecified</option>
+                <option value="Public Domain">Public Domain</option>
+                <option value="Creative Commons">Creative Commons</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="row row--no-top">
+            <div className="column column--3">
+              <label htmlFor="publish-nsfw" className="label">Mature:</label>
+            </div><div className="column column--7">
+              <input className="input-checkbox" type="checkbox" id="publish-nsfw" name="nsfw" checked={this.props.nsfw} onChange={this.handleCheck} />
+            </div>
+          </div>
+        </div>
+      )}
       </div>
     );
   }

react/containers/PublishUrlInput.jsx

@@ -53,13 +53,13 @@ class UrlChooser extends React.Component {
     makeGetRequest(`/api/claim-is-available/${claim}`)
       .then(response => {
         if (response) {
-          this.props.onUrlError(null);
+          that.props.onUrlError(null);
         } else {
-          this.props.onUrlError('That url has already been claimed');
+          that.props.onUrlError('That url has already been claimed');
         }
       })
       .catch((error) => {
-        this.props.onUrlError(error.message);
+        that.props.onUrlError(error.message);
       });
   }
   render () {
@@ -97,6 +97,7 @@ const mapDispatchToProps = dispatch => {
   return {
     onClaimChange: (value) => {
       dispatch(updateClaim(value));
+      dispatch(updateError('publishSubmit', null));
     },
     onUrlError: (value) => {
       dispatch(updateError('url', value));

react/reducers/index.js

@@ -15,9 +15,9 @@ const initialState = {
     message: null,
   },
   error: {
-    file          : null,
+    file         : null,
-    url           : null,
+    url          : null,
-    publishRequest: null,
+    publishSubmit: null,
   },
   file    : null,
   claim   : '',