prototype client-only route for asset details

gatsby-node.js

@@ -29,13 +29,29 @@ exports.createPages = async ({ actions, reporter }) => {
   const assetDetailsTemplate = path.resolve(
     `src/components/templates/AssetDetails/index.tsx`
   )
-  assets.forEach((did) => {
+
+  await assets.forEach(async (did) => {
     const path = `/asset/${did}`
 
-    createPage({
+    await createPage({
       path,
       component: assetDetailsTemplate,
       context: { did }
     })
   })
 }
+
+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/)
+
+  if (handleClientSideOnly) {
+    page.matchPath = '/asset/*'
+
+    // Update the page.
+    createPage(page)
+  }
+}

src/components/templates/AssetDetails/AssetContent.module.css

@@ -17,11 +17,6 @@
   }
 }
 
-.sectionTitle {
-  font-size: var(--font-size-large);
-  color: var(--color-secondary);
-}
-
 .meta {
   margin-bottom: var(--spacer);
   color: var(--color-secondary);
@@ -32,14 +27,11 @@
   margin-bottom: 0;
 }
 
-.loaderWrap {
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 70vh;
+.sectionTitle {
+  font-size: var(--font-size-large);
+  color: var(--color-secondary);
 }
+
 .buttonGroup {
   margin-top: var(--spacer);
   margin-bottom: var(--spacer);

src/components/templates/AssetDetails/AssetContent.tsx

@@ -0,0 +1,103 @@
+import { MetaDataMarket } from '../../../@types/MetaData'
+import React, { ReactElement } from 'react'
+import { useOcean } from '@oceanprotocol/react'
+import Time from '../../atoms/Time'
+import { Link } from 'gatsby'
+import Markdown from '../../atoms/Markdown'
+import Tags from '../../atoms/Tags'
+import MetaFull from './MetaFull'
+import Compute from '../../organisms/Compute'
+import Consume from '../../organisms/Consume'
+import MetaSecondary from './MetaSecondary'
+import styles from './AssetContent.module.css'
+
+export interface AssetContentProps {
+  metadata: MetaDataMarket
+  did: string
+  path?: string
+}
+
+export default function AssetContent({
+  metadata,
+  did
+}: AssetContentProps): ReactElement {
+  const { ocean, balanceInOcean } = useOcean()
+  const { datePublished } = metadata.main
+  const {
+    description,
+    copyrightHolder,
+    categories,
+    tags,
+    access
+  } = metadata.additionalInformation
+  const isCompute = access && access === 'Compute'
+
+  // const { curation } = metadata
+
+  // const { getCuration } = useMetadata()
+  // const [rating, setRating] = useState<number>(curation ? curation.rating : 0)
+  // const [numVotes, setNumVotes] = useState<number>(
+  //   curation ? curation.numVotes : 0
+  // )
+
+  // const onVoteUpdate = async () => {
+  //   const { rating, numVotes } = await getCuration(did)
+
+  //   setRating(rating)
+  //   setNumVotes(numVotes)
+  // }
+
+  return (
+    <article className={styles.grid}>
+      <div>
+        <aside className={styles.meta}>
+          <p>
+            <span title="Copyright Holder">{copyrightHolder}</span> -{' '}
+            {datePublished && <Time date={datePublished} />}
+          </p>
+          {categories && (
+            <p>
+              <Link to={`/search?categories=["${categories[0]}"]`}>
+                <a>{categories[0]}</a>
+              </Link>
+            </p>
+          )}
+          {/* <Rating curation={{ rating, numVotes }} readonly /> */}
+        </aside>
+
+        <h2 className={styles.sectionTitle}>Summary</h2>
+        <Markdown text={description || ''} />
+
+        {tags && tags.length > 0 && <Tags items={tags} />}
+
+        <MetaFull did={did} metadata={metadata} />
+        <div className={styles.buttonGroup}>
+          {/* <EditAction
+              ddo={ddo}
+              ocean={ocean}
+              account={account}
+              refetchMetadata={refetchMetadata}
+            /> */}
+          {/* <DeleteAction ddo={ddo} /> */}
+        </div>
+      </div>
+      <div>
+        <div className={styles.sticky}>
+          {isCompute ? (
+            <Compute
+              did={did}
+              metadata={metadata}
+              ocean={ocean}
+              balance={balanceInOcean}
+            />
+          ) : (
+            <Consume did={did} metadata={metadata} />
+          )}
+
+          {/* <RatingAction did={did} onVote={onVoteUpdate} /> */}
+          <MetaSecondary metadata={metadata} />
+        </div>
+      </div>
+    </article>
+  )
+}

src/components/templates/AssetDetails/index.tsx

@@ -1,111 +1,13 @@
 import React, { useState, ReactElement, useEffect } from 'react'
 import { Aquarius, Logger } from '@oceanprotocol/squid'
-import { Link, PageProps } from 'gatsby'
+import { PageProps } from 'gatsby'
 import { config } from '../../../config/ocean'
 import Layout from '../../../components/Layout'
 import { MetaDataMarket, ServiceMetaDataMarket } from '../../../@types/MetaData'
-import Time from '../../atoms/Time'
-import Markdown from '../../atoms/Markdown'
-import Consume from '../../organisms/Consume'
-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 styles from './index.module.css'
-import { useMetadata, useOcean } from '@oceanprotocol/react'
-import Compute from '../../organisms/Compute'
-// import DeleteAction from '../../molecules/DeleteAsset'
+import AssetContent from './AssetContent'
 
-const AssetDetailsPageMeta = ({
-  metadata,
-  did
-}: {
-  metadata: MetaDataMarket
-  did: string
-}) => {
-  const { ocean, balanceInOcean } = useOcean()
-  const { datePublished } = metadata.main
-  const {
-    description,
-    copyrightHolder,
-    categories,
-    tags,
-    access
-  } = metadata.additionalInformation
-  const { curation } = metadata
-
-  const { getCuration } = useMetadata()
-  const [rating, setRating] = useState<number>(curation ? curation.rating : 0)
-  const [numVotes, setNumVotes] = useState<number>(
-    curation ? curation.numVotes : 0
-  )
-  const isCompute = access && access === 'Compute'
-
-  const onVoteUpdate = async () => {
-    const { rating, numVotes } = await getCuration(did)
-
-    setRating(rating)
-    setNumVotes(numVotes)
-  }
-
-  return (
-    <>
-      <div>
-        <aside className={styles.meta}>
-          <p>
-            <span title="Copyright Holder">{copyrightHolder}</span> -{' '}
-            {datePublished && <Time date={datePublished} />}
-          </p>
-          {categories && (
-            <p>
-              <Link to={`/search?categories=["${categories[0]}"]`}>
-                <a>{categories[0]}</a>
-              </Link>
-            </p>
-          )}
-          {/* <Rating curation={{ rating, numVotes }} readonly /> */}
-        </aside>
-
-        <h2 className={styles.sectionTitle}>Summary</h2>
-        <Markdown text={description || ''} />
-
-        {tags && tags.length > 0 && <Tags items={tags} />}
-
-        <MetaFull did={did} metadata={metadata} />
-        <div className={styles.buttonGroup}>
-          {/* <EditAction
-            ddo={ddo}
-            ocean={ocean}
-            account={account}
-            refetchMetadata={refetchMetadata}
-          /> */}
-          {/* <DeleteAction ddo={ddo} /> */}
-        </div>
-      </div>
-      <div>
-        <div className={styles.sticky}>
-          {isCompute ? (
-            <Compute
-              did={did}
-              metadata={metadata}
-              ocean={ocean}
-              balance={balanceInOcean}
-            />
-          ) : (
-            <Consume did={did} metadata={metadata} />
-          )}
-
-          {/* <RatingAction did={did} onVote={onVoteUpdate} /> */}
-          <MetaSecondary metadata={metadata} />
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default function AssetDetailsPage(props: PageProps): ReactElement {
+export default function AssetDetailsTemplate(props: PageProps): ReactElement {
   const [metadata, setMetadata] = useState<MetaDataMarket>()
   const [title, setTitle] = useState<string>()
   const [error, setError] = useState<string>()
@@ -145,9 +47,7 @@ export default function AssetDetailsPage(props: PageProps): ReactElement {
     </Layout>
   ) : did && metadata ? (
     <Layout title={title} uri={props.path}>
-      <article className={styles.grid}>
-        <AssetDetailsPageMeta did={did} metadata={metadata} />
-      </article>
+      <AssetContent did={did} metadata={metadata} />
     </Layout>
   ) : null
 }

src/pages/asset/index.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect, ReactElement } from 'react'
+import { Router } from '@reach/router'
+import AssetContent from '../../components/templates/AssetDetails/AssetContent'
+import Layout from '../../components/Layout'
+import { PageProps } from 'gatsby'
+import { MetaDataMarket, ServiceMetaDataMarket } from '../../@types/MetaData'
+import { Aquarius, Logger } from '@oceanprotocol/squid'
+import { config } from '../../config/ocean'
+import { Alert } from '../../components/atoms/Alert'
+
+export default function AssetRoute(props: PageProps): ReactElement {
+  const [metadata, setMetadata] = useState<MetaDataMarket>()
+  const [title, setTitle] = useState<string>()
+  const [error, setError] = useState<string>()
+
+  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 ? (
+    <Layout title={title} noPageHeader uri={props.path}>
+      <Alert title={title} text={error} state="error" />
+    </Layout>
+  ) : did && metadata ? (
+    <Layout title={title} uri={props.path}>
+      <Router basepath="/asset">
+        <AssetContent did={did} metadata={metadata} path="/asset/:did" />
+      </Router>
+    </Layout>
+  ) : null
+}