From f0054aa201f1fbfcfea7ba84610911e6ac5f53fc Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 7 Nov 2016 15:22:46 +0100 Subject: [PATCH] Add store for dapps state (#3211) * Add mobx * Use mobx store for dapps * Cleanup hidden reads * Remove (now) unused hidden.js * _ denotes internal functions * s/visibleApps/visible/ * AddDapps now use the mobx store as well * Move modalOpen state to store * Simplify * Complete master merge * Remove extra indirection * Remove unneeded check * Readability improvements * Remove final debug info --- js/package.json | 5 +- js/src/views/Dapp/dapp.js | 42 +---- js/src/views/Dapps/AddDapps/AddDapps.js | 53 +++--- js/src/views/Dapps/Summary/summary.js | 19 +- js/src/views/Dapps/dapps.js | 119 ++----------- js/src/views/Dapps/dappsStore.js | 222 ++++++++++++++++++++++++ js/src/views/Dapps/hidden.js | 35 ---- js/src/views/Dapps/registry.js | 151 ---------------- 8 files changed, 289 insertions(+), 357 deletions(-) create mode 100644 js/src/views/Dapps/dappsStore.js delete mode 100644 js/src/views/Dapps/hidden.js delete mode 100644 js/src/views/Dapps/registry.js diff --git a/js/package.json b/js/package.json index a035ae526..842a81e6f 100644 --- a/js/package.json +++ b/js/package.json @@ -46,7 +46,7 @@ "devDependencies": { "babel-cli": "^6.10.1", "babel-core": "^6.10.4", - "babel-eslint": "^6.1.2", + "babel-eslint": "^7.1.0", "babel-loader": "^6.2.3", "babel-plugin-lodash": "^3.2.2", "babel-plugin-transform-class-properties": "^6.11.5", @@ -128,6 +128,9 @@ "marked": "^0.3.6", "material-ui": "^0.16.1", "material-ui-chip-input": "^0.8.0", + "mobx": "^2.6.1", + "mobx-react": "^3.5.8", + "mobx-react-devtools": "^4.2.9", "moment": "^2.14.1", "qs": "^6.3.0", "react": "^15.2.1", diff --git a/js/src/views/Dapp/dapp.js b/js/src/views/Dapp/dapp.js index 7f5f36d1d..3e5b206ad 100644 --- a/js/src/views/Dapp/dapp.js +++ b/js/src/views/Dapp/dapp.js @@ -15,12 +15,13 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { observer } from 'mobx-react'; -import Contracts from '../../contracts'; -import { fetchAvailable } from '../Dapps/registry'; +import DappsStore from '../Dapps/dappsStore'; import styles from './dapp.css'; +@observer export default class Dapp extends Component { static contextTypes = { api: PropTypes.object.isRequired @@ -30,17 +31,12 @@ export default class Dapp extends Component { params: PropTypes.object }; - state = { - app: null - } - - componentWillMount () { - this.lookup(); - } + store = new DappsStore(this.context.api); render () { - const { app } = this.state; const { dappsUrl } = this.context.api; + const { id } = this.props.params; + const app = this.store.apps.find((app) => app.id === id); if (!app) { return null; @@ -76,30 +72,4 @@ export default class Dapp extends Component { ); } - - lookup () { - const { api } = this.context; - const { id } = this.props.params; - const { dappReg } = Contracts.get(); - - fetchAvailable(api) - .then((available) => { - return available.find((app) => app.id === id); - }) - .then((app) => { - if (app.type !== 'network') { - return app; - } - - return dappReg - .getContent(app.id) - .then((contentHash) => { - app.contentHash = api.util.bytesToHex(contentHash).substr(2); - return app; - }); - }) - .then((app) => { - this.setState({ app }); - }); - } } diff --git a/js/src/views/Dapps/AddDapps/AddDapps.js b/js/src/views/Dapps/AddDapps/AddDapps.js index 208a65004..38bb64792 100644 --- a/js/src/views/Dapps/AddDapps/AddDapps.js +++ b/js/src/views/Dapps/AddDapps/AddDapps.js @@ -15,6 +15,7 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { observer } from 'mobx-react'; import DoneIcon from 'material-ui/svg-icons/action/done'; import { List, ListItem } from 'material-ui/List'; import Checkbox from 'material-ui/Checkbox'; @@ -23,57 +24,67 @@ import { Modal, Button } from '../../../ui'; import styles from './AddDapps.css'; +@observer export default class AddDapps extends Component { static propTypes = { - available: PropTypes.array.isRequired, - hidden: PropTypes.array.isRequired, - open: PropTypes.bool.isRequired, - onHideApp: PropTypes.func.isRequired, - onShowApp: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired + store: PropTypes.object.isRequired }; render () { - const { onClose, open, available } = this.props; + const { store } = this.props; + + if (!store.modalOpen) { + return null; + } return ( } /> +