fix AssetListTitle (#270)

* fix AssetListTitle

* asset provider fix

src/components/molecules/AssetListTitle.tsx

@@ -1,26 +1,56 @@
-import { useMetadata } from '@oceanprotocol/react'
+import { DDO } from '@oceanprotocol/lib'
+import { useOcean } from '@oceanprotocol/react'
 import { Link } from 'gatsby'
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { useDataPartner } from '../../hooks/useDataPartner'
+import { retrieveDDO } from '../../utils/aquarius'
 import { PartnerBadge } from '../atoms/Partner'
 import styles from './AssetListTitle.module.css'
+import axios from 'axios'
 
 export default function AssetListTitle({
+  ddo,
   did,
   title,
   owner
 }: {
+  ddo?: DDO
   did?: string
   title?: string
   owner?: string
 }): ReactElement {
-  const metadata = useMetadata(did)
+  const { config } = useOcean()
   const { partner } = useDataPartner(owner)
+  const [assetTitle, setAssetTitle] = useState<string>(title)
+
+  useEffect(() => {
+    if (assetTitle || !config?.metadataCacheUri) return
+
+    if (ddo) {
+      const { attributes } = ddo.findServiceByType('metadata')
+      setAssetTitle(attributes.main.name)
+      return
+    }
+
+    const source = axios.CancelToken.source()
+
+    async function getDDO() {
+      const ddo = await retrieveDDO(did, config.metadataCacheUri, source.token)
+      const { attributes } = ddo.findServiceByType('metadata')
+      setAssetTitle(attributes.main.name)
+    }
+
+    !ddo && did && getDDO()
+
+    return () => {
+      source.cancel()
+    }
+  }, [assetTitle, config?.metadataCacheUri, ddo, did])
 
   return (
     <h3 className={styles.title}>
-      <Link to={`/asset/${did}`}>
-        {partner && <PartnerBadge />} {title || metadata.title || did}
+      <Link to={`/asset/${did || ddo.id}`}>
+        {partner && <PartnerBadge />} {assetTitle}
       </Link>
     </h3>
   )

src/components/molecules/Bookmarks.tsx

@@ -1,16 +1,19 @@
 import { useUserPreferences } from '../../providers/UserPreferences'
 import React, { ReactElement, useEffect, useState } from 'react'
 import Table from '../atoms/Table'
-import { DDO, Logger, MetadataCache } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import { useOcean } from '@oceanprotocol/react'
 import Price from '../atoms/Price'
 import Tooltip from '../atoms/Tooltip'
 import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
 import AssetTitle from './AssetListTitle'
+import { queryMetadata } from '../../utils/aquarius'
+import axios, { CancelToken } from 'axios'
 
 async function getAssetsBookmarked(
   bookmarks: string[],
-  metadataCacheUri: string
+  metadataCacheUri: string,
+  cancelToken: CancelToken
 ) {
   const searchDids = JSON.stringify(bookmarks)
     .replace(/,/g, ' ')
@@ -34,8 +37,11 @@ async function getAssetsBookmarked(
   } as any
 
   try {
-    const metadataCache = new MetadataCache(metadataCacheUri, Logger)
-    const result = await metadataCache.queryMetadata(queryBookmarks)
+    const result = await queryMetadata(
+      queryBookmarks,
+      metadataCacheUri,
+      cancelToken
+    )
 
     return result
   } catch (error) {
@@ -51,7 +57,7 @@ const columns = [
       return (
         <AssetTitle
           title={attributes.main.name}
-          did={row.id}
+          ddo={row}
           owner={row.publicKey[0].owner}
         />
       )
@@ -86,10 +92,12 @@ export default function Bookmarks(): ReactElement {
   const [pinned, setPinned] = useState<DDO[]>()
   const [isLoading, setIsLoading] = useState<boolean>()
 
-  useEffect(() => {
-    if (!config?.metadataCacheUri || bookmarks === {}) return
+  const networkName = (config as ConfigHelperConfig)?.network
 
-    const networkName = (config as ConfigHelperConfig).network
+  useEffect(() => {
+    if (!config?.metadataCacheUri || !networkName || bookmarks === {}) return
+
+    const source = axios.CancelToken.source()
 
     async function init() {
       if (!bookmarks[networkName]?.length) {
@@ -102,9 +110,10 @@ export default function Bookmarks(): ReactElement {
       try {
         const resultPinned = await getAssetsBookmarked(
           bookmarks[networkName],
-          config.metadataCacheUri
+          config.metadataCacheUri,
+          source.token
         )
-        setPinned(resultPinned.results)
+        setPinned(resultPinned?.results)
       } catch (error) {
         Logger.error(error.message)
       }
@@ -112,7 +121,11 @@ export default function Bookmarks(): ReactElement {
       setIsLoading(false)
     }
     init()
-  }, [bookmarks, config.metadataCacheUri, config])
+
+    return () => {
+      source.cancel()
+    }
+  }, [bookmarks, config.metadataCacheUri, networkName])
 
   return (
     <Table

src/components/pages/History/PoolShares.tsx

@@ -28,15 +28,8 @@ const columns = [
   {
     name: 'Data Set',
     selector: function getAssetRow(row: Asset) {
-      const { attributes } = row.ddo.findServiceByType('metadata')
       const { owner } = row.ddo.publicKey[0]
-      return (
-        <AssetTitle
-          did={row.ddo.id}
-          title={attributes.main.name}
-          owner={owner}
-        />
-      )
+      return <AssetTitle ddo={row.ddo} owner={owner} />
     },
     grow: 2
   },

src/providers/Asset.tsx

@@ -12,7 +12,8 @@ import { PurgatoryData } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Purga
 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 axios from 'axios'
+import { retrieveDDO } from '../utils/aquarius'
 
 interface AssetProviderValue {
   isInPurgatory: boolean
@@ -68,37 +69,22 @@ function AssetProvider({
     Logger.log(`Refreshed asset price: ${newPrice?.value}`)
   }, [ocean, config, ddo, networkId, status])
 
-  const getDDO = useCallback(
-    async (did: string, cancelToken: CancelToken): Promise<DDO | undefined> => {
-      if (!config.metadataCacheUri) return
-
-      try {
-        const request = await axios.get(
-          `${config.metadataCacheUri}/api/v1/aquarius/assets/ddo/${did}`,
-          { cancelToken }
-        )
-        const ddo = request.data as DDO
-        return new DDO(ddo)
-      } catch (error) {
-        Logger.error(error.message)
-        return undefined
-      }
-    },
-    [config.metadataCacheUri]
-  )
-
   //
   // Get and set DDO based on passed DDO or DID
   //
   useEffect(() => {
-    if (!asset) return
+    if (!asset || !config?.metadataCacheUri) return
 
     const source = axios.CancelToken.source()
     let isMounted = true
     Logger.log('Init asset, get ddo')
 
     async function init(): Promise<void> {
-      const ddo = await getDDO(asset as string, source.token)
+      const ddo = await retrieveDDO(
+        asset as string,
+        config.metadataCacheUri,
+        source.token
+      )
 
       if (!ddo) {
         setError(
@@ -119,7 +105,7 @@ function AssetProvider({
       isMounted = false
       source.cancel()
     }
-  }, [asset, getDDO])
+  }, [asset, config?.metadataCacheUri])
 
   useEffect(() => {
     // Re-fetch price periodically, triggering re-calculation of everything

src/utils/aquarius.ts

@@ -1,4 +1,4 @@
-import { DDO, Logger } from '@oceanprotocol/lib'
+import { DDO, DID, Logger } from '@oceanprotocol/lib'
 import {
   QueryResult,
   SearchQuery
@@ -51,3 +51,25 @@ export async function queryMetadata(
     }
   }
 }
+
+export async function retrieveDDO(
+  did: string | DID,
+  metadataCacheUri: string,
+  cancelToken: CancelToken
+): Promise<DDO> {
+  try {
+    const response: AxiosResponse<DDO> = await axios.get(
+      `${metadataCacheUri}/api/v1/aquarius/assets/ddo/${did}`,
+      { cancelToken }
+    )
+    if (!response || response.status !== 200 || !response.data) return
+
+    return new DDO(response.data)
+  } catch (error) {
+    if (axios.isCancel(error)) {
+      Logger.log(error.message)
+    } else {
+      Logger.error(error.message)
+    }
+  }
+}