Make local apps available (Fixes #2771) (#2808)

This commit is contained in:
Jaco Greeff 2016-10-22 15:49:39 +02:00 committed by GitHub
parent 37a2ee98de
commit a1266fccb7
10 changed files with 138 additions and 91 deletions

View File

@ -18,14 +18,23 @@
padding: 0em; padding: 0em;
} }
.compact,
.padded { .padded {
padding: 1.5em;
background: rgba(0, 0, 0, 0.8) !important; background: rgba(0, 0, 0, 0.8) !important;
border-radius: 0 !important; border-radius: 0 !important;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
.compact {
padding: 0 1.5em;
}
.padded {
padding: 1.5em;
}
.light .compact,
.light .padded { .light .padded {
background: rgba(0, 0, 0, 0.5) !important; background: rgba(0, 0, 0, 0.5) !important;
} }

View File

@ -23,17 +23,18 @@ export default class Container extends Component {
static propTypes = { static propTypes = {
children: PropTypes.node, children: PropTypes.node,
className: PropTypes.string, className: PropTypes.string,
compact: PropTypes.bool,
light: PropTypes.bool, light: PropTypes.bool,
style: PropTypes.object style: PropTypes.object
} }
render () { render () {
const { children, className, light, style } = this.props; const { children, className, compact, light, style } = this.props;
const classes = `${styles.container} ${light ? styles.light : ''} ${className}`; const classes = `${styles.container} ${light ? styles.light : ''} ${className}`;
return ( return (
<div className={ classes } style={ style }> <div className={ classes } style={ style }>
<Card className={ styles.padded }> <Card className={ compact ? styles.compact : styles.padded }>
{ children } { children }
</Card> </Card>
</div> </div>

View File

@ -38,6 +38,7 @@ class Modal extends Component {
busy: PropTypes.bool, busy: PropTypes.bool,
children: PropTypes.node, children: PropTypes.node,
className: PropTypes.string, className: PropTypes.string,
compact: PropTypes.bool,
current: PropTypes.number, current: PropTypes.number,
waiting: PropTypes.array, waiting: PropTypes.array,
scroll: PropTypes.bool, scroll: PropTypes.bool,
@ -51,7 +52,7 @@ class Modal extends Component {
render () { render () {
const { muiTheme } = this.context; const { muiTheme } = this.context;
const { actions, busy, className, current, children, scroll, steps, waiting, title, visible, settings } = this.props; const { actions, busy, className, current, children, compact, scroll, steps, waiting, title, visible, settings } = this.props;
const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed); const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
const header = ( const header = (
<Title <Title
@ -82,7 +83,7 @@ class Modal extends Component {
style={ DIALOG_STYLE } style={ DIALOG_STYLE }
title={ header } title={ header }
titleStyle={ TITLE_STYLE }> titleStyle={ TITLE_STYLE }>
<Container light style={ { transition: 'none' } }> <Container light compact={ compact } style={ { transition: 'none' } }>
{ children } { children }
</Container> </Container>
</Dialog> </Dialog>

View File

@ -15,6 +15,6 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>. /* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/ */
.hash { .description {
margin-top: .5em !important; margin-top: .5em !important;
} }

View File

@ -21,15 +21,15 @@ import Checkbox from 'material-ui/Checkbox';
import { Modal, Button } from '../../../ui'; import { Modal, Button } from '../../../ui';
import styles from './AddDapps.css'; import styles from './addDapps.css';
export default class AddDapps extends Component { export default class AddDapps extends Component {
static propTypes = { static propTypes = {
available: PropTypes.array.isRequired, available: PropTypes.array.isRequired,
visible: PropTypes.array.isRequired, hidden: PropTypes.array.isRequired,
open: PropTypes.bool.isRequired, open: PropTypes.bool.isRequired,
onAdd: PropTypes.func.isRequired, onHideApp: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired, onShowApp: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired onClose: PropTypes.func.isRequired
}; };
@ -38,13 +38,13 @@ export default class AddDapps extends Component {
return ( return (
<Modal <Modal
title='Select Distributed Apps to be shown' compact
title='visible applications'
actions={ [ actions={ [
<Button label={ 'Done' } onClick={ onClose } icon={ <DoneIcon /> } /> <Button label={ 'Done' } key='done' onClick={ onClose } icon={ <DoneIcon /> } />
] } ] }
visible={ open } visible={ open }
scroll scroll>
>
<List> <List>
{ available.map(this.renderApp) } { available.map(this.renderApp) }
</List> </List>
@ -53,20 +53,27 @@ export default class AddDapps extends Component {
} }
renderApp = (app) => { renderApp = (app) => {
const { visible, onAdd, onRemove } = this.props; const { hidden, onHideApp, onShowApp } = this.props;
const isVisible = visible.includes(app.id); const isHidden = hidden.includes(app.id);
const description = (
<div className={ styles.description }>
{ app.description }
</div>
);
const onCheck = () => { const onCheck = () => {
if (isVisible) onRemove(app.id); if (isHidden) {
else onAdd(app.id); onShowApp(app.id);
} else {
onHideApp(app.id);
}
}; };
return ( return (
<ListItem <ListItem
key={ app.id } key={ app.id }
leftCheckbox={ <Checkbox checked={ isVisible } onCheck={ onCheck } /> } leftCheckbox={ <Checkbox checked={ !isHidden } onCheck={ onCheck } /> }
primaryText={ app.name } primaryText={ app.name }
secondaryText={ <pre className={ styles.hash }><code>{ app.hash }</code></pre> } secondaryText={ description } />
/>
); );
} }
} }

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './AddDapps'; export default from './addDapps';

View File

@ -38,7 +38,7 @@ export default class Summary extends Component {
return null; return null;
} }
const url = `/app/${app.local ? 'local' : 'global'}/${app.id}`; const url = `/app/${app.builtin ? 'global' : 'local'}/${app.url || app.id}`;
const image = app.image const image = app.image
? <img src={ app.image } className={ styles.image } /> ? <img src={ app.image } className={ styles.image } />
: <div className={ styles.image }>&nbsp;</div>; : <div className={ styles.image }>&nbsp;</div>;

View File

@ -14,60 +14,77 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
// TODO remove this hardcoded list of apps once the route works again. const builtinApps = [
import { sha3 } from '../../api/util/sha3';
const hardcoded = [
{ {
id: 'basiccoin', id: '0xf9f2d620c2e08f83e45555247146c62185e4ab7cf82a4b9002a265a0d020348f',
url: 'basiccoin',
name: 'Token Deployment', name: 'Token Deployment',
description: 'Deploy new basic tokens that you are able to send around', description: 'Deploy new basic tokens that you are able to send around',
author: 'Ethcore <admin@ethcore.io>', author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0' version: '1.0.0',
builtin: true
}, },
{ {
id: 'gavcoin', id: '0xd798a48831b4ccdbc71de206a1d6a4aa73546c7b6f59c22a47452af414dc64d6',
url: 'gavcoin',
name: 'GAVcoin', name: 'GAVcoin',
description: 'Manage your GAVcoins, the hottest new property in crypto', description: 'Manage your GAVcoins, the hottest new property in crypto',
author: 'Ethcore <admin@ethcore.io>', author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0' version: '1.0.0',
builtin: true
}, },
{ {
id: 'registry', id: '0xd1adaede68d344519025e2ff574650cd99d3830fe6d274c7a7843cdc00e17938',
url: 'registry',
name: 'Registry', name: 'Registry',
description: 'A global registry of addresses on the network', description: 'A global registry of addresses on the network',
author: 'Ethcore <admin@ethcore.io>', author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0' version: '1.0.0',
builtin: true
}, },
{ {
id: 'tokenreg', id: '0x0a8048117e51e964628d0f2d26342b3cd915248b59bcce2721e1d05f5cfa2208',
url: 'tokenreg',
name: 'Token Registry', name: 'Token Registry',
description: 'A registry of transactable tokens on the network', description: 'A registry of transactable tokens on the network',
author: 'Ethcore <admin@ethcore.io>', author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0' version: '1.0.0',
builtin: true
}, },
{ {
id: 'signaturereg', id: '0xf49089046f53f5d2e5f3513c1c32f5ff57d986e46309a42d2b249070e4e72c46',
url: 'signaturereg',
name: 'Method Registry', name: 'Method Registry',
description: 'A registry of method signatures for lookups on transactions', description: 'A registry of method signatures for lookups on transactions',
author: 'Ethcore <admin@ethcore.io>', author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0' version: '1.0.0',
builtin: true
}, },
{ {
id: 'githubhint', id: '0x058740ee9a5a3fb9f1cfa10752baec87e09cc45cd7027fd54708271aca300c75',
url: 'githubhint',
name: 'GitHub Hint', name: 'GitHub Hint',
description: 'A mapping of GitHub URLs to hashes for use in contracts as references', description: 'A mapping of GitHub URLs to hashes for use in contracts as references',
author: 'Ethcore <admin@ethcore.io>', author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0' version: '1.0.0',
builtin: true
} }
]; ];
export default function () { export default function () {
// return fetch('//127.0.0.1:8080/api/apps') return fetch('http://127.0.0.1:8080/api/apps')
// .then((res) => res.ok ? res.json() : []) .then((response) => {
return Promise.resolve(hardcoded) // TODO return response.ok
.then((apps) => apps.map((app) => { ? response.json()
return Object.assign({}, app, { hash: sha3(app.id) }); : [];
})); })
.catch((error) => {
console.warn('app list', error);
return [];
})
.then((localApps) => {
return builtinApps
.concat(localApps)
.sort((a, b) => a.name.localeCompare(b.name));
});
} }

View File

@ -23,7 +23,7 @@ import FlatButton from 'material-ui/FlatButton';
import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye'; import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
import fetchAvailable from './available'; import fetchAvailable from './available';
import { read as readVisible, write as writeVisible } from './visible'; import { readHiddenApps, writeHiddenApps } from './hidden';
import AddDapps from './AddDapps'; import AddDapps from './AddDapps';
import Summary from './Summary'; import Summary from './Summary';
@ -37,15 +37,17 @@ export default class Dapps extends Component {
state = { state = {
available: [], available: [],
visible: [], hidden: [],
modalOpen: false modalOpen: false
} }
componentDidMount () { componentDidMount () {
fetchAvailable() fetchAvailable()
.then((available) => { .then((available) => {
this.setState({ available }); this.setState({
this.setState({ visible: readVisible() }); available,
hidden: readHiddenApps()
});
this.loadImages(); this.loadImages();
}) })
.catch((err) => { .catch((err) => {
@ -54,24 +56,24 @@ export default class Dapps extends Component {
} }
render () { render () {
const { available, visible, modalOpen } = this.state; const { available, hidden, modalOpen } = this.state;
const apps = available.filter((app) => visible.includes(app.id)); const apps = available.filter((app) => !hidden.includes(app.id));
return ( return (
<div> <div>
<AddDapps <AddDapps
available={ available } available={ available }
visible={ visible } hidden={ hidden }
open={ modalOpen } open={ modalOpen }
onAdd={ this.onAdd } onHideApp={ this.onHideApp }
onRemove={ this.onRemove } onShowApp={ this.onShowApp }
onClose={ this.closeModal } onClose={ this.closeModal }
/> />
<Actionbar <Actionbar
className={ styles.toolbar } className={ styles.toolbar }
title='Decentralized Applications' title='Decentralized Applications'
buttons={ [ buttons={ [
<FlatButton label='edit' icon={ <EyeIcon /> } onClick={ this.openModal } /> <FlatButton label='edit' key='edit' icon={ <EyeIcon /> } onClick={ this.openModal } />
] } ] }
/> />
<Page> <Page>
@ -97,7 +99,8 @@ export default class Dapps extends Component {
const { available } = this.state; const { available } = this.state;
const { dappReg } = Contracts.get(); const { dappReg } = Contracts.get();
return Promise.all(available.map((app) => dappReg.getImage(app.hash))) return Promise
.all(available.map((app) => dappReg.getImage(app.id)))
.then((images) => { .then((images) => {
this.setState({ this.setState({
available: images available: images
@ -105,30 +108,31 @@ export default class Dapps extends Component {
.map((image, i) => Object.assign({}, available[i], { image })) .map((image, i) => Object.assign({}, available[i], { image }))
}); });
}) })
.catch((err) => { .catch((error) => {
console.error('error loading dapp images', err); console.warn('loadImages', error);
}); });
} }
onAdd = (id) => { onHideApp = (id) => {
const oldVisible = this.state.visible; const { hidden } = this.state;
if (oldVisible.includes(id)) return; const newHidden = hidden.concat(id);
const newVisible = oldVisible.concat(id);
this.setState({ visible: newVisible }); this.setState({ hidden: newHidden });
writeVisible(newVisible); writeHiddenApps(newHidden);
} }
onRemove = (id) => { onShowApp = (id) => {
const oldVisible = this.state.visible; const { hidden } = this.state;
if (!oldVisible.includes(id)) return; const newHidden = hidden.filter((_id) => _id !== id);
const newVisible = oldVisible.filter((_id) => _id !== id);
this.setState({ visible: newVisible }); this.setState({ hidden: newHidden });
writeVisible(newVisible); writeHiddenApps(newHidden);
} }
openModal = () => { openModal = () => {
this.setState({ modalOpen: true }); this.setState({ modalOpen: true });
}; };
closeModal = () => { closeModal = () => {
this.setState({ modalOpen: false }); this.setState({ modalOpen: false });
}; };

View File

@ -14,14 +14,22 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
const defaultDapps = ['gavcoin', 'basiccoin', 'tokenreg']; const defaultHidden = [];
export function read () { export function readHiddenApps () {
const stored = localStorage.getItem('visible-dapps'); const stored = localStorage.getItem('hiddenApps');
if (stored) return JSON.parse(stored);
return defaultDapps; if (stored) {
try {
return JSON.parse(stored);
} catch (error) {
console.warn('readHiddenApps', error);
}
}
return defaultHidden;
} }
export function write (visible) { export function writeHiddenApps (hidden) {
localStorage.setItem('visible-dapps', JSON.stringify(visible)); localStorage.setItem('hiddenApps', JSON.stringify(hidden));
} }