From af62e9f5d48c29fc86ff9f39f2959bf397a4dbed Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 1 Jul 2020 17:11:45 +0200 Subject: [PATCH] generate pages for all existing assets, make asset details view work for them --- content/site.json | 2 +- gatsby-node.js | 33 +++++ src/@types/MetaData.d.ts | 21 +-- src/components/Layout.tsx | 15 +-- src/components/atoms/Seo.tsx | 10 +- src/components/organisms/Compute.tsx | 22 ++-- src/components/organisms/Consume.tsx | 29 +++-- .../templates/AssetDetails/MetaFull.tsx | 23 ++-- .../templates/AssetDetails/MetaSecondary.tsx | 49 ++----- .../templates/AssetDetails/index.tsx | 122 ++++++++++-------- src/pages/history.tsx | 2 +- src/pages/index.tsx | 6 +- src/pages/publish.tsx | 2 +- src/pages/search.tsx | 2 +- 14 files changed, 169 insertions(+), 169 deletions(-) diff --git a/content/site.json b/content/site.json index 8cc1095ec..0845ea8a5 100644 --- a/content/site.json +++ b/content/site.json @@ -2,7 +2,7 @@ "site": { "siteTitle": "Ocean Market", "siteTagline": "A marketplace to find and publish open data sets in the Ocean Network.", - "siteUrl": "https://market.oceanprotocol.now.sh/", + "siteUrl": "https://market.oceanprotocol.now.sh", "siteIcon": "node_modules/@oceanprotocol/art/logo/favicon-white.png", "siteImage": "../src/images/share.png", "copyright": "All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)", diff --git a/gatsby-node.js b/gatsby-node.js index 7a4b3a3d1..47b31c450 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,3 +1,7 @@ +const path = require('path') +const axios = require('axios') +// const { config } = require('./src/config/ocean') + exports.onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ node: { @@ -6,3 +10,32 @@ exports.onCreateWebpackConfig = ({ actions }) => { } }) } + +exports.createPages = async ({ actions, reporter }) => { + const { createPage } = actions + // Query for markdown nodes 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 + if (result.errors) { + reporter.panicOnBuild(`Error while querying Aquarius for all assets.`) + return + } + + // Create pages for each DID + const assetDetailsTemplate = path.resolve( + `src/components/templates/AssetDetails/index.tsx` + ) + assets.forEach((did) => { + const path = `/asset/${did}` + + createPage({ + path, + component: assetDetailsTemplate, + context: { did } + }) + }) +} diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts index 6604a7187..b8b00df9e 100644 --- a/src/@types/MetaData.d.ts +++ b/src/@types/MetaData.d.ts @@ -1,15 +1,5 @@ -import { MetaData, AdditionalInformation, Curation } from '@oceanprotocol/squid' - -declare type DeliveryType = 'files' | 'api' | 'subscription' - -declare type Granularity = - | 'hourly' - | 'daily' - | 'weekly' - | 'monthly' - | 'annually' - | 'Not updated periodically' - | '' +import { MetaData, AdditionalInformation } from '@oceanprotocol/squid' +import { ServiceMetadata } from '@oceanprotocol/squid/dist/node/ddo/Service' export interface Sample { name: string @@ -21,14 +11,15 @@ export declare type AccessType = 'Download' | 'Compute' export interface AdditionalInformationMarket extends AdditionalInformation { description: string links?: Sample[] // redefine existing key, cause not specific enough in Squid - deliveryType: DeliveryType termsAndConditions: boolean dateRange?: [string, string] - supportName?: string - supportEmail?: string access: AccessType } export interface MetaDataMarket extends MetaData { additionalInformation: AdditionalInformationMarket } + +export interface ServiceMetaDataMarket extends ServiceMetadata { + attributes: MetaDataMarket +} diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 0c7cb7b15..0003c0ffa 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -10,18 +10,18 @@ import { config } from '../config/ocean' export interface LayoutProps { children: ReactNode - title?: string + title: string + uri: string description?: string noPageHeader?: boolean - location?: Location } export default function Layout({ children, title, + uri, description, - noPageHeader, - location + noPageHeader }: LayoutProps): ReactElement { return ( @@ -33,12 +33,7 @@ export default function Layout({ - +
diff --git a/src/components/atoms/Seo.tsx b/src/components/atoms/Seo.tsx index e2c02c766..5c415f3d0 100644 --- a/src/components/atoms/Seo.tsx +++ b/src/components/atoms/Seo.tsx @@ -1,18 +1,16 @@ -import React from 'react' +import React, { ReactElement } from 'react' import { Helmet } from 'react-helmet' import { useSiteMetadata } from '../../hooks/useSiteMetadata' export default function Seo({ title, description, - uri, - location + uri }: { title?: string description?: string uri: string - location: Location -}) { +}): ReactElement { const { siteTitle, siteTagline, siteUrl, siteImage } = useSiteMetadata() // Remove trailing slash from all URLs @@ -37,7 +35,7 @@ export default function Seo({ - + ) : ( - ) diff --git a/src/components/templates/AssetDetails/MetaFull.tsx b/src/components/templates/AssetDetails/MetaFull.tsx index f5baf2c07..542271199 100644 --- a/src/components/templates/AssetDetails/MetaFull.tsx +++ b/src/components/templates/AssetDetails/MetaFull.tsx @@ -1,21 +1,20 @@ -import React from 'react' -import { DDO } from '@oceanprotocol/squid' -import { MetaDataMarket } from '../../../@types/MetaData' +import React, { ReactElement } from 'react' import Time from '../../atoms/Time' import MetaItem from './MetaItem' import styles from './MetaFull.module.css' +import { MetaDataMarket } from '../../../@types/MetaData' export default function MetaFull({ - ddo, - attributes + did, + metadata }: { - ddo: DDO | undefined - attributes: MetaDataMarket -}) { - const { dateCreated, author, license } = attributes.main + did: string + metadata: MetaDataMarket +}): ReactElement { + const { dateCreated, author, license } = metadata.main let dateRange - if (attributes && attributes.additionalInformation) { - ;({ dateRange } = attributes.additionalInformation) + if (metadata && metadata.additionalInformation) { + ;({ dateRange } = metadata.additionalInformation) } // In practice dateRange will always be defined, but in the rare case it isn't @@ -43,7 +42,7 @@ export default function MetaFull({ } /> - {ddo?.id}} /> + {did}} /> ) } diff --git a/src/components/templates/AssetDetails/MetaSecondary.tsx b/src/components/templates/AssetDetails/MetaSecondary.tsx index 00a052cc8..4f1cc4491 100644 --- a/src/components/templates/AssetDetails/MetaSecondary.tsx +++ b/src/components/templates/AssetDetails/MetaSecondary.tsx @@ -1,20 +1,18 @@ -import React from 'react' +import React, { ReactElement } from 'react' import shortid from 'shortid' -import { MetaDataMarket } from '../../../@types/MetaData' import { ListItem } from '../../atoms/Lists' -import { refundPolicy, assetTerms } from '../../../../site.config' import MetaItem from './MetaItem' import styles from './MetaSecondary.module.css' +import { MetaDataMarket } from '../../../@types/MetaData' export default function MetaSecondary({ - attributes + metadata }: { - attributes: MetaDataMarket -}) { - const { price } = attributes.main - let links, supportName, supportEmail - if (attributes && attributes.additionalInformation) { - ;({ links, supportName, supportEmail } = attributes.additionalInformation) + metadata: MetaDataMarket +}): ReactElement { + let links + if (metadata && metadata.additionalInformation) { + ;({ links } = metadata.additionalInformation) } return ( @@ -35,37 +33,6 @@ export default function MetaSecondary({ /> )} - {(supportName || supportEmail) && ( - - {supportName &&

{supportName}

} - {supportEmail &&

{supportEmail}

} - - } - /> - )} - {price !== '0' && ( - - {refundPolicy.map((item) => ( - {item} - ))} - - } - /> - )} - - {assetTerms.map((item) => ( - - ))} ) } diff --git a/src/components/templates/AssetDetails/index.tsx b/src/components/templates/AssetDetails/index.tsx index 39884bd74..c182a0756 100644 --- a/src/components/templates/AssetDetails/index.tsx +++ b/src/components/templates/AssetDetails/index.tsx @@ -1,8 +1,9 @@ -import React, { useState } from 'react' -import { DDO } from '@oceanprotocol/squid' -import { Link } from 'gatsby' +import React, { useState, ReactElement, useEffect } from 'react' +import { Aquarius, Logger } from '@oceanprotocol/squid' +import { Link, PageProps } from 'gatsby' +import { config } from '../../../config/ocean' import Layout from '../../../components/Layout' -import { MetaDataMarket } from '../../../@types/MetaData' +import { MetaDataMarket, ServiceMetaDataMarket } from '../../../@types/MetaData' import Time from '../../atoms/Time' import Markdown from '../../atoms/Markdown' import Consume from '../../organisms/Consume' @@ -10,39 +11,30 @@ import Tags from '../../atoms/Tags' import { Alert } from '../../atoms/Alert' import MetaFull from './MetaFull' import MetaSecondary from './MetaSecondary' -import Rating from '../../atoms/Rating' -import RatingAction from './RatingAction' +// import Rating from '../../atoms/Rating' +// import RatingAction from './RatingAction' import styles from './index.module.css' import { useMetadata, useOcean } from '@oceanprotocol/react' import Compute from '../../organisms/Compute' -import DeleteAction from '../../molecules/DeleteAsset' - -export declare type AssetDetailsPageProps = { - title: string - ddo?: DDO - attributes?: MetaDataMarket - error?: string -} +// import DeleteAction from '../../molecules/DeleteAsset' const AssetDetailsPageMeta = ({ - attributes, - ddo + metadata, + did }: { - attributes: MetaDataMarket - ddo: DDO + metadata: MetaDataMarket + did: string }) => { - if (!attributes) return null - const { ocean, balanceInOcean } = useOcean() - const { datePublished } = attributes.main + const { datePublished } = metadata.main const { description, copyrightHolder, categories, tags, access - } = attributes.additionalInformation - const { curation } = attributes + } = metadata.additionalInformation + const { curation } = metadata const { getCuration } = useMetadata() const [rating, setRating] = useState(curation ? curation.rating : 0) @@ -50,8 +42,9 @@ const AssetDetailsPageMeta = ({ curation ? curation.numVotes : 0 ) const isCompute = access && access === 'Compute' + const onVoteUpdate = async () => { - const { rating, numVotes } = await getCuration(ddo.id) + const { rating, numVotes } = await getCuration(did) setRating(rating) setNumVotes(numVotes) @@ -72,7 +65,7 @@ const AssetDetailsPageMeta = ({

)} - + {/* */}

Summary

@@ -80,7 +73,7 @@ const AssetDetailsPageMeta = ({ {tags && tags.length > 0 && } - +
{/* */} - + {/* */}
{isCompute ? ( - + ) : ( - + )} - - + {/* */} +
) } -const AssetDetailsPage = ({ - ddo, - attributes, - title, - error -}: AssetDetailsPageProps) => { - if (error) { - return ( - - - - ) - } +export default function AssetDetailsPage(props: PageProps): ReactElement { + const [metadata, setMetadata] = useState() + const [title, setTitle] = useState() + const [error, setError] = useState() - return ( - + const { did } = props.pageContext as { did: string } + + 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 + } + + const { attributes }: ServiceMetaDataMarket = ddo.findServiceByType( + 'metadata' + ) + + setTitle(attributes.main.name) + console.log(attributes) + setMetadata(attributes) + } catch (error) { + setTitle('Error retrieving asset') + setError(error.message) + } + } + init() + }, []) + + return error ? ( + + + + ) : did && metadata ? ( +
- {attributes && ( - - )} +
- ) + ) : null } - -export default AssetDetailsPage diff --git a/src/pages/history.tsx b/src/pages/history.tsx index a7d215785..b22607685 100644 --- a/src/pages/history.tsx +++ b/src/pages/history.tsx @@ -8,7 +8,7 @@ export default function PageGatsbyHistory(props: PageProps): ReactElement { const { title, description } = content return ( - + ) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7cd72d0b5..169ede960 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -8,11 +8,7 @@ export default function PageGatsbyHome(props: PageProps): ReactElement { const { siteTitle, siteTagline } = useSiteMetadata() return ( - + ) diff --git a/src/pages/publish.tsx b/src/pages/publish.tsx index 1d159005c..0647d9d75 100644 --- a/src/pages/publish.tsx +++ b/src/pages/publish.tsx @@ -8,7 +8,7 @@ export default function PageGatsbyPublish(props: PageProps): ReactElement { const { title, description } = content return ( - + ) diff --git a/src/pages/search.tsx b/src/pages/search.tsx index 347971a82..bbbed7d68 100644 --- a/src/pages/search.tsx +++ b/src/pages/search.tsx @@ -9,7 +9,7 @@ export default function PageGatsbySearch(props: PageProps): ReactElement { const { text, tag } = parsed return ( - + )