From a73fac1611691ead82dc441d8ee79ab81d03334f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 21 Jul 2020 14:04:32 +0200 Subject: [PATCH] cleanup --- package-lock.json | 6 +- package.json | 2 +- .../organisms/AssetActions/Compute.tsx | 9 +-- .../organisms/AssetActions/Consume.tsx | 6 +- .../organisms/AssetActions/index.tsx | 2 +- .../organisms/AssetContent/index.tsx | 2 +- src/components/templates/AssetDetails.tsx | 73 +++++++++++++++++++ src/pages/asset/index.tsx | 70 +----------------- 8 files changed, 88 insertions(+), 82 deletions(-) create mode 100644 src/components/templates/AssetDetails.tsx diff --git a/package-lock.json b/package-lock.json index 146fd8732..207f2c657 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3762,9 +3762,9 @@ } }, "@oceanprotocol/react": { - "version": "0.0.26", - "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.26.tgz", - "integrity": "sha512-EGy2kP9nEiKDT1wbTUWqogqWud/hrhUQzXnAoW0Sw5M6m7t6Jg7svbbCmI/J5YtLF+ldQv1siP8Bh0Ii+QdzBw==", + "version": "0.0.27", + "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.27.tgz", + "integrity": "sha512-qaPD5W51rtP/ql4vEP14DqPKbe0aoyIxWNc2oxwz4xUMP+svQLgPnJyL8+9vy/qblt/bOYkO5H9GMfsjYPTOnQ==", "requires": { "@oceanprotocol/lib": "^0.1.8", "axios": "^0.19.2", diff --git a/package.json b/package.json index 7d8b776af..94b418271 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "dependencies": { "@loadable/component": "^5.13.1", "@oceanprotocol/art": "^3.0.0", - "@oceanprotocol/react": "^0.0.26", + "@oceanprotocol/react": "^0.0.27", "@oceanprotocol/typographies": "^0.1.0", "@sindresorhus/slugify": "^1.0.0", "@tippyjs/react": "^4.1.0", diff --git a/src/components/organisms/AssetActions/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx index c52a593ef..a80c3a666 100644 --- a/src/components/organisms/AssetActions/Compute.tsx +++ b/src/components/organisms/AssetActions/Compute.tsx @@ -10,7 +10,6 @@ import { computeOptions, useCompute, readFileContent, - useMetadata, useOcean } from '@oceanprotocol/react' import styles from './Compute.module.css' @@ -18,12 +17,10 @@ import Button from '../../atoms/Button' import Input from '../../atoms/Input' import Alert from '../../atoms/Alert' -export default function Compute({ did }: { did: string }): ReactElement { +export default function Compute({ ddo }: { ddo: DDO }): ReactElement { const { ocean } = useOcean() - const { ddo } = useMetadata(did) const { compute, isLoading, computeStepText, computeError } = useCompute() - const computeService = new DDO(ddo).findServiceByType('compute').attributes - .main + const computeService = ddo.findServiceByType('compute').attributes.main const [isJobStarting, setIsJobStarting] = useState(false) const [, setError] = useState('') @@ -81,7 +78,7 @@ export default function Compute({ did }: { did: string }): ReactElement { setError('') await compute( - did, + ddo.id, computeService, ddo.dataToken, algorithmRawCode, diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx index 48c630f47..0594e6a39 100644 --- a/src/components/organisms/AssetActions/Consume.tsx +++ b/src/components/organisms/AssetActions/Consume.tsx @@ -20,11 +20,10 @@ export default function Consume({ }): ReactElement { const accessService = ddo.findServiceByType('access') const { cost } = accessService.attributes.main - const { ocean } = useOcean() const { consumeStepText, consume, consumeError } = useConsume() - // const isFree = cost === '0' + const isFree = cost === '0' // const isBalanceSufficient = // isFree || compareAsBN(balanceInOcean, fromWei(cost), Comparisson.gte) const isDisabled = !ocean @@ -42,8 +41,7 @@ export default function Consume({ onClick={() => consume(ddo.id, ddo.dataToken, 'access')} disabled={isDisabled} > - Download - {/* {isFree ? 'Download' : 'Buy'} */} + {isFree ? 'Download' : 'Buy'} ) diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx index 01d0f6d26..e8716f496 100644 --- a/src/components/organisms/AssetActions/index.tsx +++ b/src/components/organisms/AssetActions/index.tsx @@ -4,7 +4,7 @@ import styles from './index.module.css' import Compute from './Compute' import Consume from './Consume' import { MetadataMarket } from '../../../@types/Metadata' -import { MetadataStore, Logger, DDO } from '@oceanprotocol/lib' +import { DDO } from '@oceanprotocol/lib' export default function AssetActions({ metadata, diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx index 14e61862f..dd0156a7d 100644 --- a/src/components/organisms/AssetContent/index.tsx +++ b/src/components/organisms/AssetContent/index.tsx @@ -7,7 +7,7 @@ import MetaFull from './MetaFull' import MetaSecondary from './MetaSecondary' import styles from './index.module.css' import AssetActions from '../AssetActions' -import { MetadataStore, Logger, DDO } from '@oceanprotocol/lib' +import { DDO } from '@oceanprotocol/lib' export interface AssetContentProps { metadata: MetadataMarket diff --git a/src/components/templates/AssetDetails.tsx b/src/components/templates/AssetDetails.tsx new file mode 100644 index 000000000..da3d10816 --- /dev/null +++ b/src/components/templates/AssetDetails.tsx @@ -0,0 +1,73 @@ +import React, { useState, useEffect, ReactElement } from 'react' +import { Router } from '@reach/router' +import AssetContent from '../../components/organisms/AssetContent' +import Layout from '../../components/Layout' +import { MetadataMarket, ServiceMetadataMarket } from '../../@types/Metadata' +import { MetadataStore, Logger, DDO } from '@oceanprotocol/lib' +import Alert from '../../components/atoms/Alert' +import Loader from '../../components/atoms/Loader' +import { useSiteMetadata } from '../../hooks/useSiteMetadata' + +export default function PageTemplateAssetDetails({ + did, + uri +}: { + did: string + uri: string +}): ReactElement { + const { appConfig } = useSiteMetadata() + const [metadata, setMetadata] = useState() + const [title, setTitle] = useState() + const [error, setError] = useState() + const [ddo, setDdo] = useState() + + useEffect(() => { + async function init() { + try { + const metadataStore = new MetadataStore( + appConfig.oceanConfig.metadataStoreUri, + Logger + ) + const ddo = await metadataStore.retrieveDDO(did) + setDdo(ddo) + + if (!ddo) { + setTitle('Could not retrieve asset') + setError('The DDO was not found in MetadataStore.') + return + } + + const { attributes }: ServiceMetadataMarket = ddo.findServiceByType( + 'metadata' + ) + + setTitle(attributes.main.name) + setMetadata(attributes) + } catch (error) { + setTitle('Error retrieving asset') + setError(error.message) + } + } + init() + }, [did]) + + return did && metadata ? ( + + + + + + ) : error ? ( + + + + ) : ( + + + + ) +} diff --git a/src/pages/asset/index.tsx b/src/pages/asset/index.tsx index 36e454c27..58b98d51d 100644 --- a/src/pages/asset/index.tsx +++ b/src/pages/asset/index.tsx @@ -1,70 +1,8 @@ -import React, { useState, useEffect, ReactElement } from 'react' -import { Router } from '@reach/router' -import AssetContent from '../../components/organisms/AssetContent' -import Layout from '../../components/Layout' +import React, { ReactElement } from 'react' import { PageProps } from 'gatsby' -import { MetadataMarket, ServiceMetadataMarket } from '../../@types/Metadata' -import { MetadataStore, Logger, DDO } from '@oceanprotocol/lib' -import Alert from '../../components/atoms/Alert' -import Loader from '../../components/atoms/Loader' -import { useSiteMetadata } from '../../hooks/useSiteMetadata' - -export default function AssetRoute(props: PageProps): ReactElement { - const { appConfig } = useSiteMetadata() - const [metadata, setMetadata] = useState() - const [title, setTitle] = useState() - const [error, setError] = useState() - const [ddo, setDdo] = useState() +import PageTemplateAssetDetails from '../../components/templates/AssetDetails' +export default function PageGatsbyAssetDetails(props: PageProps): ReactElement { const did = props.location.pathname.split('/')[2] - - useEffect(() => { - async function init() { - try { - const metadataStore = new MetadataStore( - appConfig.oceanConfig.metadataStoreUri, - Logger - ) - const ddo = await metadataStore.retrieveDDO(did) - setDdo(ddo) - - if (!ddo) { - setTitle('Could not retrieve asset') - setError('The DDO was not found in MetadataStore.') - return - } - - const { attributes }: ServiceMetadataMarket = ddo.findServiceByType( - 'metadata' - ) - - setTitle(attributes.main.name) - setMetadata(attributes) - } catch (error) { - setTitle('Error retrieving asset') - setError(error.message) - } - } - init() - }, [did]) - - return did && metadata ? ( - - - - - - ) : error ? ( - - - - ) : ( - - - - ) + return }