diff --git a/src/components/molecules/AssetListTitle.tsx b/src/components/molecules/AssetListTitle.tsx index 20035346f..0410996e4 100644 --- a/src/components/molecules/AssetListTitle.tsx +++ b/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(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 (

- - {partner && } {title || metadata.title || did} + + {partner && } {assetTitle}

) diff --git a/src/components/molecules/Bookmarks.tsx b/src/components/molecules/Bookmarks.tsx index 68ab7faea..a752a0dac 100644 --- a/src/components/molecules/Bookmarks.tsx +++ b/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 ( ) @@ -86,10 +92,12 @@ export default function Bookmarks(): ReactElement { const [pinned, setPinned] = useState() const [isLoading, setIsLoading] = useState() - 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 ( - ) + return }, grow: 2 }, diff --git a/src/providers/Asset.tsx b/src/providers/Asset.tsx index 0f3a4a412..4201af105 100644 --- a/src/providers/Asset.tsx +++ b/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 => { - 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 { - 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 diff --git a/src/utils/aquarius.ts b/src/utils/aquarius.ts index 848d3a895..a11657a7e 100644 --- a/src/utils/aquarius.ts +++ b/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 { + try { + const response: AxiosResponse = 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) + } + } +}