From 21a8c155fdcf89d9d6afa480f218eb60f7b74ab3 Mon Sep 17 00:00:00 2001 From: Kamen Stoykov Date: Fri, 10 May 2019 12:31:54 +0300 Subject: [PATCH 1/3] status check status --- src/common/data/transaction-status.js | 14 ++-- src/modules/Submit/Submit.reducer.js | 37 ++++++----- .../TransactionStatus/TransactionStatus.jsx | 41 ++++++++---- .../TransactionStatus.module.scss | 24 +++++++ .../TransactionStatus.recuder.js | 64 ++++++++++++++----- 5 files changed, 128 insertions(+), 52 deletions(-) diff --git a/src/common/data/transaction-status.js b/src/common/data/transaction-status.js index 69f218d..54838de 100644 --- a/src/common/data/transaction-status.js +++ b/src/common/data/transaction-status.js @@ -1,17 +1,14 @@ -import { - getTransactionData, - setTransactionData, -} from '../../modules/TransactionStatus/TransactionStatus.utilities' +import { getTransactionData } from '../../modules/TransactionStatus/TransactionStatus.utilities' let transactionStatus const transactionData = getTransactionData() if (transactionData !== '') { transactionStatus = JSON.parse(transactionData) - if (transactionStatus.dappTransactionHash === '') { - transactionStatus.dappName = '' - transactionStatus.dappImg = '' - } + // if (transactionStatus.dappTransactionHash === '') { + // transactionStatus.dappName = '' + // transactionStatus.dappImg = '' + // } } else { transactionStatus = { dappTransactionHash: '', @@ -19,6 +16,7 @@ if (transactionData !== '') { dappImg: '', progress: false, published: false, + failed: false, } } diff --git a/src/modules/Submit/Submit.reducer.js b/src/modules/Submit/Submit.reducer.js index aea01c8..b2476c3 100644 --- a/src/modules/Submit/Submit.reducer.js +++ b/src/modules/Submit/Submit.reducer.js @@ -1,18 +1,21 @@ import submitInitialState from '../../common/data/submit' import reducerUtil from '../../common/utils/reducer' import { - onPublishedSuccessAction, + onStatusCheckAction, 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' + return { + tx: '0x3513rewrsdfsdf', + id: 1, + } } const checkTransactionStatus = async hash => { return new Promise((resolve, reject) => { setTimeout(() => { - resolve() + resolve(1) }, 5000) }) } @@ -96,27 +99,31 @@ export const onImgDoneAction = imgBase64 => ({ payload: imgBase64, }) +export const statusCheckAction = tx => { + return async dispatch => { + const result = await checkTransactionStatus(tx) + dispatch(onStatusCheckAction(result)) + // progress + if (parseInt(result, 10) === 2) { + setTimeout(() => { + dispatch(statusCheckAction(tx)) + }, 150000) + } + } +} + export const submitAction = dapp => { return async dispatch => { dispatch(closeSubmitAction()) - const hash = await createDapp( + const { tx, id } = 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()) + dispatch(onReceiveTransactionHashAction(tx)) + dispatch(statusCheckAction(tx)) } } diff --git a/src/modules/TransactionStatus/TransactionStatus.jsx b/src/modules/TransactionStatus/TransactionStatus.jsx index afdf4bb..b1a720c 100644 --- a/src/modules/TransactionStatus/TransactionStatus.jsx +++ b/src/modules/TransactionStatus/TransactionStatus.jsx @@ -7,22 +7,22 @@ import loadingSpinner from '../../common/assets/images/loading-spinner.svg' class TransactionStatus extends React.Component { componentDidMount() { - this.checkPublished() + // this.checkPublished() this.checkTransactionHash() } - componentDidUpdate() { - this.checkPublished() - } + // componentDidUpdate() { + // this.checkPublished() + // } - checkPublished() { - const { published, hide } = this.props - if (published) { - setTimeout(() => { - hide() - }, 1000) - } - } + // checkPublished() { + // const { published, hide } = this.props + // if (published) { + // setTimeout(() => { + // hide() + // }, 1000) + // } + // } checkTransactionHash() { const { dappTransactionHash, statusCheck } = this.props @@ -31,7 +31,7 @@ class TransactionStatus extends React.Component { } render() { - const { dappName, dappImg, published, progress } = this.props + const { dappName, dappImg, published, progress, failed, hide } = this.props return (
@@ -42,7 +42,14 @@ class TransactionStatus extends React.Component { alt="App icon" />
-
{dappName}
+
+
{dappName}
+ {!progress && ( +
+ + +
+ )} +
Status is an open source mobile DApp browser and messenger build for #Etherium @@ -54,6 +61,11 @@ class TransactionStatus extends React.Component { Waiting for confirmation of the network...
)} + {failed && ( +
+ Transaction failed. Please submit your dapp again. +
+ )}
) @@ -66,6 +78,7 @@ TransactionStatus.propTypes = { dappImg: PropTypes.string.isRequired, progress: PropTypes.bool.isRequired, published: PropTypes.bool.isRequired, + failed: PropTypes.bool.isRequired, hide: PropTypes.func.isRequired, statusCheck: PropTypes.func.isRequired, } diff --git a/src/modules/TransactionStatus/TransactionStatus.module.scss b/src/modules/TransactionStatus/TransactionStatus.module.scss index 8eb0956..914f197 100644 --- a/src/modules/TransactionStatus/TransactionStatus.module.scss +++ b/src/modules/TransactionStatus/TransactionStatus.module.scss @@ -35,10 +35,30 @@ flex-direction: column; .name { + display: flex; + align-items: center; + position: relative; line-height: 22px; font-size: 15px; font-weight: 700; margin-bottom: 2px; + + .nameItself { + width: 0px; + flex: 1 1 auto; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + margin-right: 8px; + } + + .close { + flex: 0 0 auto; + font-weight: 300; + margin-left: auto; + transform: rotate(45deg); + cursor: pointer; + } } .info { @@ -60,6 +80,10 @@ // animation:loading_rotate 1s linear infinite; } } + + .status.red { + color: $red; + } } } diff --git a/src/modules/TransactionStatus/TransactionStatus.recuder.js b/src/modules/TransactionStatus/TransactionStatus.recuder.js index d04f4e7..e3e1c53 100644 --- a/src/modules/TransactionStatus/TransactionStatus.recuder.js +++ b/src/modules/TransactionStatus/TransactionStatus.recuder.js @@ -8,7 +8,7 @@ import { 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' +const ON_STATUS_CHECK = 'ON_STATUS_CHECK' export const hideAction = () => ({ type: HIDE, @@ -25,15 +25,23 @@ export const onReceiveTransactionHashAction = hash => ({ payload: hash, }) -export const onPublishedSuccessAction = () => ({ - type: ON_PUBLISHED_SUCCESS, - payload: null, +// status 0/1/2 failed/success/pending +export const onStatusCheckAction = status => ({ + type: ON_STATUS_CHECK, + payload: parseInt(status, 10), }) const hide = state => { - return Object.assign({}, state, { - dappName: '', - }) + const transactionData = getTransactionData() + let dappState + if (transactionData !== '') { + dappState = JSON.parse(transactionData) + dappState.dappName = '' + setTransactionData(JSON.stringify(dappState)) + } else { + dappState.dappName = '' + } + return Object.assign({}, state, dappState) } const onStartProgress = (state, dapp) => { @@ -43,6 +51,7 @@ const onStartProgress = (state, dapp) => { dappImg: dapp.img, progress: true, published: false, + failed: false, } setTransactionData(JSON.stringify(dappState)) return Object.assign({}, state, dappState) @@ -60,24 +69,49 @@ const onReceiveTransactionHash = (state, hash) => { }) } -const onPublishedSuccess = state => { +const onStatusCheck = (state, status) => { const transactionData = getTransactionData() + let dappState if (transactionData !== '') { - const dappState = JSON.parse(transactionData) - dappState.dappTransactionHash = '' + dappState = JSON.parse(transactionData) + switch (status) { + case 0: + dappState.progress = false + dappState.published = false + dappState.failed = true + dappState.dappTransactionHash = '' + break + default: + case 1: + dappState.progress = false + dappState.published = true + dappState.failed = false + dappState.dappTransactionHash = '' + break + case 2: + dappState.progress = true + dappState.published = false + dappState.failed = false + break + } setTransactionData(JSON.stringify(dappState)) + } else { + dappState = { + dappTransactionHash: '', + dappName: '', + published: false, + failed: false, + progress: false, + } } - return Object.assign({}, state, { - progress: false, - published: true, - }) + return Object.assign({}, state, dappState) } const map = { [HIDE]: hide, [ON_START_PROGRESS]: onStartProgress, [ON_RECEIVE_TRANSACTION_HASH]: onReceiveTransactionHash, - [ON_PUBLISHED_SUCCESS]: onPublishedSuccess, + [ON_STATUS_CHECK]: onStatusCheck, } export default reducerUtil(map, transactionStatusInitialState) From 45c685cc03fcda53ffb34052ef48d79a2e0bb215 Mon Sep 17 00:00:00 2001 From: Kamen Stoykov Date: Fri, 10 May 2019 16:09:58 +0300 Subject: [PATCH 2/3] create dapps & get dapps --- src/common/data/submit.js | 1 + src/common/data/transaction-status.js | 24 +-- src/modules/App/Router.container.js | 8 +- src/modules/App/Router.jsx | 8 +- src/modules/Dapps/Dapps.reducer.js | 194 ++++++++++++++---- src/modules/Submit/Submit.reducer.js | 50 ++--- .../TransactionStatus.container.js | 8 +- .../TransactionStatus/TransactionStatus.jsx | 10 +- .../TransactionStatus.recuder.js | 152 +++++++------- .../TransactionStatus.utilities.js | 73 ++++++- 10 files changed, 335 insertions(+), 193 deletions(-) diff --git a/src/common/data/submit.js b/src/common/data/submit.js index ee5842c..6cf7e49 100644 --- a/src/common/data/submit.js +++ b/src/common/data/submit.js @@ -1,5 +1,6 @@ const submit = { visible: false, + id: '', name: '', desc: '', url: '', diff --git a/src/common/data/transaction-status.js b/src/common/data/transaction-status.js index 54838de..554852b 100644 --- a/src/common/data/transaction-status.js +++ b/src/common/data/transaction-status.js @@ -1,23 +1,3 @@ -import { getTransactionData } from '../../modules/TransactionStatus/TransactionStatus.utilities' +import { transactionStatusFetchedInstance } 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, - failed: false, - } -} - -export default transactionStatus +export default Object.assign({}, transactionStatusFetchedInstance()) diff --git a/src/modules/App/Router.container.js b/src/modules/App/Router.container.js index 1c7c1d4..1ded0ac 100644 --- a/src/modules/App/Router.container.js +++ b/src/modules/App/Router.container.js @@ -1,14 +1,10 @@ import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import Router from './Router' -import { - fetchHighestRankedAction, - fetchRecentlyAddedAction, -} from '../Dapps/Dapps.reducer' +import { fetchAllDappsAction } from '../Dapps/Dapps.reducer' const mapDispatchToProps = dispatch => ({ - fetchHighestRanked: () => dispatch(fetchHighestRankedAction()), - fetchRecentlyAdded: () => dispatch(fetchRecentlyAddedAction()), + fetchAllDapps: () => dispatch(fetchAllDappsAction()), }) export default withRouter( diff --git a/src/modules/App/Router.jsx b/src/modules/App/Router.jsx index 7db9c6f..369c6d9 100644 --- a/src/modules/App/Router.jsx +++ b/src/modules/App/Router.jsx @@ -12,9 +12,8 @@ import TransactionStatus from '../TransactionStatus' class Router extends React.Component { componentDidMount() { - const { fetchHighestRanked, fetchRecentlyAdded } = this.props - fetchHighestRanked() - fetchRecentlyAdded() + const { fetchAllDapps } = this.props + fetchAllDapps() } render() { @@ -34,8 +33,7 @@ class Router extends React.Component { } Router.propTypes = { - fetchHighestRanked: PropTypes.func.isRequired, - fetchRecentlyAdded: PropTypes.func.isRequired, + fetchAllDapps: PropTypes.func.isRequired, } export default Router diff --git a/src/modules/Dapps/Dapps.reducer.js b/src/modules/Dapps/Dapps.reducer.js index 738ee5a..74c5676 100644 --- a/src/modules/Dapps/Dapps.reducer.js +++ b/src/modules/Dapps/Dapps.reducer.js @@ -2,6 +2,8 @@ import hardcodedDapps from '../../common/data/dapps' import * as Categories from '../../common/data/categories' import reducerUtil from '../../common/utils/reducer' +const ON_FINISH_FETCH_ALL_DAPPS_ACTION = 'ON_FINISH_FETCH_ALL_DAPPS_ACTION' + const ON_START_FETCH_HIGHEST_RANKED = 'ON_START_FETCH_HIGHEST_RANKED' const ON_FINISH_FETCH_HIGHEST_RANKED = 'ON_FINISH_FETCH_HIGHEST_RANKED' const ON_START_FETCH_RECENTLY_ADDED = 'ON_START_FETCH_RECENTLY_ADDED' @@ -10,6 +12,20 @@ const ON_FINISH_FETCH_RECENTLY_ADDED = 'ON_FINISH_FETCH_RECENTLY_ADDED' const ON_START_FETCH_BY_CATEGORY = 'ON_START_FETCH_BY_CATEGORY' const ON_FINISH_FETCH_BY_CATEGORY = 'ON_FINISH_FETCH_BY_CATEGORY' +const ON_ADD_NEW_DAPP = 'ON_ADD_NEW_DAPP' + +const RECENTLY_ADDED_SIZE = 50 +const HIGHEST_RANKED_SIZE = 50 + +//TODO: get here. You can completely delete the following function. It must be imported. +const getDApps = () => { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(hardcodedDapps) + }, 100) + }) +} + class DappsState { constructor() { this.items = [] @@ -25,7 +41,7 @@ class DappsState { this.fetched = fetched } - appendItemsAndSort(items) { + appendItems(items) { const availableNames = new Set() let addedItems = 0 for (let i = 0; i < this.items.length; i += 1) @@ -37,13 +53,18 @@ class DappsState { } } - this.items.sort((a, b) => { - return new Date(b.dateAdded).getTime() - new Date(a.dateAdded).getTime() - }) + // this.items.sort((a, b) => { + // return new Date(b.dateAdded).getTime() - new Date(a.dateAdded).getTime() + // }) this.hasMore = addedItems !== 0 } } +export const onFinishFetchAllDappsAction = dapps => ({ + type: ON_FINISH_FETCH_ALL_DAPPS_ACTION, + payload: dapps, +}) + export const onStartFetchHighestRankedAction = () => ({ type: ON_START_FETCH_HIGHEST_RANKED, payload: null, @@ -74,49 +95,98 @@ export const onFinishFetchByCategoryAction = (category, dapps) => ({ payload: { category, dapps }, }) -export const fetchHighestRankedAction = () => { - return dispatch => { +const fetchAllDappsInState = async (dispatch, getState) => { + const stateDapps = getState().dapps + if (stateDapps.dapps === null) { + const dapps = await getDApps() + dapps.sort((a, b) => { + return b.sntValue - a.sntValue + }) + dispatch(onFinishFetchAllDappsAction(dapps)) + return dapps + } + return stateDapps.dapps +} + +export const fetchAllDappsAction = () => { + return async (dispatch, getState) => { dispatch(onStartFetchHighestRankedAction()) - setTimeout(() => { - const result = hardcodedDapps - .sort((a, b) => { - return b.sntValue - a.sntValue - }) - .slice(0, 50) - dispatch(onFinishFetchHighestRankedAction(result)) - }, 100) + dispatch(onStartFetchRecentlyAddedAction()) + + const dapps = await fetchAllDappsInState(dispatch, getState) + + const highestRanked = dapps.slice(0, HIGHEST_RANKED_SIZE) + let recentlyAdded = [...dapps] + recentlyAdded.sort((a, b) => { + return new Date().getTime(b.dateAdded) - new Date(a.dateAdded).getTime() + }) + recentlyAdded = recentlyAdded.slice(0, RECENTLY_ADDED_SIZE) + + dispatch(onFinishFetchHighestRankedAction(highestRanked)) + dispatch(onFinishFetchRecentlyAddedAction(recentlyAdded)) } } -export const fetchRecentlyAddedAction = () => { - return dispatch => { - dispatch(onStartFetchRecentlyAddedAction()) - setTimeout(() => { - const result = hardcodedDapps - .sort((a, b) => { - return ( - new Date().getTime(b.dateAdded) - new Date(a.dateAdded).getTime() - ) - }) - .slice(0, 20) - dispatch(onFinishFetchRecentlyAddedAction(result)) - }, 100) - } -} +// export const fetchHighestRankedAction = () => { +// return dispatch => { +// dispatch(onStartFetchHighestRankedAction()) +// setTimeout(() => { +// const result = hardcodedDapps +// .sort((a, b) => { +// return b.sntValue - a.sntValue +// }) +// .slice(0, 50) +// dispatch(onFinishFetchHighestRankedAction(result)) +// }, 100) +// } +// } + +// export const fetchRecentlyAddedAction = () => { +// return dispatch => { +// dispatch(onStartFetchRecentlyAddedAction()) +// setTimeout(() => { +// const result = hardcodedDapps +// .sort((a, b) => { +// return ( +// new Date().getTime(b.dateAdded) - new Date(a.dateAdded).getTime() +// ) +// }) +// .slice(0, 20) +// dispatch(onFinishFetchRecentlyAddedAction(result)) +// }, 100) +// } +// } export const fetchByCategoryAction = category => { - return dispatch => { + return async (dispatch, getState) => { dispatch(onStartFetchByCategoryAction(category)) - setTimeout(() => { - const filtered = hardcodedDapps - .filter(dapp => dapp.category === category) - .sort(() => Math.random() - 0.5) - .slice(0, 5) - dispatch(onFinishFetchByCategoryAction(category, filtered)) - }, 1000) + // setTimeout(() => { + // const filtered = hardcodedDapps + // .filter(dapp => dapp.category === category) + // .sort(() => Math.random() - 0.5) + // .slice(0, 5) + + const dapps = await fetchAllDappsInState(dispatch, getState) + const filteredByCategory = dapps.filter(dapp => dapp.category === category) + const dappsCategoryState = getState().dapps.dappsCategoryMap.get(category) + const from = dappsCategoryState.items.length + const to = Math.min(from + 5, filteredByCategory.length) + const dappsCategorySlice = filteredByCategory.slice(from, to) + + dispatch(onFinishFetchByCategoryAction(category, dappsCategorySlice)) + // }, 1000) } } +export const onAddNewDappAction = dapp => ({ + type: ON_ADD_NEW_DAPP, + payload: dapp, +}) + +const onFinishFetchAllDapps = (state, dapps) => { + return Object.assign({}, state, { dapps }) +} + const onStartFetchHightestRanked = state => { return Object.assign({}, state, { highestRankedFetched: false, @@ -162,7 +232,7 @@ const onFinishFetchByCategory = (state, payload) => { dappsCategoryMap.set(category_, dappState) if (category_ === category) { dappState.setFetched(false) - dappState.appendItemsAndSort(dapps) + dappState.appendItems(dapps) } }) return Object.assign({}, state, { @@ -170,13 +240,60 @@ const onFinishFetchByCategory = (state, payload) => { }) } +const insertDappIntoSortedArray = (source, dapp, cmp) => { + for (let i = 0; i < source.length; i += 1) { + if (cmp(source[i], dapp) === true) { + source.splice(i, 0, dapp) + break + } + } +} + +const onAddNewDapp = (state, dapp) => { + const dappsCategoryMap = new Map() + const { dapps } = state + let { highestRanked, recentlyAdded } = state + + insertDappIntoSortedArray(dapps, dapp, (target, dappItem) => { + return target.sntValue < dappItem.sntValue + }) + insertDappIntoSortedArray(highestRanked, dapp, (target, dappItem) => { + return target.sntValue < dappItem.sntValue + }) + highestRanked = state.highestRanked.splice(0, HIGHEST_RANKED_SIZE) + insertDappIntoSortedArray(recentlyAdded, dapp, (target, dappItem) => { + return ( + new Date().getTime(target.dateAdded) < + new Date(dappItem.dateAdded).getTime() + ) + }) + recentlyAdded = recentlyAdded.splice(0, RECENTLY_ADDED_SIZE) + + state.dappsCategoryMap.forEach((dappState, category_) => { + dappsCategoryMap.set(category_, dappState) + }) + const dappState = dappsCategoryMap.get(dapp.category) + insertDappIntoSortedArray(dappState.items, dapp, (target, dappItem) => { + return target.sntValue < dappItem.sntValue + }) + + return Object.assign({}, state, { + dapps, + highestRanked, + recentlyAdded, + dappsCategoryMap, + }) +} + const map = { + [ON_FINISH_FETCH_ALL_DAPPS_ACTION]: onFinishFetchAllDapps, [ON_START_FETCH_HIGHEST_RANKED]: onStartFetchHightestRanked, [ON_FINISH_FETCH_HIGHEST_RANKED]: onFinishFetchHighestRanked, [ON_START_FETCH_RECENTLY_ADDED]: onStartFetchRecentlyAdded, [ON_FINISH_FETCH_RECENTLY_ADDED]: onFinishFetchRecentlyAdded, [ON_START_FETCH_BY_CATEGORY]: onStartFetchByCategory, [ON_FINISH_FETCH_BY_CATEGORY]: onFinishFetchByCategory, + [ON_ADD_NEW_DAPP]: onAddNewDapp, } const dappsCategoryMap = new Map() @@ -189,6 +306,7 @@ dappsCategoryMap.set(Categories.UTILITIES, new DappsState()) dappsCategoryMap.set(Categories.OTHER, new DappsState()) const dappsInitialState = { + dapps: null, highestRanked: [], highestRankedFetched: null, recentlyAdded: [], diff --git a/src/modules/Submit/Submit.reducer.js b/src/modules/Submit/Submit.reducer.js index b2476c3..7131684 100644 --- a/src/modules/Submit/Submit.reducer.js +++ b/src/modules/Submit/Submit.reducer.js @@ -2,23 +2,17 @@ import submitInitialState from '../../common/data/submit' import reducerUtil from '../../common/utils/reducer' import { onStatusCheckAction, - onReceiveTransactionHashAction, + onReceiveTransactionInfoAction, + checkTransactionStatusAction, } 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) => { +// TODO: create here. You can completely delete the following function. It must be imported. +const createDapp = async (snt, dapp) => { return { tx: '0x3513rewrsdfsdf', id: 1, } } -const checkTransactionStatus = async hash => { - return new Promise((resolve, reject) => { - setTimeout(() => { - resolve(1) - }, 5000) - }) -} const SHOW_SUBMIT = 'SHOW_SUBMIT' const CLOSE_SUBMIT = 'CLOSE_SUBMIT' @@ -99,38 +93,30 @@ export const onImgDoneAction = imgBase64 => ({ payload: imgBase64, }) -export const statusCheckAction = tx => { - return async dispatch => { - const result = await checkTransactionStatus(tx) - dispatch(onStatusCheckAction(result)) - // progress - if (parseInt(result, 10) === 2) { - setTimeout(() => { - dispatch(statusCheckAction(tx)) - }, 150000) - } - } -} - export const submitAction = dapp => { return async dispatch => { dispatch(closeSubmitAction()) - const { tx, id } = await createDapp( - dapp.name, - dapp.url, - dapp.desc, - dapp.category, - dapp.img, - ) - dispatch(onReceiveTransactionHashAction(tx)) - dispatch(statusCheckAction(tx)) + const { tx, id } = await createDapp(1, { + name: dapp.name, + url: dapp.url, + desc: dapp.desc, + category: dapp.category, + image: dapp.img, + }) + dispatch(onReceiveTransactionInfoAction(id, tx)) + dispatch(checkTransactionStatusAction(tx)) } } const showSubmit = state => { return Object.assign({}, state, { visible: true, + id: '', + name: '', + desc: '', + url: '', img: '', + category: '', imgControl: false, imgControlZoom: 0, imgControlMove: false, diff --git a/src/modules/TransactionStatus/TransactionStatus.container.js b/src/modules/TransactionStatus/TransactionStatus.container.js index 030bcc5..ded9507 100644 --- a/src/modules/TransactionStatus/TransactionStatus.container.js +++ b/src/modules/TransactionStatus/TransactionStatus.container.js @@ -1,12 +1,14 @@ import { connect } from 'react-redux' import TransactionStatus from './TransactionStatus' -import { hideAction } from './TransactionStatus.recuder' -import { statusCheckAction } from '../Submit/Submit.reducer' +import { + hideAction, + checkTransactionStatusAction, +} from './TransactionStatus.recuder' const mapStateToProps = state => state.transactionStatus const mapDispatchToProps = dispatch => ({ hide: () => dispatch(hideAction()), - statusCheck: hash => dispatch(statusCheckAction(hash)), + checkTransactionStatus: hash => dispatch(checkTransactionStatusAction(hash)), }) export default connect( diff --git a/src/modules/TransactionStatus/TransactionStatus.jsx b/src/modules/TransactionStatus/TransactionStatus.jsx index b1a720c..9f1e2fc 100644 --- a/src/modules/TransactionStatus/TransactionStatus.jsx +++ b/src/modules/TransactionStatus/TransactionStatus.jsx @@ -25,9 +25,9 @@ class TransactionStatus extends React.Component { // } checkTransactionHash() { - const { dappTransactionHash, statusCheck } = this.props - if (dappTransactionHash === '') return - statusCheck(dappTransactionHash) + const { dappTx, checkTransactionStatus } = this.props + if (dappTx === '') return + checkTransactionStatus(dappTx) } render() { @@ -73,14 +73,14 @@ class TransactionStatus extends React.Component { } TransactionStatus.propTypes = { - dappTransactionHash: PropTypes.string.isRequired, + dappTx: PropTypes.string.isRequired, dappName: PropTypes.string.isRequired, dappImg: PropTypes.string.isRequired, progress: PropTypes.bool.isRequired, published: PropTypes.bool.isRequired, failed: PropTypes.bool.isRequired, hide: PropTypes.func.isRequired, - statusCheck: PropTypes.func.isRequired, + checkTransactionStatus: PropTypes.func.isRequired, } export default TransactionStatus diff --git a/src/modules/TransactionStatus/TransactionStatus.recuder.js b/src/modules/TransactionStatus/TransactionStatus.recuder.js index e3e1c53..6349571 100644 --- a/src/modules/TransactionStatus/TransactionStatus.recuder.js +++ b/src/modules/TransactionStatus/TransactionStatus.recuder.js @@ -1,14 +1,38 @@ import transactionStatusInitialState from '../../common/data/transaction-status' import reducerUtil from '../../common/utils/reducer' import { - setTransactionData, - getTransactionData, + transactionStatusFetchedInstance, + transactionStatusInitInstance, } from './TransactionStatus.utilities' +import { onAddNewDappAction } from '../Dapps/Dapps.reducer' const HIDE = 'HIDE' const ON_START_PROGRESS = 'ON_START_PROGRESS' -const ON_RECEIVE_TRANSACTION_HASH = 'ON_RECEIVE_TRANSACTION_HASH' -const ON_STATUS_CHECK = 'ON_STATUS_CHECK' +const ON_RECEIVE_TRANSACTION_TX = 'ON_RECEIVE_TRANSACTION_TX' +const ON_CHANGE_TRANSACTION_STATUS_DATA = 'ON_CHANGE_TRANSACTION_STATUS_DATA' + +// TODO: create here. You can completely delete the following two wfunction. They must be imported. +const checkTransactionStatus = async tx => { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(1) + }, 5000) + }) +} +const getDAppDataById = async id => { + return new Promise((resolve, reject) => { + resolve({ + name: 'Newly added', + url: 'https://www.astroledger.org/#/onSale', + description: 'Funding space grants with blockchain star naming', + image: '/images/dapps/astroledger.svg', + category: 'EXCHANGES', + dateAdded: '2019-10-10', + sntValue: 10002345, + categoryPosition: 2, + }) + }) +} export const hideAction = () => ({ type: HIDE, @@ -20,98 +44,74 @@ export const onStartProgressAction = dapp => ({ payload: dapp, }) -export const onReceiveTransactionHashAction = hash => ({ - type: ON_RECEIVE_TRANSACTION_HASH, - payload: hash, +export const onReceiveTransactionInfoAction = (id, tx) => ({ + type: ON_RECEIVE_TRANSACTION_TX, + payload: { id, tx }, }) // status 0/1/2 failed/success/pending -export const onStatusCheckAction = status => ({ - type: ON_STATUS_CHECK, - payload: parseInt(status, 10), +export const onChangeTransactionStatusDataAction = transactionStatus => ({ + type: ON_CHANGE_TRANSACTION_STATUS_DATA, + payload: transactionStatus, }) -const hide = state => { - const transactionData = getTransactionData() - let dappState - if (transactionData !== '') { - dappState = JSON.parse(transactionData) - dappState.dappName = '' - setTransactionData(JSON.stringify(dappState)) - } else { - dappState.dappName = '' - } - return Object.assign({}, state, dappState) -} +export const checkTransactionStatusAction = tx => { + return async dispatch => { + const status = await checkTransactionStatus(tx) + const statusInt = parseInt(status, 10) + const transacationStatus = transactionStatusFetchedInstance() -const onStartProgress = (state, dapp) => { - const dappState = { - dappTransactionHash: '', - dappName: dapp.name, - dappImg: dapp.img, - progress: true, - published: false, - failed: 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 onStatusCheck = (state, status) => { - const transactionData = getTransactionData() - let dappState - if (transactionData !== '') { - dappState = JSON.parse(transactionData) - switch (status) { + switch (statusInt) { case 0: - dappState.progress = false - dappState.published = false - dappState.failed = true - dappState.dappTransactionHash = '' + transacationStatus.setFailed(true) break default: case 1: - dappState.progress = false - dappState.published = true - dappState.failed = false - dappState.dappTransactionHash = '' + transacationStatus.setPublished(true) + dispatch( + onAddNewDappAction(await getDAppDataById(transacationStatus.dappId)), + ) break case 2: - dappState.progress = true - dappState.published = false - dappState.failed = false + transacationStatus.setProgress(true) + setTimeout(() => { + dispatch(checkTransactionStatusAction(tx)) + }, 150000) break } - setTransactionData(JSON.stringify(dappState)) - } else { - dappState = { - dappTransactionHash: '', - dappName: '', - published: false, - failed: false, - progress: false, - } + + dispatch(onChangeTransactionStatusDataAction(transacationStatus)) } - return Object.assign({}, state, dappState) +} + +const hide = state => { + const transacationStatus = transactionStatusFetchedInstance() + transacationStatus.setDappName('') + return Object.assign({}, state, transacationStatus) +} + +const onStartProgress = (state, dapp) => { + const transacationStatus = transactionStatusInitInstance(dapp.name, dapp.img) + transacationStatus.persistTransactionData() + return Object.assign({}, state, transacationStatus) +} + +const onReceiveTransactionInfo = (state, payload) => { + const { id, tx } = payload + const transacationStatus = transactionStatusFetchedInstance() + transacationStatus.setTransactionInfo(id, tx) + return Object.assign({}, state, transacationStatus) +} + +const onChangeTransactionStatusData = (state, transacationStatus) => { + return Object.assign({}, state, transacationStatus) } const map = { [HIDE]: hide, [ON_START_PROGRESS]: onStartProgress, - [ON_RECEIVE_TRANSACTION_HASH]: onReceiveTransactionHash, - [ON_STATUS_CHECK]: onStatusCheck, + [ON_RECEIVE_TRANSACTION_TX]: onReceiveTransactionInfo, + [ON_CHANGE_TRANSACTION_STATUS_DATA]: onChangeTransactionStatusData, } export default reducerUtil(map, transactionStatusInitialState) diff --git a/src/modules/TransactionStatus/TransactionStatus.utilities.js b/src/modules/TransactionStatus/TransactionStatus.utilities.js index e023f17..0b38832 100644 --- a/src/modules/TransactionStatus/TransactionStatus.utilities.js +++ b/src/modules/TransactionStatus/TransactionStatus.utilities.js @@ -1,10 +1,71 @@ -export const COOKIE_NAME = 'TRANSACTION_STATUS_COOKIE' +const COOKIE_NAME = 'TRANSACTION_STATUS_COOKIE' -export const setTransactionData = value => { - localStorage.setItem(COOKIE_NAME, value) +class TransactionStatus { + constructor() { + this.dappId = '' + this.dappTx = '' + this.dappName = '' + this.dappImg = '' + this.progress = false + this.published = false + this.failed = false + } + + persistTransactionData() { + localStorage.setItem(COOKIE_NAME, JSON.stringify(this)) + } + + setDappName(name) { + this.dappName = name + this.persistTransactionData() + } + + setTransactionInfo(id, tx) { + this.dappId = id + this.dappTx = tx + this.persistTransactionData() + } + + setProgress(progress) { + this.progress = progress + this.published = false + this.failed = false + this.persistTransactionData() + } + + setPublished(published) { + this.dappTx = '' + this.progress = false + this.published = published + this.failed = false + this.persistTransactionData() + } + + setFailed(failed) { + this.dappTx = '' + this.progress = false + this.published = false + this.failed = failed + this.persistTransactionData() + } } -export const getTransactionData = () => { - const value = localStorage.getItem(COOKIE_NAME) - return value === null ? '' : value +const getTransactionData = () => { + return localStorage.getItem(COOKIE_NAME) +} + +export const transactionStatusInitInstance = (name, img) => { + const model = new TransactionStatus() + model.dappName = name + model.dappImg = img + model.progress = true + return model +} + +export const transactionStatusFetchedInstance = () => { + const data = getTransactionData() + let transactionStatus = new TransactionStatus() + if (data !== null) + transactionStatus = Object.assign(transactionStatus, JSON.parse(data)) + return transactionStatus } From 25772125cf2d5804fd894204797dad4fe3f82350 Mon Sep 17 00:00:00 2001 From: Kamen Stoykov Date: Fri, 10 May 2019 16:12:00 +0300 Subject: [PATCH 3/3] todo --- src/modules/Dapps/Dapps.reducer.js | 2 +- src/modules/Submit/Submit.reducer.js | 2 +- src/modules/TransactionStatus/TransactionStatus.recuder.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/modules/Dapps/Dapps.reducer.js b/src/modules/Dapps/Dapps.reducer.js index 74c5676..83d39c2 100644 --- a/src/modules/Dapps/Dapps.reducer.js +++ b/src/modules/Dapps/Dapps.reducer.js @@ -17,7 +17,7 @@ const ON_ADD_NEW_DAPP = 'ON_ADD_NEW_DAPP' const RECENTLY_ADDED_SIZE = 50 const HIGHEST_RANKED_SIZE = 50 -//TODO: get here. You can completely delete the following function. It must be imported. +// TODO: You can completely delete the following function. It must be imported. const getDApps = () => { return new Promise((resolve, reject) => { setTimeout(() => { diff --git a/src/modules/Submit/Submit.reducer.js b/src/modules/Submit/Submit.reducer.js index 7131684..477d697 100644 --- a/src/modules/Submit/Submit.reducer.js +++ b/src/modules/Submit/Submit.reducer.js @@ -6,7 +6,7 @@ import { checkTransactionStatusAction, } from '../TransactionStatus/TransactionStatus.recuder' -// TODO: create here. You can completely delete the following function. It must be imported. +// TODO: You can completely delete the following function. It must be imported. const createDapp = async (snt, dapp) => { return { tx: '0x3513rewrsdfsdf', diff --git a/src/modules/TransactionStatus/TransactionStatus.recuder.js b/src/modules/TransactionStatus/TransactionStatus.recuder.js index 6349571..5576f53 100644 --- a/src/modules/TransactionStatus/TransactionStatus.recuder.js +++ b/src/modules/TransactionStatus/TransactionStatus.recuder.js @@ -11,7 +11,7 @@ const ON_START_PROGRESS = 'ON_START_PROGRESS' const ON_RECEIVE_TRANSACTION_TX = 'ON_RECEIVE_TRANSACTION_TX' const ON_CHANGE_TRANSACTION_STATUS_DATA = 'ON_CHANGE_TRANSACTION_STATUS_DATA' -// TODO: create here. You can completely delete the following two wfunction. They must be imported. +// TODO: You can completely delete the following two wfunction. They must be imported. const checkTransactionStatus = async tx => { return new Promise((resolve, reject) => { setTimeout(() => {