From 22440827cafb8ccc4621e49df12b96b1192dd5f0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 15 May 2019 14:32:08 +0200
Subject: [PATCH] output total assets in the marketplace, use new Market
 Provider for it

---
 client/src/components/organisms/Footer.tsx |  9 ++++
 client/src/context/MarketProvider.tsx      | 59 ++++++++++++++++++++++
 client/src/context/UserProvider.tsx        |  5 +-
 client/src/context/index.tsx               |  2 +
 4 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 client/src/context/MarketProvider.tsx

diff --git a/client/src/components/organisms/Footer.tsx b/client/src/components/organisms/Footer.tsx
index 02f147b..24a1c2f 100644
--- a/client/src/components/organisms/Footer.tsx
+++ b/client/src/components/organisms/Footer.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Market } from '../../context'
 import Content from '../atoms/Content'
 import styles from './Footer.module.scss'
 
@@ -6,6 +7,14 @@ import meta from '../../data/meta.json'
 
 const Footer = () => (
     <footer className={styles.footer}>
+        <Market.Consumer>
+            {state =>
+                state.totalAssets > 0 && (
+                    <Content wide>{state.totalAssets} total assets</Content>
+                )
+            }
+        </Market.Consumer>
+
         <Content wide>
             <small>
                 &copy; {new Date().getFullYear()}{' '}
diff --git a/client/src/context/MarketProvider.tsx b/client/src/context/MarketProvider.tsx
new file mode 100644
index 0000000..66bd57b
--- /dev/null
+++ b/client/src/context/MarketProvider.tsx
@@ -0,0 +1,59 @@
+import React, { PureComponent } from 'react'
+import { Logger, Ocean } from '@oceanprotocol/squid'
+import { Market } from '.'
+
+interface MarketProviderProps {
+    ocean: Ocean
+}
+
+interface MarketProviderState {
+    totalAssets: number
+}
+
+export default class MarketProvider extends PureComponent<
+    MarketProviderProps,
+    MarketProviderState
+> {
+    public state = {
+        totalAssets: 0
+    }
+
+    public async componentDidMount() {}
+
+    public async componentDidUpdate(prevProps: any) {
+        // Using ocean prop instead of getting it from context to be able to compare.
+        // Cause there is no `prevContext`.
+        if (prevProps.ocean !== this.props.ocean) {
+            await this.getTotalAssets()
+        }
+    }
+
+    private getTotalAssets = async () => {
+        const searchQuery = {
+            offset: 1,
+            page: 1,
+            query: {
+                price: [-1, 1]
+            },
+            sort: {
+                value: 1
+            }
+        }
+
+        try {
+            const { ocean } = this.props
+            const search = await ocean.aquarius.queryMetadata(searchQuery)
+            this.setState({ totalAssets: search.totalResults })
+        } catch (error) {
+            Logger.error('Error', error.message)
+        }
+    }
+
+    public render() {
+        return (
+            <Market.Provider value={this.state}>
+                {this.props.children}
+            </Market.Provider>
+        )
+    }
+}
diff --git a/client/src/context/UserProvider.tsx b/client/src/context/UserProvider.tsx
index 743975a..fed7138 100644
--- a/client/src/context/UserProvider.tsx
+++ b/client/src/context/UserProvider.tsx
@@ -4,6 +4,7 @@ import { Logger, Ocean, Account } from '@oceanprotocol/squid'
 import { User } from '.'
 import { provideOcean, requestFromFaucet, FaucetResponse } from '../ocean'
 import { nodeHost, nodePort, nodeScheme } from '../config'
+import MarketProvider from './MarketProvider'
 
 const POLL_ACCOUNTS = 1000 // every 1s
 const POLL_NETWORK = POLL_ACCOUNTS * 60 // every 1 min
@@ -271,7 +272,9 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
     public render() {
         return (
             <User.Provider value={this.state}>
-                {this.props.children}
+                <MarketProvider ocean={this.state.ocean}>
+                    {this.props.children}
+                </MarketProvider>
             </User.Provider>
         )
     }
diff --git a/client/src/context/index.tsx b/client/src/context/index.tsx
index 0cdf47d..5bb95ab 100644
--- a/client/src/context/index.tsx
+++ b/client/src/context/index.tsx
@@ -21,3 +21,5 @@ export const User = React.createContext({
     },
     message: ''
 })
+
+export const Market = React.createContext({ totalAssets: 0 })