From 63955639d172dd77c02c266da9956e10b9ad2f45 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 7 Jul 2020 10:07:46 +0200
Subject: [PATCH] get all assets from GraphQL

---
 src/@types/MetaData.d.ts                  |  5 ++++
 src/components/pages/Home.tsx             | 28 +++++++++--------------
 src/components/templates/AssetDetails.tsx |  6 ++---
 src/pages/index.tsx                       | 17 ++++++++++++--
 4 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts
index b8b00df9e..d6782d21a 100644
--- a/src/@types/MetaData.d.ts
+++ b/src/@types/MetaData.d.ts
@@ -23,3 +23,8 @@ export interface MetaDataMarket extends MetaData {
 export interface ServiceMetaDataMarket extends ServiceMetadata {
   attributes: MetaDataMarket
 }
+
+// type for assets pulled into GraphQL
+export interface OceanAsset extends MetaDataMarket {
+  did: DID
+}
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index dcf7f4979..481501a66 100644
--- a/src/components/pages/Home.tsx
+++ b/src/components/pages/Home.tsx
@@ -1,31 +1,25 @@
-import React, { ReactElement, useState, useEffect } from 'react'
+import React, { ReactElement } from 'react'
 import SearchBar from '../molecules/SearchBar'
 import { DID } from '@oceanprotocol/squid'
 import { Link } from 'gatsby'
 import shortid from 'shortid'
-import axios from 'axios'
-import { config } from '../../config/ocean'
-
-export default function HomePage(): ReactElement {
-  const [assets, setAssets] = useState<DID[]>()
-
-  useEffect(() => {
-    async function init() {
-      const result = await axios(`${config.aquariusUri}/api/v1/aquarius/assets`)
-      const assets = result.data.ids
-      setAssets(assets)
-    }
-    init()
-  }, [])
+import { OceanAsset } from '../../@types/MetaData'
 
+export default function HomePage({
+  assets
+}: {
+  assets: {
+    node: OceanAsset
+  }[]
+}): ReactElement {
   return (
     <>
       <SearchBar large />
       {assets && (
         <ul>
-          {assets.map((did: DID) => (
+          {assets.map(({ node }: { node: { did: DID } }) => (
             <li key={shortid.generate()}>
-              <Link to={`/asset/${did}`}>{did}</Link>
+              <Link to={`/asset/${node.did}`}>{node.did}</Link>
             </li>
           ))}
         </ul>
diff --git a/src/components/templates/AssetDetails.tsx b/src/components/templates/AssetDetails.tsx
index 2630eebc4..81708e2b8 100644
--- a/src/components/templates/AssetDetails.tsx
+++ b/src/components/templates/AssetDetails.tsx
@@ -4,11 +4,11 @@ import Layout from '../Layout'
 import AssetContent from '../organisms/AssetContent'
 
 export default function AssetDetailsTemplate(props: PageProps): ReactElement {
-  const { asset } = props.data as any
+  const { oceanAsset } = props.data as any
 
   return (
-    <Layout title={asset.main.name} uri={props.path}>
-      <AssetContent did={asset.did} metadata={asset} />
+    <Layout title={oceanAsset.main.name} uri={props.path}>
+      <AssetContent did={oceanAsset.did} metadata={oceanAsset} />
     </Layout>
   )
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 169ede960..1df752784 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,15 +1,28 @@
 import React, { ReactElement } from 'react'
-import { PageProps } from 'gatsby'
+import { PageProps, graphql } from 'gatsby'
 import PageHome from '../components/pages/Home'
 import { useSiteMetadata } from '../hooks/useSiteMetadata'
 import Layout from '../components/Layout'
 
 export default function PageGatsbyHome(props: PageProps): ReactElement {
   const { siteTitle, siteTagline } = useSiteMetadata()
+  const assets = (props.data as any).allOceanAsset.edges
 
   return (
     <Layout title={siteTitle} description={siteTagline} uri={props.uri}>
-      <PageHome />
+      <PageHome assets={assets} />
     </Layout>
   )
 }
+
+export const pageQuery = graphql`
+  query PageHomeQuery {
+    allOceanAsset {
+      edges {
+        node {
+          did
+        }
+      }
+    }
+  }
+`