diff --git a/src/common/data/transaction-status.js b/src/common/data/transaction-status.js index 20cce74..69f218d 100644 --- a/src/common/data/transaction-status.js +++ b/src/common/data/transaction-status.js @@ -1,8 +1,25 @@ -const transactionStatus = { - dappName: 'slow.Trade', - dappUrl: '/images/dapps/slowtrade.png', - progress: false, - published: true, +import { + getTransactionData, + setTransactionData, +} from '../../modules/TransactionStatus/TransactionStatus.utilities' + +let transactionStatus +const transactionData = getTransactionData() + +if (transactionData !== '') { + transactionStatus = JSON.parse(transactionData) + if (transactionStatus.dappTransactionHash === '') { + transactionStatus.dappName = '' + transactionStatus.dappImg = '' + } +} else { + transactionStatus = { + dappTransactionHash: '', + dappName: '', + dappImg: '', + progress: false, + published: false, + } } export default transactionStatus diff --git a/src/modules/Submit/Submit.container.js b/src/modules/Submit/Submit.container.js index 3e93839..5e8b917 100644 --- a/src/modules/Submit/Submit.container.js +++ b/src/modules/Submit/Submit.container.js @@ -13,7 +13,9 @@ import { onImgMoveAction, onImgDoneAction, onImgCancelAction, + submitAction, } from './Submit.reducer' +import { onStartProgressAction } from '../TransactionStatus/TransactionStatus.recuder' const mapStateToProps = state => state.submit const mapDispatchToProps = dispatch => ({ @@ -27,6 +29,10 @@ const mapDispatchToProps = dispatch => ({ onImgMove: (x, y) => dispatch(onImgMoveAction(x, y)), onImgCancel: () => dispatch(onImgCancelAction()), onImgDone: imgBase64 => dispatch(onImgDoneAction(imgBase64)), + onSubmit: dapp => { + dispatch(onStartProgressAction(dapp)) + dispatch(submitAction(dapp)) + }, }) export default withRouter( diff --git a/src/modules/Submit/Submit.jsx b/src/modules/Submit/Submit.jsx index 18e37cc..79eaa55 100644 --- a/src/modules/Submit/Submit.jsx +++ b/src/modules/Submit/Submit.jsx @@ -23,6 +23,7 @@ class Submit extends React.Component { this.onTouchMove = this.onTouchMove.bind(this) this.onEndMove = this.onEndMove.bind(this) this.onImgDone = this.onImgDone.bind(this) + this.onSubmit = this.onSubmit.bind(this) } componentDidUpdate() { @@ -139,6 +140,19 @@ class Submit extends React.Component { onImgDone(imgBase64) } + onSubmit() { + const { onSubmit, name, desc, url, img, category } = this.props + const dapp = { + name, + url, + img, + category, + desc, + } + + onSubmit(dapp) + } + render() { const { visible, @@ -153,6 +167,9 @@ class Submit extends React.Component { onImgCancel, } = this.props + const canSubmit = + name !== '' && desc !== '' && url !== '' && img !== '' && category !== '' + return ( Continue @@ -322,6 +340,7 @@ Submit.propTypes = { onImgMove: PropTypes.func.isRequired, onImgCancel: PropTypes.func.isRequired, onImgDone: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, } export default Submit diff --git a/src/modules/Submit/Submit.module.scss b/src/modules/Submit/Submit.module.scss index cbfaa28..84f51c2 100644 --- a/src/modules/Submit/Submit.module.scss +++ b/src/modules/Submit/Submit.module.scss @@ -172,6 +172,7 @@ font-family: $font; padding: calculateRem(11) calculateRem(38); font-size: calculateRem(15); + cursor: pointer; } .submitButton:disabled, diff --git a/src/modules/Submit/Submit.reducer.js b/src/modules/Submit/Submit.reducer.js index eeead6c..aea01c8 100644 --- a/src/modules/Submit/Submit.reducer.js +++ b/src/modules/Submit/Submit.reducer.js @@ -1,5 +1,21 @@ import submitInitialState from '../../common/data/submit' import reducerUtil from '../../common/utils/reducer' +import { + onPublishedSuccessAction, + onReceiveTransactionHashAction, +} from '../TransactionStatus/TransactionStatus.recuder' + +//TODO: create here. You can completely delete the following two functions. They must be imported. +const createDapp = async (name, url, desc, category, img) => { + return '0x3513rewrsdfsdf' +} +const checkTransactionStatus = async hash => { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve() + }, 5000) + }) +} const SHOW_SUBMIT = 'SHOW_SUBMIT' const CLOSE_SUBMIT = 'CLOSE_SUBMIT' @@ -80,6 +96,30 @@ export const onImgDoneAction = imgBase64 => ({ payload: imgBase64, }) +export const submitAction = dapp => { + return async dispatch => { + dispatch(closeSubmitAction()) + const hash = await createDapp( + dapp.name, + dapp.url, + dapp.desc, + dapp.category, + dapp.img, + ) + dispatch(onReceiveTransactionHashAction(hash)) + + await checkTransactionStatus(hash) + dispatch(onPublishedSuccessAction()) + } +} + +export const statusCheckAction = hash => { + return async dispatch => { + await checkTransactionStatus(hash) + dispatch(onPublishedSuccessAction()) + } +} + const showSubmit = state => { return Object.assign({}, state, { visible: true, diff --git a/src/modules/TransactionStatus/TransactionStatus.container.js b/src/modules/TransactionStatus/TransactionStatus.container.js index b822b47..030bcc5 100644 --- a/src/modules/TransactionStatus/TransactionStatus.container.js +++ b/src/modules/TransactionStatus/TransactionStatus.container.js @@ -1,10 +1,12 @@ import { connect } from 'react-redux' import TransactionStatus from './TransactionStatus' import { hideAction } from './TransactionStatus.recuder' +import { statusCheckAction } from '../Submit/Submit.reducer' const mapStateToProps = state => state.transactionStatus const mapDispatchToProps = dispatch => ({ hide: () => dispatch(hideAction()), + statusCheck: hash => dispatch(statusCheckAction(hash)), }) export default connect( diff --git a/src/modules/TransactionStatus/TransactionStatus.jsx b/src/modules/TransactionStatus/TransactionStatus.jsx index 24d0b25..afdf4bb 100644 --- a/src/modules/TransactionStatus/TransactionStatus.jsx +++ b/src/modules/TransactionStatus/TransactionStatus.jsx @@ -8,6 +8,7 @@ import loadingSpinner from '../../common/assets/images/loading-spinner.svg' class TransactionStatus extends React.Component { componentDidMount() { this.checkPublished() + this.checkTransactionHash() } componentDidUpdate() { @@ -23,14 +24,20 @@ class TransactionStatus extends React.Component { } } + checkTransactionHash() { + const { dappTransactionHash, statusCheck } = this.props + if (dappTransactionHash === '') return + statusCheck(dappTransactionHash) + } + render() { - const { dappName, dappUrl, published, progress } = this.props + const { dappName, dappImg, published, progress } = this.props return (
@@ -53,16 +60,14 @@ class TransactionStatus extends React.Component { } } -TransactionStatus.defaultProps = { - dapp: null, -} - TransactionStatus.propTypes = { + dappTransactionHash: PropTypes.string.isRequired, dappName: PropTypes.string.isRequired, - dappUrl: PropTypes.string.isRequired, + dappImg: PropTypes.string.isRequired, progress: PropTypes.bool.isRequired, published: PropTypes.bool.isRequired, hide: PropTypes.func.isRequired, + statusCheck: PropTypes.func.isRequired, } export default TransactionStatus diff --git a/src/modules/TransactionStatus/TransactionStatus.recuder.js b/src/modules/TransactionStatus/TransactionStatus.recuder.js index db67f9f..d04f4e7 100644 --- a/src/modules/TransactionStatus/TransactionStatus.recuder.js +++ b/src/modules/TransactionStatus/TransactionStatus.recuder.js @@ -1,21 +1,83 @@ import transactionStatusInitialState from '../../common/data/transaction-status' import reducerUtil from '../../common/utils/reducer' +import { + setTransactionData, + getTransactionData, +} from './TransactionStatus.utilities' const HIDE = 'HIDE' +const ON_START_PROGRESS = 'ON_START_PROGRESS' +const ON_RECEIVE_TRANSACTION_HASH = 'ON_RECEIVE_TRANSACTION_HASH' +const ON_PUBLISHED_SUCCESS = 'ON_PUBLISHED_SUCCESS' export const hideAction = () => ({ type: HIDE, payload: null, }) +export const onStartProgressAction = dapp => ({ + type: ON_START_PROGRESS, + payload: dapp, +}) + +export const onReceiveTransactionHashAction = hash => ({ + type: ON_RECEIVE_TRANSACTION_HASH, + payload: hash, +}) + +export const onPublishedSuccessAction = () => ({ + type: ON_PUBLISHED_SUCCESS, + payload: null, +}) + const hide = state => { return Object.assign({}, state, { dappName: '', }) } +const onStartProgress = (state, dapp) => { + const dappState = { + dappTransactionHash: '', + dappName: dapp.name, + dappImg: dapp.img, + progress: true, + published: false, + } + setTransactionData(JSON.stringify(dappState)) + return Object.assign({}, state, dappState) +} + +const onReceiveTransactionHash = (state, hash) => { + const transactionData = getTransactionData() + if (transactionData !== '') { + const dappState = JSON.parse(transactionData) + dappState.dappTransactionHash = hash + setTransactionData(JSON.stringify(dappState)) + } + return Object.assign({}, state, { + dappTransactionHash: hash, + }) +} + +const onPublishedSuccess = state => { + const transactionData = getTransactionData() + if (transactionData !== '') { + const dappState = JSON.parse(transactionData) + dappState.dappTransactionHash = '' + setTransactionData(JSON.stringify(dappState)) + } + return Object.assign({}, state, { + progress: false, + published: true, + }) +} + const map = { [HIDE]: hide, + [ON_START_PROGRESS]: onStartProgress, + [ON_RECEIVE_TRANSACTION_HASH]: onReceiveTransactionHash, + [ON_PUBLISHED_SUCCESS]: onPublishedSuccess, } export default reducerUtil(map, transactionStatusInitialState) diff --git a/src/modules/TransactionStatus/TransactionStatus.utilities.js b/src/modules/TransactionStatus/TransactionStatus.utilities.js new file mode 100644 index 0000000..e023f17 --- /dev/null +++ b/src/modules/TransactionStatus/TransactionStatus.utilities.js @@ -0,0 +1,10 @@ +export const COOKIE_NAME = 'TRANSACTION_STATUS_COOKIE' + +export const setTransactionData = value => { + localStorage.setItem(COOKIE_NAME, value) +} + +export const getTransactionData = () => { + const value = localStorage.getItem(COOKIE_NAME) + return value === null ? '' : value +}