App Center: connect to installed repos (#694)

src/App.js

@@ -35,6 +35,7 @@ const INITIAL_DAO_STATE = {
   daoAddress: { address: '', domain: '' },
   permissions: {},
   permissionsLoading: true,
+  repos: [],
 }
 
 class App extends React.Component {
@@ -235,10 +236,6 @@ class App extends React.Component {
           appsStatus: APPS_STATUS_READY,
         })
       },
-      onAppIdentifiers: appIdentifiers => {
-        log('app identifiers', appIdentifiers)
-        this.setState({ appIdentifiers })
-      },
       onPermissions: permissions => {
         log('permissions updated', permissions)
         this.setState({
@@ -249,6 +246,14 @@ class App extends React.Component {
       onForwarders: forwarders => {
         log('forwarders', forwarders)
       },
+      onAppIdentifiers: appIdentifiers => {
+        log('app identifiers', appIdentifiers)
+        this.setState({ appIdentifiers })
+      },
+      onInstalledRepos: repos => {
+        log('installed repos', repos)
+        this.setState({ repos })
+      },
       onTransaction: transactionBag => {
         log('transaction bag', transactionBag)
         this.setState({ transactionBag })
@@ -346,6 +351,7 @@ class App extends React.Component {
       locator,
       permissions,
       permissionsLoading,
+      repos,
       selectorNetworks,
       showDeprecatedBanner,
       transactionBag,
@@ -416,6 +422,7 @@ class App extends React.Component {
                   onRequestAppsReload={this.handleRequestAppsReload}
                   onRequestEnable={this.handleRequestEnable}
                   permissionsLoading={permissionsLoading}
+                  repos={repos}
                   transactionBag={transactionBag}
                   walletNetwork={walletNetwork}
                   walletWeb3={walletWeb3}

src/Wrapper.js

@@ -19,9 +19,9 @@ import {
   AragonType,
   DaoAddressType,
   EthereumAddressType,
+  RepoType,
 } from './prop-types'
 import { getAppPath } from './routing'
-import { staticApps } from './static-apps'
 import { APPS_STATUS_LOADING } from './symbols'
 import { addressesEqual } from './web3-utils'
 import ethereumLoadingAnimation from './assets/ethereum-loading.svg'
@@ -31,6 +31,7 @@ class Wrapper extends React.PureComponent {
     account: EthereumAddressType,
     apps: PropTypes.arrayOf(AppType).isRequired,
     appsStatus: AppsStatusType.isRequired,
+    autoClosingPanel: PropTypes.bool.isRequired,
     banner: PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.shape({
@@ -45,7 +46,7 @@ class Wrapper extends React.PureComponent {
     onRequestAppsReload: PropTypes.func.isRequired,
     onRequestEnable: PropTypes.func.isRequired,
     permissionsLoading: PropTypes.bool.isRequired,
-    autoClosingPanel: PropTypes.bool.isRequired,
+    repos: PropTypes.arrayOf(RepoType).isRequired,
     transactionBag: PropTypes.object,
     walletNetwork: PropTypes.string,
     walletProviderId: PropTypes.string,
@@ -64,7 +65,6 @@ class Wrapper extends React.PureComponent {
   }
 
   state = {
-    appInstance: {},
     menuPanelOpened: !this.props.autoClosingPanel,
     preferencesOpened: false,
     notificationOpen: false,
@@ -182,15 +182,44 @@ class Wrapper extends React.PureComponent {
     }
   }
 
-  isAppInstalled(instanceId) {
-    const { apps } = this.props
-    return (
-      staticApps.has(instanceId) &&
-      !!apps.find(app => addressesEqual(app.proxyAddress, instanceId))
-    )
-  }
+  getAppInstancesGroups = memoize(apps =>
+    apps.reduce((groups, app) => {
+      const group = groups.find(({ appId }) => appId === app.appId)
 
-  getMenuApps = memoize(apps => apps.filter(app => app.hasWebApp))
+      const {
+        // This is not technically fully true, but let's assume that only these
+        // aspects be different between multiple instances of the same app
+        codeAddress: instanceCodeAddress,
+        identifier: instanceIdentifier,
+        proxyAddress: instanceProxyAddress,
+        ...sharedAppInfo
+      } = app
+
+      const instance = {
+        codeAddress: instanceCodeAddress,
+        identifier: instanceIdentifier,
+        instanceId: instanceProxyAddress,
+        proxyAddress: instanceProxyAddress,
+      }
+
+      // Append the instance to the existing app group
+      if (group) {
+        group.instances.push(instance)
+        return groups
+      }
+
+      return groups.concat([
+        {
+          app: sharedAppInfo,
+          appId: app.appId,
+          name: app.name,
+          instances: [instance],
+          hasWebApp: app.hasWebApp,
+          repoName: app.appName,
+        },
+      ])
+    }, [])
+  )
 
   render() {
     const {
@@ -235,7 +264,7 @@ class Wrapper extends React.PureComponent {
           {progress => (
             <React.Fragment>
               <MenuPanel
-                apps={this.getMenuApps(apps)}
+                appInstanceGroups={this.getAppInstancesGroups(apps)}
                 appsStatus={appsStatus}
                 activeInstanceId={locator.instanceId}
                 connected={connected}
@@ -283,12 +312,14 @@ class Wrapper extends React.PureComponent {
       daoAddress,
       locator,
       permissionsLoading,
+      repos,
       walletNetwork,
       walletWeb3,
       wrapper,
     } = this.props
 
     const appsLoading = appsStatus === APPS_STATUS_LOADING
+    const reposLoading = appsLoading || (apps.length && !repos.length)
 
     if (instanceId === 'home') {
       return (
@@ -319,9 +350,10 @@ class Wrapper extends React.PureComponent {
     if (instanceId === 'apps') {
       return (
         <AppCenter
-          apps={apps}
-          appsLoading={appsLoading}
+          appInstanceGroups={this.getAppInstancesGroups(apps)}
           params={params}
+          repos={repos}
+          reposLoading={reposLoading}
           onMessage={this.handleAppMessage}
           onParamsRequest={this.handleParamsRequest}
         />