very basic dapp add/remove interface (#2721)

* refactor dapp loading

* basic modal window

* UI for removing dapps

* button to open modal

* eslint 💄, make dialog scrollable

* Dialog -> ui/Modal

* show dapp hash

js/src/views/Dapps/AddDapps/AddDapps.css

@@ -0,0 +1,20 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.hash {
+  margin-top: .5em !important;
+}

js/src/views/Dapps/AddDapps/AddDapps.js

@@ -0,0 +1,72 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import DoneIcon from 'material-ui/svg-icons/action/done';
+import { List, ListItem } from 'material-ui/List';
+import Checkbox from 'material-ui/Checkbox';
+
+import { Modal, Button } from '../../../ui';
+
+import styles from './AddDapps.css';
+
+export default class AddDapps extends Component {
+  static propTypes = {
+    available: PropTypes.array.isRequired,
+    visible: PropTypes.array.isRequired,
+    open: PropTypes.bool.isRequired,
+    onAdd: PropTypes.func.isRequired,
+    onRemove: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired
+  };
+
+  render () {
+    const { onClose, open, available } = this.props;
+
+    return (
+      <Modal
+        title='Select Distributed Apps to be shown'
+        actions={ [
+          <Button label={ 'Done' } onClick={ onClose } icon={ <DoneIcon /> } />
+        ] }
+        visible={ open }
+        scroll={ true }
+      >
+        <List>
+          { available.map(this.renderApp) }
+        </List>
+      </Modal>
+    );
+  }
+
+  renderApp = (app) => {
+    const { visible, onAdd, onRemove } = this.props;
+    const isVisible = visible.includes(app.id);
+    const onCheck = () => {
+      if (isVisible) onRemove(app.id);
+      else onAdd(app.id);
+    };
+
+    return (
+      <ListItem
+        key={ app.id }
+        leftCheckbox={ <Checkbox checked={ isVisible } onCheck={ onCheck } /> }
+        primaryText={ app.name }
+        secondaryText={ <pre className={ styles.hash }><code>{ app.hash }</code></pre> }
+      />
+    );
+  }
+}

js/src/views/Dapps/AddDapps/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './AddDapps';

js/src/views/Dapps/Summary/summary.js

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

js/src/views/Dapps/available.js

@@ -0,0 +1,74 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see <http://www.gnu.org/licenses/>.
+
+// TODO remove this hardcoded list of apps once the route works again.
+
+import { sha3 } from '../../api/util/sha3';
+
+const hardcoded = [
+  {
+    id: 'basiccoin',
+    name: 'Token Deployment',
+    description: 'Deploy new basic tokens that you are able to send around',
+    author: 'Ethcore <admin@ethcore.io>',
+    version: '1.0.0'
+  },
+  {
+    id: 'gavcoin',
+    name: 'GAVcoin',
+    description: 'Manage your GAVcoins, the hottest new property in crypto',
+    author: 'Ethcore <admin@ethcore.io>',
+    version: '1.0.0'
+  },
+  {
+    id: 'registry',
+    name: 'Registry',
+    description: 'A global registry of addresses on the network',
+    author: 'Ethcore <admin@ethcore.io>',
+    version: '1.0.0'
+  },
+  {
+    id: 'tokenreg',
+    name: 'Token Registry',
+    description: 'A registry of transactable tokens on the network',
+    author: 'Ethcore <admin@ethcore.io>',
+    version: '1.0.0'
+  },
+  {
+    id: 'signaturereg',
+    name: 'Method Registry',
+    description: 'A registry of method signatures for lookups on transactions',
+    author: 'Ethcore <admin@ethcore.io>',
+    version: '1.0.0'
+  },
+  {
+    id: 'githubhint',
+    name: 'GitHub Hint',
+    description: 'A mapping of GitHub URLs to hashes for use in contracts as references',
+    author: 'Ethcore <admin@ethcore.io>',
+    version: '1.0.0'
+  }
+];
+
+export default function () {
+
+  // return fetch('//127.0.0.1:8080/api/apps')
+  // .then((res) => res.ok ? res.json() : [])
+  return Promise.resolve(hardcoded) // TODO
+  .then((apps) => apps.map((app) => {
+    return Object.assign({}, app, { hash: sha3(app.id) })
+  }));
+}

js/src/views/Dapps/dapps.js

@@ -16,91 +16,67 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { sha3 } from '../../api/util/sha3';
 import Contracts from '../../contracts';
 import { hashToImageUrl } from '../../redux/util';
 import { Actionbar, Page } from '../../ui';
+import FlatButton from 'material-ui/FlatButton';
+import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
 
+import fetchAvailable from './available';
+import { read as readVisible, write as writeVisible } from './visible';
+
+import AddDapps from './AddDapps';
 import Summary from './Summary';
 
 import styles from './dapps.css';
 
-const APPS = [
-  {
-    name: 'Token Deployment',
-    description: 'Deploy new basic tokens that you are able to send around',
-    author: 'Ethcore <admin@ethcore.io>',
-    url: 'basiccoin',
-    version: '1.0.0'
-  },
-  {
-    name: 'GAVcoin',
-    description: 'Manage your GAVcoins, the hottest new property in crypto',
-    author: 'Ethcore <admin@ethcore.io>',
-    url: 'gavcoin',
-    version: '1.0.0'
-  },
-  {
-    name: 'Registry',
-    description: 'A global registry of addresses on the network',
-    author: 'Ethcore <admin@ethcore.io>',
-    url: 'registry',
-    version: '1.0.0'
-  },
-  {
-    name: 'Token Registry',
-    description: 'A registry of transactable tokens on the network',
-    author: 'Ethcore <admin@ethcore.io>',
-    url: 'tokenreg',
-    version: '1.0.0'
-  },
-  {
-    name: 'Method Registry',
-    description: 'A registry of method signatures for lookups on transactions',
-    author: 'Ethcore <admin@ethcore.io>',
-    url: 'signaturereg',
-    version: '1.0.0'
-  },
-  {
-    name: 'GitHub Hint',
-    description: 'A mapping of GitHub URLs to hashes for use in contracts as references',
-    author: 'Ethcore <admin@ethcore.io>',
-    url: 'githubhint',
-    version: '1.0.0'
-  }
-];
-
-APPS.forEach((app) => {
-  app.id = sha3(app.url);
-  console.log(`dapps ${app.id} -> ${app.url}`);
-});
-
 export default class Dapps extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
 
   state = {
-    globalApps: APPS,
+    available: [],
-    localApps: []
+    visible: [],
+    modalOpen: false
   }
 
   componentDidMount () {
-    this.loadLocalApps();
+    fetchAvailable()
+    .then((available) => {
+      this.setState({ available });
+      this.setState({ visible: readVisible() });
       this.loadImages();
+    })
+    .catch((err) => {
+      console.error('error fetching available apps', err);
+    });
   }
 
   render () {
+    const { available, visible, modalOpen } = this.state;
+    const apps = available.filter((app) => visible.includes(app.id));
+
     return (
       <div>
+        <AddDapps
+          available={ available }
+          visible={ visible }
+          open={ modalOpen }
+          onAdd={ this.onAdd }
+          onRemove={ this.onRemove }
+          onClose={ this.closeModal }
+        />
         <Actionbar
-          title='Decentralized Applications' />
+          className={ styles.toolbar }
+          title='Decentralized Applications'
+          buttons={ [
+            <FlatButton label='edit' icon={ <EyeIcon /> } onClick={ this.openModal } />
+          ] }
+        />
         <Page>
           <div className={ styles.list }>
-            { this.renderGlobalApps() }
+            { apps.map(this.renderApp) }
-          </div>
-          <div className={ styles.list }>
-            { this.renderLocalApps() }
           </div>
         </Page>
       </div>
@@ -111,58 +87,49 @@ export default class Dapps extends Component {
     return (
       <div
         className={ styles.item }
-        key={ app.url }>
+        key={ app.id }>
         <Summary app={ app } />
       </div>
     );
   }
 
-  renderGlobalApps () {
-    const { globalApps } = this.state;
-
-    return globalApps.map(this.renderApp);
-  }
-
-  renderLocalApps () {
-    const { localApps } = this.state;
-
-    return localApps.map(this.renderApp);
-  }
-
-  loadLocalApps () {
-    fetch('http://127.0.0.1:8080/api/apps', { method: 'GET' })
-      .then((response) => response.ok ? response.json() : [])
-      .then((_localApps) => {
-        const localApps = _localApps
-          .filter((app) => !['home', 'status', 'parity', 'wallet'].includes(app.id))
-          .map((app) => {
-            app.image = `/app/${app.id}/${app.iconUrl}`;
-            app.url = app.id;
-            app.local = true;
-            return app;
-          });
-        console.log('loadLocalApps', localApps);
-        this.setState({ localApps });
-      })
-      .catch((error) => {
-        console.error('loadLocalApps', error);
-      });
-  }
-
   loadImages () {
-    const { globalApps } = this.state;
+    const { available } = this.state;
     const { dappReg } = Contracts.get();
 
-    Promise
+    return Promise.all(available.map((app) => dappReg.getImage(app.hash)))
-      .all(globalApps.map((app) => dappReg.getImage(app.id)))
     .then((images) => {
-        globalApps.forEach((app, index) => {
+      this.setState({
-          app.image = hashToImageUrl(images[index]);
+        available: images
+          .map(hashToImageUrl)
+          .map((image, i) => Object.assign({}, available[i], { image }))
       });
-        this.setState({ globalApps });
     })
-      .catch((error) => {
+    .catch((err) => {
-        console.error('loadImages', error);
+      console.error('error loading dapp images', err);
     });
   }
+
+  onAdd = (id) => {
+    const oldVisible = this.state.visible;
+    if (oldVisible.includes(id)) return;
+    const newVisible = oldVisible.concat(id);
+    this.setState({ visible: newVisible });
+    writeVisible(newVisible);
+  }
+
+  onRemove = (id) => {
+    const oldVisible = this.state.visible;
+    if (!oldVisible.includes(id)) return;
+    const newVisible = oldVisible.filter((_id) => _id !== id);
+    this.setState({ visible: newVisible });
+    writeVisible(newVisible);
+  }
+
+  openModal = () => {
+    this.setState({ modalOpen: true });
+  };
+  closeModal = () => {
+    this.setState({ modalOpen: false });
+  };
 }

js/src/views/Dapps/visible.js

@@ -0,0 +1,27 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see <http://www.gnu.org/licenses/>.
+
+const defaultDapps = ['gavcoin', 'basiccoin', 'tokenreg'];
+
+export function read () {
+  const stored = localStorage.getItem('visible-dapps');
+  if (stored) return JSON.parse(stored);
+  return defaultDapps;
+}
+
+export function write (visible) {
+  localStorage.setItem('visible-dapps', JSON.stringify(visible));
+}