WIP

src/components/organisms/AlgorithmContent/index.tsx

@@ -0,0 +1,112 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import Markdown from '../../atoms/Markdown'
+import MetaFull from '../AssetContent/MetaFull'
+import MetaSecondary from '../AssetContent/MetaSecondary'
+import styles from './index.module.css'
+import AssetActions from '../AssetActions'
+import { useUserPreferences } from '../../../providers/UserPreferences'
+import Pricing from '../AssetContent/Pricing'
+import { useOcean } from '@oceanprotocol/react'
+import Bookmark from '../AssetContent/Bookmark'
+import { useAsset } from '../../../providers/Asset'
+import Alert from '../../atoms/Alert'
+import Button from '../../atoms/Button'
+import Edit from '../AssetActions/Edit'
+import DebugOutput from '../../atoms/DebugOutput'
+import MetaMain from '../AssetContent/MetaMain'
+// import EditHistory from './EditHistory'
+
+export interface AlgorithmContentProps {
+  path?: string
+}
+
+const contentQuery = graphql`
+  query ContentQuery {
+    purgatory: allFile(filter: { relativePath: { eq: "purgatory.json" } }) {
+      edges {
+        node {
+          childContentJson {
+            asset {
+              title
+              description
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+export default function AlgorithmContent(
+  props: AlgorithmContentProps
+): ReactElement {
+  const data = useStaticQuery(contentQuery)
+  const content = data.purgatory.edges[0].node.childContentJson.asset
+  const { debug } = useUserPreferences()
+  const { accountId } = useOcean()
+  const { owner, isInPurgatory, purgatoryData } = useAsset()
+  const [showPricing, setShowPricing] = useState(false)
+  const [showEdit, setShowEdit] = useState<boolean>()
+  const { ddo, price, metadata } = useAsset()
+  const isOwner = accountId === owner
+
+  useEffect(() => {
+    if (!price) return
+    setShowPricing(isOwner && price.address === '')
+  }, [isOwner, price])
+
+  function handleEditButton() {
+    // move user's focus to top of screen
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+    setShowEdit(true)
+  }
+
+  return showEdit ? (
+    <Edit setShowEdit={setShowEdit} />
+  ) : (
+    <article className={styles.grid}>
+      <div>
+        {showPricing && <Pricing ddo={ddo} />}
+        <div className={styles.content}>
+          <MetaMain />
+          <Bookmark did={ddo.id} />
+
+          {isInPurgatory ? (
+            <Alert
+              title={content.title}
+              badge={`Reason: ${purgatoryData?.reason}`}
+              text={content.description}
+              state="error"
+            />
+          ) : (
+            <>
+              <Markdown
+                className={styles.description}
+                text={metadata?.additionalInformation?.description || ''}
+              />
+
+              <MetaSecondary />
+
+              {isOwner && (
+                <div className={styles.ownerActions}>
+                  <Button style="text" size="small" onClick={handleEditButton}>
+                    Edit Metadata
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+
+          <MetaFull />
+          {/* <EditHistory /> */}
+          {debug === true && <DebugOutput title="DDO" output={ddo} />}
+        </div>
+      </div>
+
+      <div className={styles.actions}>
+        <AssetActions />
+      </div>
+    </article>
+  )
+}

src/components/templates/PageAlgorithmDetails.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect, ReactElement } from 'react'
+import { Router } from '@reach/router'
+import AssetContent from '../organisms/AssetContent'
+import Page from './Page'
+import Alert from '../atoms/Alert'
+import Loader from '../atoms/Loader'
+import { useAlgorithm } from '../../providers/Algorithm'
+
+export default function PageTemplateAlgorithmDetails({
+  uri
+}: {
+  uri: string
+}): ReactElement {
+  const { ddo, title, error, isInPurgatory } = useAlgorithm()
+  const [pageTitle, setPageTitle] = useState<string>()
+
+  useEffect(() => {
+    if (!ddo || error) {
+      setPageTitle('Could not retrieve asset')
+      return
+    }
+
+    setPageTitle(isInPurgatory ? '' : title)
+  }, [ddo, error, isInPurgatory, title])
+
+  return ddo ? (
+    <>
+      <Page title={pageTitle} uri={uri}>
+        <Router basepath="/algorithm">
+          <AssetContent path=":did" />
+        </Router>
+      </Page>
+    </>
+  ) : error ? (
+    <Page title={pageTitle} noPageHeader uri={uri}>
+      <Alert title={pageTitle} text={error} state="error" />
+    </Page>
+  ) : (
+    <Page title={undefined} uri={uri}>
+      <Loader />
+    </Page>
+  )
+}

src/pages/algorithm/index.tsx

@@ -0,0 +1,19 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import { PageProps } from 'gatsby'
+import PageTemplateAlgorithmDetails from '../../components/templates/PageAlgorithmDetails'
+import AlgorithmProvider from '../../providers/Algorithm'
+
+export default function PageGatsbyAssetDetails(props: PageProps): ReactElement {
+  const [did, setDid] = useState<string>()
+
+  useEffect(() => {
+    console.log('did', props.location.pathname.split('/')[2])
+    setDid(props.location.pathname.split('/')[2])
+  }, [props.location.pathname])
+
+  return (
+    <AlgorithmProvider asset={did}>
+      <PageTemplateAlgorithmDetails uri={props.location.pathname} />
+    </AlgorithmProvider>
+  )
+}

src/providers/Algorithm.tsx

@@ -0,0 +1,205 @@
+import React, {
+  useContext,
+  useState,
+  useEffect,
+  createContext,
+  ReactElement,
+  useCallback,
+  ReactNode
+} from 'react'
+import { Logger, DDO, BestPrice } from '@oceanprotocol/lib'
+import { PurgatoryData } from '@oceanprotocol/lib/dist/node/ddo/interfaces/PurgatoryData'
+import { getDataTokenPrice, useOcean } from '@oceanprotocol/react'
+import getAssetPurgatoryData from '../utils/purgatory'
+import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
+import axios, { CancelToken } from 'axios'
+import { retrieveDDO } from '../utils/aquarius'
+import { MetadataMarket } from '../@types/MetaData'
+
+interface AlgorithmProviderValue {
+  isInPurgatory: boolean
+  purgatoryData: PurgatoryData
+  ddo: DDO | undefined
+  did: string | undefined
+  metadata: MetadataMarket | undefined
+  title: string | undefined
+  owner: string | undefined
+  price: BestPrice | undefined
+  error?: string
+  refreshInterval: number
+  refreshDdo: (token?: CancelToken) => Promise<void>
+  refreshPrice: () => Promise<void>
+}
+
+const AssetContext = createContext({} as AlgorithmProviderValue)
+
+const refreshInterval = 10000 // 10 sec.
+
+function AlgorithmProvider({
+  asset,
+  children
+}: {
+  asset: string | DDO
+  children: ReactNode
+}): ReactElement {
+  const { ocean, status, config, networkId } = useOcean()
+  const [isInPurgatory, setIsInPurgatory] = useState(false)
+  const [purgatoryData, setPurgatoryData] = useState<PurgatoryData>()
+  const [ddo, setDDO] = useState<DDO>()
+  const [did, setDID] = useState<string>()
+  const [metadata, setMetadata] = useState<MetadataMarket>()
+  const [title, setTitle] = useState<string>()
+  const [price, setPrice] = useState<BestPrice>()
+  const [owner, setOwner] = useState<string>()
+  const [error, setError] = useState<string>()
+
+  const refreshPrice = useCallback(async () => {
+    if (
+      !ddo ||
+      status !== 1 ||
+      networkId !== (config as ConfigHelperConfig).networkId
+    )
+      return
+
+    const newPrice = await getDataTokenPrice(
+      ocean,
+      ddo.dataToken,
+      ddo?.price?.type,
+      ddo.price.address
+    )
+    setPrice(newPrice)
+    Logger.log(`Refreshed asset price: ${newPrice?.value}`, newPrice)
+  }, [ocean, config, ddo, networkId, status])
+
+  const fetchDdo = async (token?: CancelToken) => {
+    Logger.log('Init asset, get ddo')
+    const ddo = await retrieveDDO(
+      asset as string,
+      config.metadataCacheUri,
+      token
+    )
+
+    if (!ddo) {
+      setError(
+        `The DDO for ${asset} was not found in MetadataCache. If you just published a new data set, wait some seconds and refresh this page.`
+      )
+    } else {
+      setError(undefined)
+    }
+    return ddo
+  }
+
+  const refreshDdo = async (token?: CancelToken) => {
+    const ddo = await fetchDdo(token)
+    Logger.debug('DDO', ddo)
+    setDDO(ddo)
+  }
+  //
+  // Get and set DDO based on passed DDO or DID
+  //
+  useEffect(() => {
+    if (!asset || !config?.metadataCacheUri) return
+
+    const source = axios.CancelToken.source()
+    let isMounted = true
+    Logger.log('Init asset, get ddo')
+
+    async function init() {
+      const ddo = await fetchDdo(source.token)
+      if (!isMounted) return
+      Logger.debug('DDO', ddo)
+      setDDO(ddo)
+      setDID(asset as string)
+    }
+    init()
+    return () => {
+      isMounted = false
+      source.cancel()
+    }
+  }, [asset, config?.metadataCacheUri])
+
+  useEffect(() => {
+    // Re-fetch price periodically, triggering re-calculation of everything
+    let isMounted = true
+
+    const interval = setInterval(() => {
+      if (!isMounted) return
+      refreshPrice()
+    }, refreshInterval)
+
+    return () => {
+      clearInterval(interval)
+      isMounted = false
+    }
+  }, [ddo, networkId, refreshPrice])
+
+  const setPurgatory = useCallback(async (did: string): Promise<void> => {
+    if (!did) return
+    try {
+      const result = await getAssetPurgatoryData(did)
+
+      if (result?.did !== undefined) {
+        setIsInPurgatory(true)
+        setPurgatoryData(result)
+        return
+      }
+
+      setIsInPurgatory(false)
+    } catch (error) {
+      Logger.error(error)
+    }
+  }, [])
+
+  const initMetadata = useCallback(
+    async (ddo: DDO): Promise<void> => {
+      if (!ddo) return
+
+      Logger.log('Init metadata')
+      // Set price & metadata from DDO first
+      setPrice(ddo.price)
+      const { attributes } = ddo.findServiceByType('metadata')
+      setMetadata((attributes as unknown) as MetadataMarket)
+      setTitle(attributes?.main.name)
+      setOwner(ddo.publicKey[0].owner)
+      setIsInPurgatory(ddo.isInPurgatory === 'true')
+
+      await setPurgatory(ddo.id)
+      await refreshPrice()
+    },
+    [refreshPrice, setPurgatory]
+  )
+
+  useEffect(() => {
+    if (!ddo) return
+    initMetadata(ddo)
+  }, [ddo, initMetadata])
+
+  return (
+    <AssetContext.Provider
+      value={
+        {
+          ddo,
+          did,
+          metadata,
+          title,
+          owner,
+          price,
+          error,
+          isInPurgatory,
+          purgatoryData,
+          refreshInterval,
+          refreshDdo,
+          refreshPrice
+        } as AlgorithmProviderValue
+      }
+    >
+      {children}
+    </AssetContext.Provider>
+  )
+}
+
+// Helper hook to access the provider values
+const useAlgorithm = (): AlgorithmProviderValue => useContext(AssetContext)
+
+export { AlgorithmProvider, useAlgorithm, AlgorithmProviderValue, AssetContext }
+export default AlgorithmProvider