api-react: rename apps to installedApps

packages/aragon-api-react/README.md

@@ -108,63 +108,62 @@ function App() {
 }
 ```
 
-#### `apps`
-
-The complete list of apps installed in the organization. Its value is an empty array (`[]`) until
-the list of apps are loaded.
-
-Each object in the array holds the following keys:
+#### `connectedAccount`
 
-- `appAddress`: the app's contract address
-- `appId`: the app's appId
-- `appImplementationAddress`: the app's implementation contract, if any (only available if this app is a proxied AragonApp)
-- `identifier`: the app's identifier, if any
-- `isForwarder`: whether the app is a forwarder or not
-- `kernelAddress`: the kernel address of the organization this app is installed on (always the same)
-- `name`: the app's name, if available
+The connected Ethereum account. Its value is `""` (empty string) when there is no account connected.
 
 Example:
 
 ```jsx
 function App() {
-  const { apps } = useAragonApi()
+  const { connectedAccount } = useAragonApi()
   return (
-    <div>
-      {apps.map(app => (
-        <div>{app.appAddress}</div>
-      ))}
-    </div>
+    <div>Account: {connectedAccount ? connectedAccount : 'Not connected'}</div>
   )
 }
 ```
 
-#### `connectedAccount`
+#### `currentApp`
 
-The connected Ethereum account. Its value is `""` (empty string) when there is no account connected.
+Details about the current app. It returns a single object with the following keys:
+
+- `appAddress`: the app's contract address
+- `appId`: the app's appId
+- `appImplementationAddress`: the app's implementation contract, if any (only available if this app is a proxied AragonApp)
+- `identifier`: the app's identifier, if any
+- `isForwarder`: whether the app is a forwarder or not
+- `kernelAddress`: the Kernel address (i.e. organization address) this app is installed on
+- `name`: the app's name, if available
 
 Example:
 
 ```jsx
 function App() {
-  const { connectedAccount } = useAragonApi()
+  const { currentApp } = useAragonApi()
   return (
-    <div>Account: {connectedAccount ? connectedAccount : 'Not connected'}</div>
+    <div>{currentApp.appAddress}</div>
   )
 }
 ```
 
-#### `currentApp`
+#### `installedApps`
 
-Details about the current app. It returns a single object with the same keys as the objects in
-`apps`.
+The complete list of apps installed in the organization. Its value is an empty array (`[]`) until
+the list of apps are loaded.
+
+Each object in the array holds the same keys as `currentApp`.
 
 Example:
 
 ```jsx
 function App() {
-  const { currentApp } = useAragonApi()
+  const { installedApps } = useAragonApi()
   return (
-    <div>{currentApp.appAddress}</div>
+    <div>
+      {installedApps.map(app => (
+        <div>{app.appAddress}</div>
+      ))}
+    </div>
   )
 }
 ```
@@ -194,10 +193,6 @@ Call this function to display the Aragon menu, when hidden automatically. This s
 
 This Hook returns the same data as the `api` entry from the `useAragonApi()` hook.
 
-### useApps()
-
-This Hook returns the same data as the `apps` entry from the `useAragonApi()` hook.
-
 ### useAppState()
 
 This Hook returns the same data as the `appState` entry from the `useAppState()` hook.
@@ -206,6 +201,10 @@ This Hook returns the same data as the `appState` entry from the `useAppState()`
 
 This Hook returns the same data as the `connectedAccount` entry from the `useAragonApi()` hook.
 
+### useInstalledApps()
+
+This Hook returns the same data as the `installedApps` entry from the `useAragonApi()` hook.
+
 ### useMenuButton()
 
 This Hook returns an array containing the `displayMenuButton` and the `requestMenu` entries from the `useAragonApi()` hook, in that order.

packages/aragon-api-react/src/index.js

@@ -24,9 +24,9 @@ function AragonApi({
 }) {
   const [api, setApi] = useState(null)
   const [appState, setAppState] = useState(null)
-  const [apps, setApps] = useState([])
-  const [currentApp, setCurrentApp] = useState(null)
   const [connectedAccount, setConnectedAccount] = useState('')
+  const [currentApp, setCurrentApp] = useState(null)
+  const [installedApps, setInstalledApps] = useState([])
   const [network, setNetwork] = useState(null)
   const [displayMenuButton, setDisplayMenuButton] = useState(false)
 
@@ -72,15 +72,16 @@ function AragonApi({
             .accounts()
             .subscribe(accounts => setConnectedAccount(accounts[0] || '')),
 
-          // apps
-          api.getApps().subscribe(apps => setApps(apps || [])),
-
           // network
           api.network().subscribe(network => setNetwork(network || null)),
+
+          // installed apps
+          api.installedApps().subscribe(apps => setApps(apps || [])),
+
         ]
 
         api
-          .getCurrentApp()
+          .currentApp()
           .toPromise()
           .then(currentApp => {
             if (!cancelled) {
@@ -110,9 +111,9 @@ function AragonApi({
     {
       value: {
         api,
-        apps,
-        currentApp,
         connectedAccount,
+        currentApp,
+        installedapps,
         network,
         displayMenuButton,
 
@@ -147,10 +148,10 @@ const useAragonApi = () => ({
 // direct access hooks
 const useApi = () => getAragonApiData('useApi()').api
 const useAppState = () => getAragonApiData('useAppState()').appState
-const useApps = () => getAragonApiData('useApps()').apps
 const useConnectedAccount = () =>
   getAragonApiData('useConnectedAccount()').connectedAccount
 const useCurrentApp = () => getAragonApiData('useCurrentApp()').currentApp
+const useInstalledApps = () => getAragonApiData('useInstalledApps()').installedApps
 const useMenuButton = () => {
   const { displayMenuButton, requestMenu } = getAragonApiData('useMenuButton()')
   return [displayMenuButton, requestMenu]
@@ -162,10 +163,10 @@ export {
   AragonApi,
   useApi,
   useAppState,
-  useApps,
   useAragonApi,
   useConnectedAccount,
   useCurrentApp,
+  useInstalledApps,
   useMenuButton,
   useNetwork,
 }