LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

reformatted status component

Browse source
This commit is contained in:
bill bittner 2018-03-01 17:16:04 -08:00
parent 4c050503ab
commit d9cc8f5ad4
8 changed files with 76 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
react/components/PublishStatus/index.jsx
View file

@ -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;

0
react/containers/PublishForm/index.js → react/containers/PublishDetails/index.js
View file

4
react/containers/PublishForm/view.jsx → react/containers/PublishDetails/view.jsx
View file

@ -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);

16
react/containers/PublishStatus/index.js Normal file
View file

@ -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);

50
react/containers/PublishStatus/view.jsx Normal file
View file

@ -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;

3
react/containers/PublishTool/index.js
View file

@ -4,8 +4,7 @@ import View from './view';
const mapStateToProps = ({ publish }) => {
return {
file : publish.file,
status : publish.status.status,
message: publish.status.message,
status: publish.status.status,
};
};

11
react/containers/PublishTool/view.jsx
View file

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

5
react/sagas/publish.js
View file

@ -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}%`));