load all metadata client-side only

gatsby-node.js

@@ -1,5 +1,3 @@
-const path = require('path')
-
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     node: {
@@ -9,60 +7,6 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   })
 }
 
-exports.createPages = async ({ graphql, actions }) => {
-  const { createPage } = actions
-
-  // Create pages for all assets
-  const assetDetailsTemplate = path.resolve(
-    'src/components/templates/AssetDetails.tsx'
-  )
-
-  const result = await graphql(`
-    query {
-      allOceanAsset {
-        edges {
-          node {
-            did
-            main {
-              type
-              name
-              dateCreated
-              author
-              license
-              price
-              datePublished
-              files {
-                contentType
-                index
-              }
-            }
-            additionalInformation {
-              description
-              deliveryType
-              termsAndConditions
-              access
-            }
-          }
-        }
-      }
-    }
-  `)
-
-  if (result.errors) {
-    throw result.errors
-  }
-
-  await result.data.allOceanAsset.edges.forEach(({ node }) => {
-    const path = `/asset/${node.did}`
-
-    createPage({
-      path,
-      component: assetDetailsTemplate,
-      context: { did: node.did }
-    })
-  })
-}
-
 exports.onCreatePage = async ({ page, actions }) => {
   const { createPage } = actions
   // page.matchPath is a special key that's used for matching pages

src/@types/MetaData.d.ts

@@ -34,8 +34,3 @@ export interface MetaDataPublishForm {
 export interface ServiceMetaDataMarket extends ServiceMetadata {
   attributes: MetaDataMarket
 }
-
-// type for assets pulled into GraphQL
-export interface OceanAsset extends MetaDataMarket {
-  did: DID
-}

src/components/pages/Home.module.css

@@ -1,3 +1,9 @@
 .grid {
   composes: assetList from '../organisms/AssetList.module.css';
+  margin-top: calc(var(--spacer) * 2);
+}
+
+.empty {
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
 }

src/components/pages/Home.tsx

@@ -1,29 +1,50 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import SearchBar from '../molecules/SearchBar'
-import shortid from 'shortid'
-import { OceanAsset } from '../../@types/MetaData'
+import { ServiceMetaDataMarket } from '../../@types/MetaData'
 import AssetTeaser from '../molecules/AssetTeaser'
 import styles from './Home.module.css'
+import axios from 'axios'
+import { oceanConfig } from '../../../app.config'
+import { DDO } from '@oceanprotocol/lib'
+
+export default function HomePage(): ReactElement {
+  const [assets, setAssets] = useState<DDO[]>()
+
+  useEffect(() => {
+    async function getAllAssets() {
+      try {
+        const result = await axios(
+          `${oceanConfig.metadataStoreUri}/api/v1/aquarius/assets/ddo`
+        )
+        setAssets(result.data)
+      } catch (error) {
+        console.error(error.message)
+      }
+    }
+    getAllAssets()
+  }, [])
 
-export default function HomePage({
-  assets
-}: {
-  assets: {
-    node: OceanAsset
-  }[]
-}): ReactElement {
   return (
     <>
       <SearchBar large />
+
       {assets && (
         <div className={styles.grid}>
-          {assets.map(({ node }: { node: OceanAsset }) => (
-            <AssetTeaser
-              key={shortid.generate()}
-              did={node.did}
-              metadata={node}
-            />
-          ))}
+          {assets.length ? (
+            assets.map((ddo: DDO) => {
+              const {
+                attributes
+              }: ServiceMetaDataMarket = ddo.findServiceByType('metadata')
+
+              return (
+                <AssetTeaser key={ddo.id} did={ddo.id} metadata={attributes} />
+              )
+            })
+          ) : (
+            <div className={styles.empty}>
+              No data sets found in {oceanConfig.metadataStoreUri}
+            </div>
+          )}
         </div>
       )}
     </>

src/components/templates/AssetDetails.tsx

@@ -1,41 +0,0 @@
-import React, { ReactElement } from 'react'
-import { PageProps, graphql } from 'gatsby'
-import Layout from '../Layout'
-import AssetContent from '../organisms/AssetContent'
-
-export default function AssetDetailsTemplate(props: PageProps): ReactElement {
-  const { oceanAsset } = props.data as any
-
-  return (
-    <Layout title={oceanAsset.main.name} uri={props.path}>
-      <AssetContent did={oceanAsset.did} metadata={oceanAsset} />
-    </Layout>
-  )
-}
-
-export const templateQuery = graphql`
-  query OceanAssetByDid($did: String!) {
-    oceanAsset(did: { eq: $did }) {
-      did
-      main {
-        type
-        name
-        dateCreated
-        author
-        license
-        price
-        datePublished
-        files {
-          index
-          contentType
-        }
-      }
-      additionalInformation {
-        description
-        deliveryType
-        termsAndConditions
-        access
-      }
-    }
-  }
-`

src/pages/asset/index.tsx

@@ -7,6 +7,7 @@ import { MetaDataMarket, ServiceMetaDataMarket } from '../../@types/MetaData'
 import { MetadataStore, Logger } from '@oceanprotocol/lib'
 import { oceanConfig } from '../../../app.config'
 import Alert from '../../components/atoms/Alert'
+import { useMetadata } from '@oceanprotocol/react'
 
 export default function AssetRoute(props: PageProps): ReactElement {
   const [metadata, setMetadata] = useState<MetaDataMarket>()
@@ -51,7 +52,11 @@ export default function AssetRoute(props: PageProps): ReactElement {
   ) : did && metadata ? (
     <Layout title={title} uri={props.location.pathname}>
       <Router basepath="/asset">
-        <AssetContent did={did} metadata={metadata} path="/asset/:did" />
+        <AssetContent
+          did={did}
+          metadata={metadata as MetaDataMarket}
+          path="/asset/:did"
+        />
       </Router>
     </Layout>
   ) : (

src/pages/index.tsx

@@ -1,40 +1,15 @@
 import React, { ReactElement } from 'react'
-import { PageProps, graphql } from 'gatsby'
+import { PageProps } 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 assets={assets} />
+      <PageHome />
     </Layout>
   )
 }
-
-export const pageQuery = graphql`
-  query PageHomeQuery {
-    allOceanAsset {
-      edges {
-        node {
-          did
-          main {
-            type
-            name
-            dateCreated
-            author
-            price
-            datePublished
-          }
-          additionalInformation {
-            description
-            access
-          }
-        }
-      }
-    }
-  }
-`

tests/unit/context/Web3Provider.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { Web3Provider } from '@oceanprotocol/react'
-
-describe('Web3Provider', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<Web3Provider>Children</Web3Provider>)
-    expect(container).toHaveTextContent('Children')
-  })
-})