reformatted status component

react/components/PublishStatus/index.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ProgressBar from 'components/ProgressBar';
-import * as publishStates from 'constants/publish_claim_states';
-
-function PublishStatus ({ status, message }) {
-  return (
-    <div className='row row--tall flex-container--column flex-container--center-center'>
-      {(status === publishStates.LOAD_START) &&
-        <div className='row align-content-center'>
-          <p>File is loading to server</p>
-          <p className='blue'>{message}</p>
-        </div>
-      }
-      {(status === publishStates.LOADING) &&
-      <div>
-        <div className='row align-content-center'>
-          <p>File is loading to server</p>
-          <p className='blue'>{message}</p>
-        </div>
-      </div>
-      }
-      {(status === publishStates.PUBLISHING) &&
-      <div className='row align-content-center'>
-        <p>Upload complete.  Your file is now being published on the blockchain...</p>
-        <ProgressBar size={12} />
-        <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 === 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 className='link--primary' target='_blank' href={message}>click here.</a></p>
-      </div>
-      }
-      {(status === publishStates.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>
-  );
-};
-
-PublishStatus.propTypes = {
-  status : PropTypes.string.isRequired,
-  message: PropTypes.string,
-};
-
-export default PublishStatus;

react/containers/PublishDetails/view.jsx

@@ -7,7 +7,7 @@ import PublishThumbnailInput from 'containers/PublishThumbnailInput';
 import PublishMetadataInputs from 'containers/PublishMetadataInputs';
 import ChannelSelect from 'containers/ChannelSelect';
 
-class PublishForm extends React.Component {
+class PublishDetails extends React.Component {
   constructor (props) {
     super(props)
     this.onPublishSubmit = this.onPublishSubmit.bind(this);
@@ -60,4 +60,4 @@ class PublishForm extends React.Component {
   }
 };
 
-export default withRouter(PublishForm);
+export default withRouter(PublishDetails);

react/containers/PublishStatus/index.js

@@ -0,0 +1,16 @@
+import {connect} from 'react-redux';
+import {clearFile} from 'actions/publish';
+import View from './view';
+
+const mapStateToProps = ({ publish }) => {
+  return {
+    status : publish.status.status,
+    message: publish.status.message,
+  };
+};
+
+const mapDispatchToProps = {
+  clearFile,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(View);

react/containers/PublishStatus/view.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import ProgressBar from 'components/ProgressBar';
+import * as publishStates from 'constants/publish_claim_states';
+
+class PublishStatus extends React.Component {
+  render () {
+    const { status, message, clearFile } = this.props;
+    return (
+      <div className='row row--tall flex-container--column flex-container--center-center'>
+        {status === publishStates.LOAD_START &&
+        <div className='row align-content-center'>
+          <p>File is loading to server</p>
+          <p className='blue'>0%</p>
+        </div>
+        }
+        {status === publishStates.LOADING &&
+        <div>
+          <div className='row align-content-center'>
+            <p>File is loading to server</p>
+            <p className='blue'>{message}</p>
+          </div>
+        </div>
+        }
+        {status === publishStates.PUBLISHING &&
+        <div className='row align-content-center'>
+          <p>Upload complete.  Your file is now being published on the blockchain...</p>
+          <ProgressBar size={12} />
+          <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 === 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 className='link--primary' target='_blank' href={message}>click here.</a></p>
+        </div>
+        }
+        {status === publishStates.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>
+          <button className='button--cancel' onClick={clearFile}>Reset</button>
+        </div>
+        }
+      </div>
+    );
+  }
+};
+
+export default PublishStatus;

react/containers/PublishTool/index.js

@@ -5,7 +5,6 @@ const mapStateToProps = ({ publish }) => {
   return {
     file  : publish.file,
     status: publish.status.status,
-    message: publish.status.message,
   };
 };
 

react/containers/PublishTool/view.jsx

@@ -1,20 +1,17 @@
 import React from 'react';
 import Dropzone from 'containers/Dropzone';
-import PublishForm from 'containers/PublishForm';
+import PublishDetails from 'containers/PublishDetails';
-import PublishStatus from 'components/PublishStatus';
+import PublishStatus from 'containers/PublishStatus';
 
 class PublishTool extends React.Component {
   render () {
     if (this.props.file) {
       if (this.props.status) {
         return (
-          <PublishStatus
+          <PublishStatus />
-            status={this.props.status}
-            message={this.props.message}
-          />
         );
       } else {
-        return <PublishForm />;
+        return <PublishDetails />;
       }
     } else {
       return <Dropzone />;

react/sagas/publish.js

@@ -9,8 +9,8 @@ import { createPublishMetadata, createPublishFormData } from 'utils/publish';
 import { makePublishRequestChannel } from 'channels/publish';
 
 function * publishFile (action) {
-  const { history } = action.data;
   console.log('publishing file');
+  const { history } = action.data;
   const { publishInChannel, selectedChannel, file, claim, metadata, error: { url: urlError } } = yield select(selectPublishState);
   const { loggedInChannel } = yield select(selectChannelState);
   // validate the channel selection
@@ -33,7 +33,6 @@ function * publishFile (action) {
   const channel = yield call(makePublishRequestChannel, publishFormData);
   while (true) {
     const {loadStart, progress, load, success, error} = yield take(channel);
-    console.log('emitted:', loadStart, progress, load, success, error);
     if (error) {
       return yield put(updatePublishStatus(publishStates.FAILED, error.message));
     }
@@ -42,7 +41,7 @@ function * publishFile (action) {
       return history.push(`/${success.data.claimId}/${success.data.name}`);
     }
     if (loadStart) {
-      yield put(updatePublishStatus(publishStates.LOAD_START, 'upload started'));
+      yield put(updatePublishStatus(publishStates.LOAD_START, null));
     }
     if (progress) {
       yield put(updatePublishStatus(publishStates.LOADING, `${progress}%`));