updated publish redirects and channel nav buttons

react/components/AssetDisplay/index.js

@@ -127,7 +127,7 @@ AssetDisplay.propTypes = {
   src        : PropTypes.string.isRequired,
   contentType: PropTypes.string.isRequired,
   fileExt    : PropTypes.string.isRequired,
-  thumbnail  : PropTypes.string.isRequired,
+  thumbnail  : PropTypes.string,
 };
 
 export default AssetDisplay;

react/components/ChannelClaimsDisplay/index.js

@@ -13,6 +13,8 @@ class ChannelClaimsDisplay extends React.Component {
       totalClaims: null,
     };
     this.updateClaimsData = this.updateClaimsData.bind(this);
+    this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this);
+    this.showNextResultsPage = this.showNextResultsPage.bind(this);
   }
   componentDidMount () {
     this.updateClaimsData(1);
@@ -39,6 +41,14 @@ class ChannelClaimsDisplay extends React.Component {
         that.setState({error: error.message});
       });
   }
+  showPreviousResultsPage () {
+    const previousPage = parseInt(this.state.currentPage) - 1;
+    this.updateClaimsData(previousPage);
+  }
+  showNextResultsPage () {
+    const nextPage = parseInt(this.state.currentPage) + 1;
+    this.updateClaimsData(nextPage);
+  }
   render () {
     return (
       <div>
@@ -50,8 +60,6 @@ class ChannelClaimsDisplay extends React.Component {
           </div>
         ) : (
           <div className="row row--tall">
-            <p>total pages: {this.state.totalPages}</p>
-            <p>total claims: {this.state.totalClaims}</p>
             {this.state.claims &&
             <div>
               {this.state.claims.map((claim, index) => <AssetPreview
@@ -59,11 +67,12 @@ class ChannelClaimsDisplay extends React.Component {
                 claimId={claim.claimId}
                 fileExt={claim.fileExt}
                 contentType={claim.contentType}
-                key={index}
+                key={`${claim.name}-${index}`}
               />)}
-              {(this.state.currentPage > 1) && <button onClick={this.updateClaimsData(this.state.currentPage - 1)}>Previous Page</button>}
-              <p>current page: {this.state.currentPage}</p>
-              {(this.state.currentPage < this.state.totalPages) && <button onClick={this.updateClaimsData(this.state.currentPage + 1)}>Next Page</button>}
+              <div>
+                {(this.state.currentPage > 1) && <button onClick={this.showPreviousResultsPage}>Previous Page</button>}
+                {(this.state.currentPage < this.state.totalPages) && <button onClick={this.showNextResultsPage}>Next Page</button>}
+              </div>
             </div>
             }
           </div>

react/components/PublishStatus/index.jsx

@@ -30,7 +30,7 @@ function PublishStatus ({ status, message }) {
       {(status === publishStates.SUCCESS) &&
       <div className="row align-content-center">
         <p>Your publish is complete! You are being redirected to it now.</p>
-        <p>If you are not automatically redirected, <a class="link--primary" target="_blank" href={message}>click here.</a></p>
+        <p>If you are not automatically redirected, <a className="link--primary" target="_blank" href={message}>click here.</a></p>
       </div>
       }
       {(status === publishStates.FAILED) &&

react/containers/PublishForm/view.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
 import Dropzone from 'containers/Dropzone';
 import PublishTitleInput from 'containers/PublishTitleInput';
 import PublishUrlInput from 'containers/PublishUrlInput';
@@ -70,16 +71,14 @@ class PublishForm extends React.Component {
     xhr.open('POST', uri, true);
     xhr.onreadystatechange = function () {
       if (xhr.readyState === 4) {
-        console.log('publish response:', xhr.response);
-        if (xhr.status === 200) {
-          console.log('publish complete!');
-          const url = JSON.parse(xhr.response).message.url;
-          that.props.onPublishStatusChange(publishStates.SUCCESS, url);
-          window.location = url;
-        } else if (xhr.status === 502) {
-          that.props.onPublishStatusChange(publishStates.FAILED, 'Spee.ch was not able to get a response from the LBRY network.');
+        const response = JSON.parse(xhr.response);
+        console.log('publish response:', response);
+        if ((xhr.status === 200) && response.success) {
+          that.props.onPublishStatusChange(publishStates.SUCCESS, response.data.url);
+          // redirect to the published asset's show page
+          that.props.history.push(`/${response.data.claimId}/${response.data.name}`);
         } else {
-          that.props.onPublishStatusChange(publishStates.FAILED, JSON.parse(xhr.response).message);
+          that.props.onPublishStatusChange(publishStates.FAILED, response.message);
         }
       }
     };
@@ -176,4 +175,4 @@ class PublishForm extends React.Component {
   }
 };
 
-export default PublishForm;
+export default withRouter(PublishForm);

routes/api-routes.js

@@ -151,10 +151,12 @@ module.exports = (app) => {
     .then(result => {
       res.status(200).json({
         success: true,
-        message: {
+        message: 'publish completed successfully',
+        data   : {
           name,
-          url   : `${site.host}/${result.claim_id}/${name}`,
-          lbryTx: result,
+          claimId: result.claim_id,
+          url    : `${site.host}/${result.claim_id}/${name}`,
+          lbryTx : result,
         },
       });
       // log the publish end time