-
-
-
-
{this.props.status}
+const LOAD_START = 'LOAD_START';
+const LOADING = 'LOADING';
+const PUBLISHING = 'PUBLISHING';
+const SUCCESS = 'SUCCESS';
+const FAILED = 'FAILED';
+
+function PublishStatus ({ status, message }) {
+ return (
+
+ {(status === LOAD_START) &&
+
+
File is loading to server
+
{message}
+
+ }
+ {(status === LOADING) &&
+
+
+
File is loading to server
+
{message}
- );
- }
+ }
+ {(status === PUBLISHING) &&
+
+
Upload complete. Your file is now being published on the blockchain...
+
PROGRESS BAR HERE
+
Curious what magic is happening here? Learn more.
+
+ }
+ {(status === SUCCESS) &&
+
+ {message}
+
+ }
+ {(status === FAILED) &&
+
+
Something went wrong...
+
{message}
+
For help, post the above error text in the #speech channel on the lbry discord
+
+ }
+
+ );
};
-module.exports = PublishStatus;
+export default PublishStatus;
diff --git a/react/containers/PublishForm.jsx b/react/containers/PublishForm.jsx
index 81b9451c..eb6c68d1 100644
--- a/react/containers/PublishForm.jsx
+++ b/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));
},
};
};
diff --git a/react/containers/PublishTool.jsx b/react/containers/PublishTool.jsx
index 2c885b1e..2756038a 100644
--- a/react/containers/PublishTool.jsx
+++ b/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 () {
- return (
-
- { !this.props.file &&
}
- { this.props.file &&
}
- { this.props.publishStatus &&
}
-
- );
+ if (this.props.file) {
+ if (this.props.status) {
+ return (
+
+ );
+ } else {
+ return
;
+ }
+ } else {
+ return
;
+ }
}
};
const mapStateToProps = state => {
return {
- file : state.file,
- publishStatus: state.publishStatus,
+ file : state.file,
+ status : state.status.status,
+ message: state.status.message,
};
};
diff --git a/react/reducers/index.js b/react/reducers/index.js
index a13bb633..f67a4e2d 100644
--- a/react/reducers/index.js
+++ b/react/reducers/index.js
@@ -10,11 +10,14 @@ const initialState = {
longId : null,
},
publishInChannel: false,
- publishStatus : null,
- error : null,
- file : null,
- claim : '',
- metadata : {
+ status : {
+ status : null,
+ message: null,
+ },
+ error : null,
+ file : null,
+ claim : '',
+ metadata: {
title : '',
thumbnail : '',
description: '',
@@ -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;
}