added display of publishing status

public/assets/js/publishFileFunctions.js

@@ -1,14 +1,6 @@
 var stagedFiles = null;
 
 const publishFileFunctions = {
-    returnNullOrChannel: function () {
-        const channelRadio = document.getElementById('channel-radio');
-        if (channelRadio.checked) {
-            const channelInput = document.getElementById('channel-name-select');
-            return channelInput.value.trim();
-        }
-        return null;
-    },
     // Validate the publish submission and then trigger upload
     showUploadStartedMessage: function (){
         console.log('starting upload');

react/actions/index.js

@@ -52,9 +52,10 @@ export function setPublishInChannel (channel) {
   };
 };
 
-export function updatePublishStatus (status) {
+export function updatePublishStatus (status, message) {
   return {
     type: PUBLISH_STATUS_UPDATE,
     status,
+    message,
   };
 };

react/components/PublishStatus.jsx

@@ -1,18 +1,49 @@
 import React from 'react';
 
-class PublishStatus extends React.Component {
-  render () {
+const LOAD_START = 'LOAD_START';
+const LOADING = 'LOADING';
+const PUBLISHING = 'PUBLISHING';
+const SUCCESS = 'SUCCESS';
+const FAILED = 'FAILED';
+
+function PublishStatus ({ status, message }) {
   return (
-      <div id="publish-status" class="hidden">
-        <div class="row row--margined">
-          <div id="publish-update" class="row align-content-center"></div>
-          <div id="publish-progress-bar" class="row align-content-center"></div>
-          <div id="upload-percent" class="row align-content-center"></div>
-          <div>{this.props.status}</div>
+    <div className="row row--tall flex-container--column flex-container--center-center">
+      {(status === LOAD_START) &&
+        <div className="row align-content-center">
+          <p>File is loading to server</p>
+          <p className="blue">{message}</p>
         </div>
+      }
+      {(status === LOADING) &&
+      <div>
+        <div className="row align-content-center">
+          <p>File is loading to server</p>
+          <p className="blue">{message}</p>
+        </div>
+      </div>
+      }
+      {(status === PUBLISHING) &&
+      <div className="row align-content-center">
+        <p>Upload complete.  Your file is now being published on the blockchain...</p>
+        <p>PROGRESS BAR HERE</p>
+        <p>Curious what magic is happening here? <a className="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>
+      </div>
+      }
+      {(status === SUCCESS) &&
+      <div className="row align-content-center">
+        {message}
+      </div>
+      }
+      {(status === FAILED) &&
+      <div className="row align-content-center">
+        <p>Something went wrong...</p>
+        <p><strong>{message}</strong></p>
+        <p>For help, post the above error text in the #speech channel on the <a className="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">lbry discord</a></p>
+      </div>
+      }
     </div>
   );
-  }
 };
 
-module.exports = PublishStatus;
+export default PublishStatus;

react/containers/PublishForm.jsx

@@ -10,6 +10,12 @@ import { connect } from 'react-redux';
 import { getCookie } from '../utils/cookies.js';
 import { selectFile, clearFile, updateLoggedInChannel, updatePublishStatus } from '../actions';
 
+const LOAD_START = 'LOAD_START';
+const LOADING = 'LOADING';
+const PUBLISHING = 'PUBLISHING';
+const SUCCESS = 'SUCCESS';
+const FAILED = 'FAILED';
+
 class PublishForm extends React.Component {
   constructor (props) {
     super(props);
@@ -54,18 +60,18 @@ class PublishForm extends React.Component {
     const fd = this.appendDataToFormData(file, metadata);
     const that = this;
     xhr.upload.addEventListener('loadstart', function () {
-      that.props.onPublishStatusChange('upload started');
+      that.props.onPublishStatusChange(LOAD_START, 'upload started');
     });
     xhr.upload.addEventListener('progress', function (e) {
       if (e.lengthComputable) {
         const percentage = Math.round((e.loaded * 100) / e.total);
-        that.props.onPublishStatusChange(`upload progress: ${percentage}%`);
         console.log('progress:', percentage);
+        that.props.onPublishStatusChange(LOADING, `${percentage}%`);
       }
     }, false);
     xhr.upload.addEventListener('load', function () {
       console.log('loaded 100%');
-      that.props.onPublishStatusChange(`Upload complete.  Your file is now being published on the blockchain...`);
+      that.props.onPublishStatusChange(PUBLISHING, null);
     }, false);
     xhr.open('POST', uri, true);
     xhr.onreadystatechange = function () {
@@ -73,11 +79,11 @@ class PublishForm extends React.Component {
         console.log('publish response:', xhr.response);
         if (xhr.status === 200) {
           console.log('publish complete!');
-          that.props.onPublishStatusChange(JSON.parse(xhr.response).message);
+          that.props.onPublishStatusChange(SUCCESS, JSON.parse(xhr.response).message);
         } else if (xhr.status === 502) {
-          that.props.onPublishStatusChange('Spee.ch was not able to get a response from the LBRY network.');
+          that.props.onPublishStatusChange(FAILED, 'Spee.ch was not able to get a response from the LBRY network.');
         } else {
-          that.props.onPublishStatusChange(JSON.parse(xhr.response).message);
+          that.props.onPublishStatusChange(FAILED, JSON.parse(xhr.response).message);
         }
       }
     };
@@ -211,8 +217,8 @@ const mapDispatchToProps = dispatch => {
     onChannelLogin: (name, shortId, longId) => {
       dispatch(updateLoggedInChannel(name, shortId, longId));
     },
-    onPublishStatusChange: (status) => {
-      dispatch(updatePublishStatus(status));
+    onPublishStatusChange: (status, message) => {
+      dispatch(updatePublishStatus(status, message));
     },
   };
 };

react/containers/PublishTool.jsx

@@ -5,24 +5,29 @@ import PublishStatus from '../components/PublishStatus.jsx';
 import {connect} from 'react-redux';
 
 class PublishTool extends React.Component {
-  constructor (props) {
-    super(props);
-  }
   render () {
+    if (this.props.file) {
+      if (this.props.status) {
         return (
-      <div className="row row--tall flex-container--column">
-        { !this.props.file && <PreviewDropzone /> }
-        { this.props.file && <PublishForm /> }
-        { this.props.publishStatus && <PublishStatus /> }
-      </div>
+          <PublishStatus
+            status={this.props.status}
+            message={this.props.message}
+          />
         );
+      } else {
+        return <PublishForm />;
+      }
+    } else {
+      return <PreviewDropzone />;
+    }
   }
 };
 
 const mapStateToProps = state => {
   return {
     file   : state.file,
-    publishStatus: state.publishStatus,
+    status : state.status.status,
+    message: state.status.message,
   };
 };
 

react/reducers/index.js

@@ -10,7 +10,10 @@ const initialState = {
     longId : null,
   },
   publishInChannel: false,
-  publishStatus   : null,
+  status          : {
+    status : null,
+    message: null,
+  },
   error   : null,
   file    : null,
   claim   : '',
@@ -59,8 +62,11 @@ export default function (state = initialState, action) {
       });
     case PUBLISH_STATUS_UPDATE:
       return Object.assign({}, state, {
-        publishStatus: action.status,
-      })
+        status: Object.assign({}, state.metadata, {
+          status : action.status,
+          message: action.message,
+        }),
+      });
     default:
       return state;
   }