Hide external apps by default

This commit is contained in:
Jaco Greeff 2016-11-14 17:02:45 +01:00
parent 6fc7c15644
commit 5a6e2f89dd
5 changed files with 70 additions and 67 deletions

View File

@ -52,7 +52,7 @@ export default class AddDapps extends Component {
visible
scroll>
<List>
{ store.apps.map(this.renderApp) }
{ store.sortedApps.map(this.renderApp) }
</List>
</Modal>
);
@ -60,7 +60,8 @@ export default class AddDapps extends Component {
renderApp = (app) => {
const { store } = this.props;
const isHidden = store.hidden.includes(app.id);
const isHidden = !store.displayApps[app.id].visible;
const onCheck = () => {
if (isHidden) {
store.showApp(app.id);

View File

@ -17,7 +17,7 @@
import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import { Container, ContainerTitle } from '../../../ui';
import { Container, ContainerTitle, Tags } from '../../../ui';
import styles from './summary.css';
@ -49,6 +49,7 @@ export default class Summary extends Component {
return (
<Container className={ styles.container }>
{ image }
<Tags tags={ [app.type] } />
<div className={ styles.description }>
<ContainerTitle
className={ styles.title }

View File

@ -5,7 +5,8 @@
"name": "Token Deployment",
"description": "Deploy new basic tokens that you are able to send around",
"author": "Parity Team <admin@ethcore.io>",
"version": "1.0.0"
"version": "1.0.0",
"visible": true
},
{
"id": "0xd1adaede68d344519025e2ff574650cd99d3830fe6d274c7a7843cdc00e17938",
@ -13,7 +14,8 @@
"name": "Registry",
"description": "A global registry of addresses on the network",
"author": "Parity Team <admin@ethcore.io>",
"version": "1.0.0"
"version": "1.0.0",
"visible": true
},
{
"id": "0x0a8048117e51e964628d0f2d26342b3cd915248b59bcce2721e1d05f5cfa2208",
@ -21,7 +23,8 @@
"name": "Token Registry",
"description": "A registry of transactable tokens on the network",
"author": "Parity Team <admin@ethcore.io>",
"version": "1.0.0"
"version": "1.0.0",
"visible": true
},
{
"id": "0xf49089046f53f5d2e5f3513c1c32f5ff57d986e46309a42d2b249070e4e72c46",
@ -29,7 +32,8 @@
"name": "Method Registry",
"description": "A registry of method signatures for lookups on transactions",
"author": "Parity Team <admin@ethcore.io>",
"version": "1.0.0"
"version": "1.0.0",
"visible": true
},
{
"id": "0x058740ee9a5a3fb9f1cfa10752baec87e09cc45cd7027fd54708271aca300c75",
@ -38,6 +42,7 @@
"description": "A mapping of GitHub URLs to hashes for use in contracts as references",
"author": "Parity Team <admin@ethcore.io>",
"version": "1.0.0",
"visible": false,
"secure": true
}
]

View File

@ -54,7 +54,7 @@ export default class Dapps extends Component {
/>
<Page>
<div className={ styles.list }>
{ this.store.visible.map(this.renderApp) }
{ this.store.visibleApps.map(this.renderApp) }
</div>
</Page>
</div>

View File

@ -14,39 +14,42 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import BigNumber from 'bignumber.js';
import { action, computed, observable, transaction } from 'mobx';
import store from 'store';
import Contracts from '../../contracts';
import { hashToImageUrl } from '../../redux/util';
import builtinApps from './builtin.json';
const LS_KEY_HIDDEN = 'hiddenApps';
const LS_KEY_EXTERNAL = 'externalApps';
const LS_KEY_DISPLAY = 'displayApps';
export default class DappsStore {
@observable apps = [];
@observable externalApps = [];
@observable hiddenApps = [];
@observable displayApps = {};
@observable modalOpen = false;
constructor (api) {
this._api = api;
this._readHiddenApps();
this._readExternalApps();
this._readDisplayApps();
this._fetchBuiltinApps();
this._fetchLocalApps();
this._fetchRegistryApps();
Promise
.all([
this._fetchBuiltinApps(),
this._fetchLocalApps(),
this._fetchRegistryApps()
])
.then(this._writeDisplayApps);
}
@computed get visible () {
return this.apps
.filter((app) => {
return this.externalApps.includes(app.id) || !this.hiddenApps.includes(app.id);
})
.sort((a, b) => a.name.localeCompare(b.name));
@computed get sortedApps () {
return this.apps.sort((a, b) => a.name.localeCompare(b.name));
}
@computed get visibleApps () {
return this.sortedApps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible);
}
@action openModal = () => {
@ -58,13 +61,33 @@ export default class DappsStore {
}
@action hideApp = (id) => {
this.hiddenApps = this.hiddenApps.concat(id);
this._writeHiddenApps();
const app = this.displayApps[id] || {};
app.visible = false;
this.displayApps[id] = app;
this._writeDisplayApps();
}
@action showApp = (id) => {
this.hiddenApps = this.hiddenApps.filter((_id) => _id !== id);
this._writeHiddenApps();
const app = this.displayApps[id] || {};
app.visible = true;
this.displayApps[id] = app;
this._writeDisplayApps();
}
@action setDisplayApps = (apps) => {
this.displayApps = apps;
}
@action addApp = (app, visible) => {
transaction(() => {
this.apps.push(app);
if (!this.displayApps[app.id]) {
this.displayApps[app.id] = { visible };
}
});
}
_getHost (api) {
@ -83,9 +106,12 @@ export default class DappsStore {
builtinApps.forEach((app, index) => {
app.type = 'builtin';
app.image = hashToImageUrl(imageIds[index]);
this.apps.push(app);
this.addApp(app, app.visible);
});
});
})
.catch((error) => {
console.warn('DappsStore:fetchBuiltinApps', error);
});
}
@ -106,7 +132,7 @@ export default class DappsStore {
})
.then((apps) => {
transaction(() => {
(apps || []).forEach((app) => this.apps.push(app));
(apps || []).forEach((app) => this.addApp(app, true));
});
})
.catch((error) => {
@ -132,7 +158,9 @@ export default class DappsStore {
.then((appsInfo) => {
const appIds = appsInfo
.map(([appId, owner]) => this._api.util.bytesToHex(appId))
.filter((appId) => !builtinApps.find((app) => app.id === appId));
.filter((appId) => {
return (new BigNumber(appId)).gt(0) && !builtinApps.find((app) => app.id === appId);
});
return Promise
.all([
@ -181,7 +209,7 @@ export default class DappsStore {
})
.then((apps) => {
transaction(() => {
(apps || []).forEach((app) => this.apps.push(app));
(apps || []).forEach((app) => this.addApp(app, false));
});
})
.catch((error) => {
@ -202,43 +230,11 @@ export default class DappsStore {
});
}
_readHiddenApps () {
const stored = localStorage.getItem(LS_KEY_HIDDEN);
if (stored) {
try {
this.hiddenApps = JSON.parse(stored);
} catch (error) {
console.warn('DappsStore:readHiddenApps', error);
}
}
_readDisplayApps = () => {
this.setDisplayApps(store.get(LS_KEY_DISPLAY) || {});
}
_readExternalApps () {
const stored = localStorage.getItem(LS_KEY_EXTERNAL);
if (stored) {
try {
this.externalApps = JSON.parse(stored);
} catch (error) {
console.warn('DappsStore:readExternalApps', error);
}
}
}
_writeExternalApps () {
try {
localStorage.setItem(LS_KEY_EXTERNAL, JSON.stringify(this.externalApps));
} catch (error) {
console.error('DappsStore:writeExternalApps', error);
}
}
_writeHiddenApps () {
try {
localStorage.setItem(LS_KEY_HIDDEN, JSON.stringify(this.hiddenApps));
} catch (error) {
console.error('DappsStore:writeHiddenApps', error);
}
_writeDisplayApps = () => {
store.set(LS_KEY_DISPLAY, this.displayApps);
}
}