From d9cc8f5ad44b8a75e35aea8f9c8c2d0ed49d136c Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 1 Mar 2018 17:16:04 -0800 Subject: [PATCH] reformatted status component --- react/components/PublishStatus/index.jsx | 52 ------------------- .../{PublishForm => PublishDetails}/index.js | 0 .../{PublishForm => PublishDetails}/view.jsx | 4 +- react/containers/PublishStatus/index.js | 16 ++++++ react/containers/PublishStatus/view.jsx | 50 ++++++++++++++++++ react/containers/PublishTool/index.js | 5 +- react/containers/PublishTool/view.jsx | 11 ++-- react/sagas/publish.js | 5 +- 8 files changed, 76 insertions(+), 67 deletions(-) delete mode 100644 react/components/PublishStatus/index.jsx rename react/containers/{PublishForm => PublishDetails}/index.js (100%) rename react/containers/{PublishForm => PublishDetails}/view.jsx (96%) create mode 100644 react/containers/PublishStatus/index.js create mode 100644 react/containers/PublishStatus/view.jsx diff --git a/react/components/PublishStatus/index.jsx b/react/components/PublishStatus/index.jsx deleted file mode 100644 index 669be0cb..00000000 --- a/react/components/PublishStatus/index.jsx +++ /dev/null @@ -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 ( -
- {(status === publishStates.LOAD_START) && -
-

File is loading to server

-

{message}

-
- } - {(status === publishStates.LOADING) && -
-
-

File is loading to server

-

{message}

-
-
- } - {(status === publishStates.PUBLISHING) && -
-

Upload complete. Your file is now being published on the blockchain...

- -

Curious what magic is happening here? Learn more.

-
- } - {(status === publishStates.SUCCESS) && -
-

Your publish is complete! You are being redirected to it now.

-

If you are not automatically redirected, click here.

-
- } - {(status === publishStates.FAILED) && -
-

Something went wrong...

-

{message}

-

For help, post the above error text in the #speech channel on the lbry discord

-
- } -
- ); -}; - -PublishStatus.propTypes = { - status : PropTypes.string.isRequired, - message: PropTypes.string, -}; - -export default PublishStatus; diff --git a/react/containers/PublishForm/index.js b/react/containers/PublishDetails/index.js similarity index 100% rename from react/containers/PublishForm/index.js rename to react/containers/PublishDetails/index.js diff --git a/react/containers/PublishForm/view.jsx b/react/containers/PublishDetails/view.jsx similarity index 96% rename from react/containers/PublishForm/view.jsx rename to react/containers/PublishDetails/view.jsx index 362a343e..8064e19b 100644 --- a/react/containers/PublishForm/view.jsx +++ b/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); diff --git a/react/containers/PublishStatus/index.js b/react/containers/PublishStatus/index.js new file mode 100644 index 00000000..47f89a43 --- /dev/null +++ b/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); diff --git a/react/containers/PublishStatus/view.jsx b/react/containers/PublishStatus/view.jsx new file mode 100644 index 00000000..db88af66 --- /dev/null +++ b/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 ( +
+ {status === publishStates.LOAD_START && +
+

File is loading to server

+

0%

+
+ } + {status === publishStates.LOADING && +
+
+

File is loading to server

+

{message}

+
+
+ } + {status === publishStates.PUBLISHING && +
+

Upload complete. Your file is now being published on the blockchain...

+ +

Curious what magic is happening here? Learn more.

+
+ } + {status === publishStates.SUCCESS && +
+

Your publish is complete! You are being redirected to it now.

+

If you are not automatically redirected, click here.

+
+ } + {status === publishStates.FAILED && +
+

Something went wrong...

+

{message}

+

For help, post the above error text in the #speech channel on the lbry discord

+ +
+ } +
+ ); + } +}; + +export default PublishStatus; diff --git a/react/containers/PublishTool/index.js b/react/containers/PublishTool/index.js index e6c14c22..c997c832 100644 --- a/react/containers/PublishTool/index.js +++ b/react/containers/PublishTool/index.js @@ -3,9 +3,8 @@ import View from './view'; const mapStateToProps = ({ publish }) => { return { - file : publish.file, - status : publish.status.status, - message: publish.status.message, + file : publish.file, + status: publish.status.status, }; }; diff --git a/react/containers/PublishTool/view.jsx b/react/containers/PublishTool/view.jsx index 30132bee..2207e3b9 100644 --- a/react/containers/PublishTool/view.jsx +++ b/react/containers/PublishTool/view.jsx @@ -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 ( - + ); } else { - return ; + return ; } } else { return ; diff --git a/react/sagas/publish.js b/react/sagas/publish.js index 31998a7e..e18da233 100644 --- a/react/sagas/publish.js +++ b/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}%`));