diff --git a/gatsby-config.js b/gatsby-config.js index 5f8d5ead8..bb34711a6 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -28,6 +28,7 @@ module.exports = { path: `${__dirname}/node_modules/@oceanprotocol/art/` } }, + 'gatsby-source-ocean', { resolve: 'gatsby-plugin-sharp', options: { diff --git a/gatsby-node.js b/gatsby-node.js index b7901aed2..d697e86d1 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,5 +1,4 @@ const path = require('path') -const axios = require('axios') // const { config } = require('./src/config/ocean') exports.onCreateWebpackConfig = ({ actions }) => { @@ -11,47 +10,70 @@ exports.onCreateWebpackConfig = ({ actions }) => { }) } -exports.createPages = async ({ actions, reporter }) => { +exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions - // Query for all assets to use in creating pages. - const result = await axios( - `https://aquarius.marketplace.oceanprotocol.com/api/v1/aquarius/assets` - ) - const assets = result.data.ids - // Handle errors + // Create pages for all assets + const assetDetailsTemplate = path.resolve( + 'src/components/templates/AssetDetails/index.tsx' + ) + + const result = await graphql(` + query { + allAsset { + edges { + node { + did + main { + type + name + dateCreated + author + license + price + datePublished + files { + contentType + index + } + } + additionalInformation { + description + deliveryType + termsAndConditions + access + } + } + } + } + } + `) + if (result.errors) { - reporter.panicOnBuild(`Error while querying Aquarius for all assets.`) - return + throw result.errors } - // Create pages for each DID - const assetDetailsTemplate = path.resolve( - `src/components/templates/AssetDetails/index.tsx` - ) + await result.data.allAsset.edges.forEach(({ node }) => { + const path = `/asset/${node.did}` - await assets.forEach(async (did) => { - const path = `/asset/${did}` - - await createPage({ + createPage({ path, component: assetDetailsTemplate, - context: { did } + context: { did: node.did } }) }) } -exports.onCreatePage = async ({ page, actions }) => { - const { createPage } = actions +// exports.onCreatePage = async ({ page, actions }) => { +// const { createPage } = actions +// // page.matchPath is a special key that's used for matching pages +// // only on the client. +// const handleClientSideOnly = page.path.match(/^\/asset/) - // page.matchPath is a special key that's used for matching pages - // only on the client. - const handleClientSideOnly = page.path.match(/^\/asset/) +// if (handleClientSideOnly) { +// page.matchPath = '/asset/*' - if (handleClientSideOnly) { - page.matchPath = '/asset/*' - - // Update the page. - createPage(page) - } -} +// // Update the page. +// createPage(page) +// } +// } diff --git a/plugins/gatsby-source-ocean/gatsby-node.js b/plugins/gatsby-source-ocean/gatsby-node.js new file mode 100644 index 000000000..d2f011a5c --- /dev/null +++ b/plugins/gatsby-source-ocean/gatsby-node.js @@ -0,0 +1,46 @@ +const axios = require('axios') + +exports.sourceNodes = async ({ + actions, + createNodeId, + createContentDigest +}) => { + const { createNode } = actions + + // Query for all assets to use in creating pages. + const result = await axios( + `https://aquarius.marketplace.oceanprotocol.com/api/v1/aquarius/assets` + ) + + for (let i = 0; i < result.data.ids.length; i++) { + const did = result.data.ids[i] + + const metadataResult = await axios( + `https://aquarius.marketplace.oceanprotocol.com/api/v1/aquarius/assets/metadata/${did}` + ) + + const metadata = { + did, + ...metadataResult.data.attributes + } + + const nodeMeta = { + id: createNodeId(did), + parent: null, + children: [], + internal: { + type: 'Asset', + mediaType: 'application/json', + content: JSON.stringify(metadata), + contentDigest: createContentDigest(metadata) + } + } + + const node = { + ...metadata, + ...nodeMeta + } + + await createNode(node) + } +} diff --git a/plugins/gatsby-source-ocean/package.json b/plugins/gatsby-source-ocean/package.json new file mode 100644 index 000000000..5201f5d65 --- /dev/null +++ b/plugins/gatsby-source-ocean/package.json @@ -0,0 +1,3 @@ +{ + "name": "gatsby-source-ocean" +} diff --git a/src/components/templates/AssetDetails/index.tsx b/src/components/templates/AssetDetails/index.tsx index 75f0e6b73..8a2e05c28 100644 --- a/src/components/templates/AssetDetails/index.tsx +++ b/src/components/templates/AssetDetails/index.tsx @@ -1,53 +1,41 @@ -import React, { useState, ReactElement, useEffect } from 'react' -import { Aquarius, Logger } from '@oceanprotocol/squid' -import { PageProps } from 'gatsby' -import { config } from '../../../config/ocean' +import React, { ReactElement } from 'react' +import { PageProps, graphql } from 'gatsby' import Layout from '../../../components/Layout' -import { MetaDataMarket, ServiceMetaDataMarket } from '../../../@types/MetaData' -import { Alert } from '../../atoms/Alert' import AssetContent from './AssetContent' export default function AssetDetailsTemplate(props: PageProps): ReactElement { - const [metadata, setMetadata] = useState() - const [title, setTitle] = useState() - const [error, setError] = useState() + const { asset } = props.data as any - const { did } = props.pageContext as { did: string } + return ( + + + + ) +} - useEffect(() => { - async function init() { - try { - const aquarius = new Aquarius(config.aquariusUri, Logger) - const ddo = await aquarius.retrieveDDO(did) - - if (!ddo) { - setTitle('Could not retrieve asset') - setError('The DDO was not found in Aquarius.') - return +export const templateQuery = graphql` + query AssetByDid($did: String!) { + asset(did: { eq: $did }) { + did + main { + type + name + dateCreated + author + license + price + datePublished + files { + index + contentType } - - const { attributes }: ServiceMetaDataMarket = ddo.findServiceByType( - 'metadata' - ) - - setTitle(attributes.main.name) - console.log(attributes) - setMetadata(attributes) - } catch (error) { - setTitle('Error retrieving asset') - setError(error.message) + } + additionalInformation { + description + deliveryType + termsAndConditions + access } } - init() - }, []) - - return error ? ( - - - - ) : did && metadata ? ( - - - - ) : null -} + } +` diff --git a/src/pages/asset/index.tsx b/src/pages/asset/index.tsx index 9ec03ffcc..6ce312f48 100644 --- a/src/pages/asset/index.tsx +++ b/src/pages/asset/index.tsx @@ -13,7 +13,7 @@ export default function AssetRoute(props: PageProps): ReactElement { const [title, setTitle] = useState() const [error, setError] = useState() - const { did } = props.pageContext as { did: string } + const did = props.location.pathname.split('/')[2] useEffect(() => { async function init() { @@ -32,7 +32,6 @@ export default function AssetRoute(props: PageProps): ReactElement { ) setTitle(attributes.main.name) - console.log(attributes) setMetadata(attributes) } catch (error) { setTitle('Error retrieving asset') @@ -43,14 +42,18 @@ export default function AssetRoute(props: PageProps): ReactElement { }, []) return error ? ( - + ) : did && metadata ? ( - + - ) : null + ) : ( + + Loading... + + ) }