From 2568256ece60b015354fcf38fae597a79a64194c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 8 Jul 2020 17:57:53 +0200 Subject: [PATCH] new AssetActions component --- package-lock.json | 23 ++++++++++ package.json | 2 + .../{ => AssetActions}/Compute.module.css | 2 - .../{ => AssetActions}/Compute.stories.tsx | 6 +-- .../organisms/{ => AssetActions}/Compute.tsx | 27 ++++++------ .../{ => AssetActions}/Consume.module.css | 5 --- .../{ => AssetActions}/Consume.stories.tsx | 6 +-- .../organisms/{ => AssetActions}/Consume.tsx | 14 +++--- .../organisms/AssetActions/index.module.css | 32 ++++++++++++++ .../organisms/AssetActions/index.tsx | 43 +++++++++++++++++++ .../organisms/AssetContent/index.tsx | 23 ++-------- 11 files changed, 128 insertions(+), 55 deletions(-) rename src/components/organisms/{ => AssetActions}/Compute.module.css (80%) rename src/components/organisms/{ => AssetActions}/Compute.stories.tsx (73%) rename src/components/organisms/{ => AssetActions}/Compute.tsx (86%) rename src/components/organisms/{ => AssetActions}/Consume.module.css (66%) rename src/components/organisms/{ => AssetActions}/Consume.stories.tsx (68%) rename src/components/organisms/{ => AssetActions}/Consume.tsx (81%) create mode 100644 src/components/organisms/AssetActions/index.module.css create mode 100644 src/components/organisms/AssetActions/index.tsx diff --git a/package-lock.json b/package-lock.json index f41c18802..c5db4e2b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6279,6 +6279,15 @@ "@types/react": "*" } }, + "@types/react-tabs": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@types/react-tabs/-/react-tabs-2.3.2.tgz", + "integrity": "sha512-QfMelaJSdMcp+CenKhATp12XFFqqUcLXILgwpX3dgWfVYNZPtsLXZDDCRsVn+kwmBOWB+DFPKpQorxbUhnXINw==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/reactcss": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.3.tgz", @@ -10304,6 +10313,11 @@ "mimic-response": "^1.0.0" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -28810,6 +28824,15 @@ "refractor": "^2.4.1" } }, + "react-tabs": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.1.1.tgz", + "integrity": "sha512-HpySC29NN1BkzBAnOC+ajfzPbTaVZcSWzMSjk56uAhPC/rBGtli8lTysR4CfPAyEE/hfweIzagOIoJ7nu80yng==", + "requires": { + "clsx": "^1.1.0", + "prop-types": "^15.5.0" + } + }, "react-test-renderer": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz", diff --git a/package.json b/package.json index e9c3987be..6ac556b1d 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "react-rating": "^2.0.5", "react-responsive-modal": "^5.0.2", "react-spring": "^8.0.27", + "react-tabs": "^3.1.1", "react-toastify": "^6.0.8", "shortid": "^2.2.15", "slugify": "^1.4.4", @@ -87,6 +88,7 @@ "@types/react-helmet": "^6.0.0", "@types/react-jsonschema-form": "^1.7.3", "@types/react-paginate": "^6.2.1", + "@types/react-tabs": "^2.3.2", "@types/shortid": "0.0.29", "@typescript-eslint/eslint-plugin": "^3.6.0", "@typescript-eslint/parser": "^3.6.0", diff --git a/src/components/organisms/Compute.module.css b/src/components/organisms/AssetActions/Compute.module.css similarity index 80% rename from src/components/organisms/Compute.module.css rename to src/components/organisms/AssetActions/Compute.module.css index 8ced5d70c..b92be5590 100644 --- a/src/components/organisms/Compute.module.css +++ b/src/components/organisms/AssetActions/Compute.module.css @@ -1,5 +1,4 @@ .compute { - composes: box from '../atoms/Box.module.css'; display: flex; flex-wrap: wrap; } @@ -10,7 +9,6 @@ .feedback { width: 100%; - margin-top: var(--spacer); } .compute button { diff --git a/src/components/organisms/Compute.stories.tsx b/src/components/organisms/AssetActions/Compute.stories.tsx similarity index 73% rename from src/components/organisms/Compute.stories.tsx rename to src/components/organisms/AssetActions/Compute.stories.tsx index 6b50633aa..8a317b81b 100644 --- a/src/components/organisms/Compute.stories.tsx +++ b/src/components/organisms/AssetActions/Compute.stories.tsx @@ -1,10 +1,10 @@ import React from 'react' import Compute from './Compute' -import ddo from '../../../tests/unit/__fixtures__/ddo' -import web3Mock from '../../../tests/unit/__mocks__/web3' +import ddo from '../../../../tests/unit/__fixtures__/ddo' +import web3Mock from '../../../../tests/unit/__mocks__/web3' import { DDO } from '@oceanprotocol/squid' import oceanMock from '../../../tests/unit/__mocks__/ocean-mock' -import { context } from '../../../tests/unit/__mocks__/web3provider' +import { context } from '../../../../tests/unit/__mocks__/web3provider' export default { title: 'Organisms/Consumejob', diff --git a/src/components/organisms/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx similarity index 86% rename from src/components/organisms/Compute.tsx rename to src/components/organisms/AssetActions/Compute.tsx index 00e355291..31c73ba89 100644 --- a/src/components/organisms/Compute.tsx +++ b/src/components/organisms/AssetActions/Compute.tsx @@ -1,21 +1,21 @@ import React, { useState, useEffect, ReactElement } from 'react' import { Ocean } from '@oceanprotocol/squid' import { fromWei } from 'web3-utils' -import compareAsBN, { Comparisson } from '../../utils/compareAsBN' -import Loader from '../atoms/Loader' -import Web3Feedback from '../molecules/Wallet/Feedback' -import Dropzone from '../atoms/Dropzone' -import Price from '../atoms/Price' +import compareAsBN, { Comparisson } from '../../../utils/compareAsBN' +import Loader from '../../atoms/Loader' +import Web3Feedback from '../../molecules/Wallet/Feedback' +import Dropzone from '../../atoms/Dropzone' +import Price from '../../atoms/Price' import { computeOptions, useCompute, readFileContent } from '@oceanprotocol/react' import styles from './Compute.module.css' -import Button from '../atoms/Button' -import Input from '../atoms/Input' -import { MetaDataMarket } from '../../@types/MetaData' -import { Alert } from '../atoms/Alert' +import Button from '../../atoms/Button' +import Input from '../../atoms/Input' +import { MetaDataMarket } from '../../../@types/MetaData' +import { Alert } from '../../atoms/Alert' export default function Compute({ did, @@ -126,7 +126,7 @@ export default function Compute({ {/* */} -
+
{isLoading && } {computeError !== undefined && ( @@ -138,12 +138,9 @@ export default function Compute({ state="success" /> )} -
+ + - -
- -
) } diff --git a/src/components/organisms/Consume.module.css b/src/components/organisms/AssetActions/Consume.module.css similarity index 66% rename from src/components/organisms/Consume.module.css rename to src/components/organisms/AssetActions/Consume.module.css index 813592df5..760230d7a 100644 --- a/src/components/organisms/Consume.module.css +++ b/src/components/organisms/AssetActions/Consume.module.css @@ -1,9 +1,6 @@ .consume { - composes: box from '../atoms/Box.module.css'; display: flex; flex-wrap: wrap; - max-width: 35rem; - margin: auto; } .info { @@ -24,11 +21,9 @@ } .price { - margin-top: calc(var(--spacer) / 4); margin-bottom: calc(var(--spacer) / 2); } .feedback { width: 100%; - margin-top: calc(var(--spacer) * 1.5); } diff --git a/src/components/organisms/Consume.stories.tsx b/src/components/organisms/AssetActions/Consume.stories.tsx similarity index 68% rename from src/components/organisms/Consume.stories.tsx rename to src/components/organisms/AssetActions/Consume.stories.tsx index 4526ad452..cd55fe418 100644 --- a/src/components/organisms/Consume.stories.tsx +++ b/src/components/organisms/AssetActions/Consume.stories.tsx @@ -1,9 +1,9 @@ import React from 'react' import Consume from './Consume' -import ddo from '../../../tests/unit/__fixtures__/ddo' -import web3Mock from '../../../tests/unit/__mocks__/web3' +import ddo from '../../../../tests/unit/__fixtures__/ddo' +import web3Mock from '../../../../tests/unit/__mocks__/web3' import { DDO } from '@oceanprotocol/squid' -import { context } from '../../../tests/unit/__mocks__/web3provider' +import { context } from '../../../../tests/unit/__mocks__/web3provider' export default { title: 'Organisms/Consume', diff --git a/src/components/organisms/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx similarity index 81% rename from src/components/organisms/Consume.tsx rename to src/components/organisms/AssetActions/Consume.tsx index 2804792b9..b50cadd5a 100644 --- a/src/components/organisms/Consume.tsx +++ b/src/components/organisms/AssetActions/Consume.tsx @@ -1,14 +1,14 @@ import React, { ReactElement } from 'react' import Web3 from 'web3' -import compareAsBN, { Comparisson } from '../../utils/compareAsBN' -import Button from '../atoms/Button' -import File from '../atoms/File' -import Price from '../atoms/Price' -import Web3Feedback from '../molecules/Wallet/Feedback' +import compareAsBN, { Comparisson } from '../../../utils/compareAsBN' +import Button from '../../atoms/Button' +import File from '../../atoms/File' +import Price from '../../atoms/Price' +import Web3Feedback from '../../molecules/Wallet/Feedback' import styles from './Consume.module.css' -import Loader from '../atoms/Loader' +import Loader from '../../atoms/Loader' import { useOcean, useConsume } from '@oceanprotocol/react' -import { MetaDataMarket } from '../../@types/MetaData' +import { MetaDataMarket } from '../../../@types/MetaData' export default function Consume({ did, diff --git a/src/components/organisms/AssetActions/index.module.css b/src/components/organisms/AssetActions/index.module.css new file mode 100644 index 000000000..6acd2decb --- /dev/null +++ b/src/components/organisms/AssetActions/index.module.css @@ -0,0 +1,32 @@ +.actions { + composes: box from '../../atoms/Box.module.css'; + max-width: 35rem; + margin: auto; + padding: 0; +} + +.tabList { + text-align: center; + border-bottom: 1px solid var(--brand-grey-lighter); + padding-top: calc(var(--spacer) / 2); + padding-bottom: calc(var(--spacer) / 2); +} + +.tab { + display: inline-block; + padding: calc(var(--spacer) / 12) var(--spacer); + border-radius: var(--border-radius); + font-weight: var(--font-weight-bold); + text-transform: uppercase; + cursor: pointer; + color: var(--brand-grey-light); +} + +.tab[aria-selected='true'] { + background: var(--brand-black); + color: var(--brand-white); +} + +.tabContent { + padding: var(--spacer); +} diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx new file mode 100644 index 000000000..5ba5d9de8 --- /dev/null +++ b/src/components/organisms/AssetActions/index.tsx @@ -0,0 +1,43 @@ +import React, { ReactElement } from 'react' +import { Tab, Tabs, TabList, TabPanel } from 'react-tabs' +import styles from './index.module.css' +import Compute from './Compute' +import Consume from './Consume' +import { useOcean } from '@oceanprotocol/react' +import { MetaDataMarket } from '../../../@types/MetaData' + +export default function AssetActions({ + metadata, + did +}: { + metadata: MetaDataMarket + did: string +}): ReactElement { + const { ocean, balanceInOcean } = useOcean() + const { access } = metadata.additionalInformation + const isCompute = access && access === 'Compute' + + return ( + + + Use + Trade + +
+ + {isCompute ? ( + + ) : ( + + )} + + Trade Me +
+ + ) +} diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx index 44736119c..903fde851 100644 --- a/src/components/organisms/AssetContent/index.tsx +++ b/src/components/organisms/AssetContent/index.tsx @@ -6,10 +6,9 @@ import { Link } from 'gatsby' import Markdown from '../../atoms/Markdown' import Tags from '../../atoms/Tags' import MetaFull from './MetaFull' -import Compute from '../Compute' -import Consume from '../Consume' import MetaSecondary from './MetaSecondary' import styles from './index.module.css' +import AssetActions from '../AssetActions' export interface AssetContentProps { metadata: MetaDataMarket @@ -21,15 +20,8 @@ export default function AssetContent({ metadata, did }: AssetContentProps): ReactElement { - const { ocean, balanceInOcean } = useOcean() const { datePublished } = metadata.main - const { - description, - categories, - tags, - access - } = metadata.additionalInformation - const isCompute = access && access === 'Compute' + const { description, categories, tags } = metadata.additionalInformation // const { curation } = metadata @@ -81,16 +73,7 @@ export default function AssetContent({
- {isCompute ? ( - - ) : ( - - )} + {/* */}