From b3e4940d08738ee58b74cb37aae9148b78b62a44 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 9 Jul 2020 18:08:13 +0200 Subject: [PATCH] start data flow cleanup --- content/pages/publish.json | 6 +- src/@types/MetaData.d.ts | 20 +++- .../atoms/Input/InputElement.module.css | 37 +------ src/components/pages/Publish/PublishForm.tsx | 103 ++++++++++++------ src/components/pages/Publish/index.tsx | 3 +- src/components/pages/Publish/utils.ts | 28 ++--- src/models/Asset.ts | 5 +- src/models/PublishForm.ts | 45 -------- tests/unit/__fixtures__/ddo.ts | 1 - tests/unit/__fixtures__/testFormData.ts | 8 +- 10 files changed, 107 insertions(+), 149 deletions(-) delete mode 100644 src/models/PublishForm.ts diff --git a/content/pages/publish.json b/content/pages/publish.json index ab2ac7c2c..be2ff88b3 100644 --- a/content/pages/publish.json +++ b/content/pages/publish.json @@ -51,15 +51,13 @@ { "name": "copyrightHolder", "label": "Copyright Holder", - "placeholder": "e.g. Marine Institute of Jellyfish", - "required": true + "placeholder": "e.g. Marine Institute of Jellyfish" }, { "name": "tags", "label": "Tags", "placeholder": "e.g. logistics, ai", - "help": "Separate tags with comma.", - "required": true + "help": "Separate tags with comma." }, { "name": "license", diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts index d6782d21a..6b5579524 100644 --- a/src/@types/MetaData.d.ts +++ b/src/@types/MetaData.d.ts @@ -1,4 +1,4 @@ -import { MetaData, AdditionalInformation } from '@oceanprotocol/squid' +import { File, MetaData, AdditionalInformation } from '@oceanprotocol/squid' import { ServiceMetadata } from '@oceanprotocol/squid/dist/node/ddo/Service' export interface Sample { @@ -13,13 +13,29 @@ export interface AdditionalInformationMarket extends AdditionalInformation { links?: Sample[] // redefine existing key, cause not specific enough in Squid termsAndConditions: boolean dateRange?: [string, string] - access: AccessType + access: AccessType | string } export interface MetaDataMarket extends MetaData { additionalInformation: AdditionalInformationMarket } +export interface MetaDataPublishForm { + // ---- required fields ---- + name: string + description: string + files: string + termsAndConditions: boolean + author: string + license: string + price: string + access: string + // ---- optional fields ---- + copyrightHolder?: string + tags?: string + links?: string +} + export interface ServiceMetaDataMarket extends ServiceMetadata { attributes: MetaDataMarket } diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css index 87a7cbd2f..d468b5dc9 100644 --- a/src/components/atoms/Input/InputElement.module.css +++ b/src/components/atoms/Input/InputElement.module.css @@ -69,34 +69,10 @@ .radioGroup { margin-top: calc(var(--spacer) / 2); - margin-bottom: -2%; -} - -@media screen and (min-width: 40rem) { - .radioGroup { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } } .radioWrap { position: relative; - padding: calc(var(--spacer) / 2); - text-align: center; - display: flex; - align-items: center; - margin-bottom: 2%; -} - -@media screen and (min-width: 40rem) { - .radioWrap { - flex: 0 0 49%; - } -} - -.radio:checked + label { - border-color: var(--brand-pink); } .radioLabel { @@ -104,19 +80,8 @@ padding: 0; font-weight: var(--font-weight-bold); font-size: var(--font-size-small); - line-height: 1.2; - border: 1px solid var(--brand-grey-lighter); - border-radius: 0.2rem; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; color: var(--brand-grey); - text-align: left; - padding-left: 2.5rem; - display: flex; - align-items: center; + padding-left: 0.5rem; } /* Size modifiers */ diff --git a/src/components/pages/Publish/PublishForm.tsx b/src/components/pages/Publish/PublishForm.tsx index 4ee8e800a..d5d8aa847 100644 --- a/src/components/pages/Publish/PublishForm.tsx +++ b/src/components/pages/Publish/PublishForm.tsx @@ -1,10 +1,5 @@ import React, { ReactElement } from 'react' -import { - initialValues, - validationSchema, - PublishFormData -} from '../../../models/PublishForm' -import { MetaData } from '@oceanprotocol/squid' +import * as Yup from 'yup' import { toStringNoMS } from '../../../utils' import { toast } from 'react-toastify' import styles from './PublishForm.module.css' @@ -18,6 +13,39 @@ import Input from '../../atoms/Input' import Button from '../../atoms/Button' import { transformPublishFormToMetadata } from './utils' import { FormContent, FormFieldProps } from '../../../@types/Form' +import { MetaDataPublishForm, AccessType } from '../../../@types/MetaData' +import AssetModel from '../../../models/Asset' + +const validationSchema = Yup.object().shape({ + // ---- required fields ---- + name: Yup.string().required('Required'), + author: Yup.string().required('Required'), + price: Yup.string().required('Required'), + files: Yup.string().required('Required'), + description: Yup.string().required('Required'), + license: Yup.string().required('Required'), + access: Yup.string().required('Required'), + termsAndConditions: Yup.boolean().required('Required'), + + // ---- optional fields ---- + copyrightHolder: Yup.string(), + tags: Yup.string(), + links: Yup.string() +}) + +const initialValues: MetaDataPublishForm = { + name: undefined, + author: undefined, + price: undefined, + files: undefined, + description: undefined, + license: undefined, + access: undefined, + termsAndConditions: undefined, + copyrightHolder: undefined, + tags: undefined, + links: undefined +} export default function PublishForm({ content @@ -26,46 +54,49 @@ export default function PublishForm({ }): ReactElement { const { ocean, account } = useOcean() - async function handleSubmit(values: PublishFormData) { + async function handleSubmit(values: MetaDataPublishForm) { const submittingToast = toast.info('submitting asset', { className: styles.info }) + console.log(values) const metadata = transformPublishFormToMetadata(values) + console.log(metadata) // if services array stays empty, the default access service // will be created by squid-js - let services: Service[] = [] + // let services: Service[] = [] - if (metadata.additionalInformation.access === 'Compute') { - const computeService: ServiceCompute = await ocean.compute.createComputeServiceAttributes( - account, - metadata.main.price, - // Note: a hack without consequences. - // Will make metadata.main.datePublished (automatically created by Aquarius) - // go out of sync with this service.main.datePublished. - toStringNoMS(new Date(Date.now())) - ) - services = [computeService] - } - try { - const asset = await ocean.assets.create( - (metadata as unknown) as MetaData, - account, - services - ) + // if (metadata.additionalInformation.access === 'Compute') { + // const computeService: ServiceCompute = await ocean.compute.createComputeServiceAttributes( + // account, + // metadata.main.price, + // // Note: a hack without consequences. + // // Will make metadata.main.datePublished (automatically created by Aquarius) + // // go out of sync with this service.main.datePublished. + // toStringNoMS(new Date(Date.now())) + // ) + // services = [computeService] + // } - // TODO: Reset the form to initial values + // try { + // const asset = await ocean.assets.create( + // (metadata as unknown) as MetaData, + // account, + // services + // ) - // User feedback and redirect - toast.success('asset created successfully', { - className: styles.success - }) - toast.dismiss(submittingToast) - // navigate(`/asset/${asset.id}`) - } catch (e) { - console.error(e.message) - } + // // TODO: Reset the form to initial values + + // // User feedback and redirect + // toast.success('asset created successfully', { + // className: styles.success + // }) + // toast.dismiss(submittingToast) + // // navigate(`/asset/${asset.id}`) + // } catch (e) { + // console.error(e.message) + // } } return ( @@ -94,7 +125,7 @@ export default function PublishForm({ !ocean || !account || isSubmitting || - !isValid || + //! isValid || status === 'empty' } > diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index fada7206a..8ee336029 100644 --- a/src/components/pages/Publish/index.tsx +++ b/src/components/pages/Publish/index.tsx @@ -2,11 +2,12 @@ import React, { ReactElement } from 'react' import PublishForm from './PublishForm' import styles from './index.module.css' import Web3Feedback from '../../molecules/Wallet/Feedback' +import { FormContent } from '../../../@types/Form' export default function PublishPage({ content }: { - content: any + content: { form: FormContent } }): ReactElement { return (
diff --git a/src/components/pages/Publish/utils.ts b/src/components/pages/Publish/utils.ts index c30b14705..625101ab4 100644 --- a/src/components/pages/Publish/utils.ts +++ b/src/components/pages/Publish/utils.ts @@ -1,11 +1,10 @@ -import { PublishFormData } from '../../../models/PublishForm' -import { MetaDataMarket } from '../../../@types/MetaData' +import { MetaDataMarket, MetaDataPublishForm } from '../../../@types/MetaData' import { toStringNoMS } from '../../../utils' import AssetModel from '../../../models/Asset' import web3Utils from 'web3-utils' export function transformPublishFormToMetadata( - data: PublishFormData + data: MetaDataPublishForm ): MetaDataMarket { const currentTime = toStringNoMS(new Date()) @@ -17,9 +16,9 @@ export function transformPublishFormToMetadata( description, copyrightHolder, tags, + links, termsAndConditions, files, - dateRange, access } = data @@ -27,35 +26,28 @@ export function transformPublishFormToMetadata( main: { ...AssetModel.main, name, - price: web3Utils.toWei(price.toString()), + price: `${web3Utils.toWei(price.toString())}`, author, dateCreated: currentTime, datePublished: currentTime, - files, + // files: { + // url: files + // }, license }, - // ------- additional information ------- additionalInformation: { ...AssetModel.additionalInformation, description, copyrightHolder, tags: tags?.split(','), + // links: { + // url: links + // }, termsAndConditions, access: access || 'Download' }, - // ------- curation ------- curation: AssetModel.curation } - if (dateRange) { - const newDateRange = JSON.parse(dateRange) - if (newDateRange.length > 1) { - metadata.additionalInformation.dateRange = JSON.parse(dateRange) - } else if (newDateRange.length === 1) { - // eslint-disable-next-line prefer-destructuring - metadata.main.dateCreated = newDateRange[0] - } - } - return metadata } diff --git a/src/models/Asset.ts b/src/models/Asset.ts index 608310fbc..2152993f5 100644 --- a/src/models/Asset.ts +++ b/src/models/Asset.ts @@ -15,12 +15,11 @@ const AssetModel: MetaDataMarket = { additionalInformation: { description: '', copyrightHolder: '', - tags: undefined, - // links: [], + tags: [], + links: [], // custom items termsAndConditions: false, - dateRange: undefined, access: 'Download' }, curation: { diff --git a/src/models/PublishForm.ts b/src/models/PublishForm.ts deleted file mode 100644 index 3bbe8958b..000000000 --- a/src/models/PublishForm.ts +++ /dev/null @@ -1,45 +0,0 @@ -import * as Yup from 'yup' -import { AccessType } from '../@types/MetaData' -import { File } from '@oceanprotocol/squid' - -export interface PublishFormData { - // ---- required fields ---- - name: string - description: string - files: File[] - termsAndConditions: boolean - author: string - license: string - price: number - access?: AccessType - // ---- optional fields ---- - dateRange?: string - copyrightHolder?: string - tags?: string -} - -export const validationSchema = Yup.object().shape({ - name: Yup.string().required('Required'), - author: Yup.string().required('Required'), - price: Yup.string().required('Required'), - files: Yup.array().required('Required'), - summary: Yup.string().required('Required'), - license: Yup.string().required('Required'), - termsAndConditions: Yup.boolean().required('Required'), - dateRange: Yup.string().required('Required'), - copyrightHolder: Yup.string().required('Required'), - tags: Yup.string().required('Required') -}) - -export const initialValues: PublishFormData = { - author: '', - price: 0, - name: '', - files: [], - description: '', - license: '', - termsAndConditions: false, - dateRange: undefined, - copyrightHolder: undefined, - tags: undefined -} diff --git a/tests/unit/__fixtures__/ddo.ts b/tests/unit/__fixtures__/ddo.ts index e84457bd9..2c3e324cd 100644 --- a/tests/unit/__fixtures__/ddo.ts +++ b/tests/unit/__fixtures__/ddo.ts @@ -72,7 +72,6 @@ const ddo: Partial = { } ], termsAndConditions: true, - dateRange: ['2018-09-20T08:38:58', '2019-12-11T05:19:42'], access: 'Download' }, curation: { diff --git a/tests/unit/__fixtures__/testFormData.ts b/tests/unit/__fixtures__/testFormData.ts index 2aa010072..df81c0d3f 100644 --- a/tests/unit/__fixtures__/testFormData.ts +++ b/tests/unit/__fixtures__/testFormData.ts @@ -4,10 +4,12 @@ const testFormData: PublishFormData = { author: '', files: [], license: '', - price: 0, - title: '', + price: '0', + name: '', description: 'description', - termsAndConditions: true + termsAndConditions: true, + access: 'Download', + links: [] } export default testFormData