From 894f3b39be249049557c263c8e746dd91e9be600 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 15 Jul 2020 11:54:01 +0200 Subject: [PATCH] load all metadata client-side only --- gatsby-node.js | 56 ----------------------- src/@types/MetaData.d.ts | 5 -- src/components/pages/Home.module.css | 6 +++ src/components/pages/Home.tsx | 55 +++++++++++++++------- src/components/templates/AssetDetails.tsx | 41 ----------------- src/pages/asset/index.tsx | 7 ++- src/pages/index.tsx | 29 +----------- tests/unit/context/Web3Provider.test.tsx | 10 ---- 8 files changed, 52 insertions(+), 157 deletions(-) delete mode 100644 src/components/templates/AssetDetails.tsx delete mode 100644 tests/unit/context/Web3Provider.test.tsx diff --git a/gatsby-node.js b/gatsby-node.js index 7980cf5fb..ba31190f0 100644 --- a/gatsby-node.js +++ b/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 diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts index 9717dd88b..7d1e713e9 100644 --- a/src/@types/MetaData.d.ts +++ b/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 -} diff --git a/src/components/pages/Home.module.css b/src/components/pages/Home.module.css index a20445c26..390c99995 100644 --- a/src/components/pages/Home.module.css +++ b/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); } diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx index 1afd2f1b9..7f9b5eab4 100644 --- a/src/components/pages/Home.tsx +++ b/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() + + 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 ( <> + {assets && (
- {assets.map(({ node }: { node: OceanAsset }) => ( - - ))} + {assets.length ? ( + assets.map((ddo: DDO) => { + const { + attributes + }: ServiceMetaDataMarket = ddo.findServiceByType('metadata') + + return ( + + ) + }) + ) : ( +
+ No data sets found in {oceanConfig.metadataStoreUri} +
+ )}
)} diff --git a/src/components/templates/AssetDetails.tsx b/src/components/templates/AssetDetails.tsx deleted file mode 100644 index 81708e2b8..000000000 --- a/src/components/templates/AssetDetails.tsx +++ /dev/null @@ -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 ( - - - - ) -} - -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 - } - } - } -` diff --git a/src/pages/asset/index.tsx b/src/pages/asset/index.tsx index c15f663ae..6a41355a0 100644 --- a/src/pages/asset/index.tsx +++ b/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() @@ -51,7 +52,11 @@ export default function AssetRoute(props: PageProps): ReactElement { ) : did && metadata ? ( - + ) : ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3fa17b19e..169ede960 100644 --- a/src/pages/index.tsx +++ b/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 ( - + ) } - -export const pageQuery = graphql` - query PageHomeQuery { - allOceanAsset { - edges { - node { - did - main { - type - name - dateCreated - author - price - datePublished - } - additionalInformation { - description - access - } - } - } - } - } -` diff --git a/tests/unit/context/Web3Provider.test.tsx b/tests/unit/context/Web3Provider.test.tsx deleted file mode 100644 index 3c5119ad7..000000000 --- a/tests/unit/context/Web3Provider.test.tsx +++ /dev/null @@ -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(Children) - expect(container).toHaveTextContent('Children') - }) -})