start data flow cleanup

content/pages/publish.json

@@ -51,15 +51,13 @@
       {
         "name": "copyrightHolder",
         "label": "Copyright Holder",
-        "placeholder": "e.g. Marine Institute of Jellyfish",
+        "placeholder": "e.g. Marine Institute of Jellyfish"
-        "required": true
       },
       {
         "name": "tags",
         "label": "Tags",
         "placeholder": "e.g. logistics, ai",
-        "help": "Separate tags with comma.",
+        "help": "Separate tags with comma."
-        "required": true
       },
       {
         "name": "license",

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
 }

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: 0.5rem;
-  padding-left: 2.5rem;
-  display: flex;
-  align-items: center;
 }
 
 /* Size modifiers */

src/components/pages/Publish/PublishForm.tsx

@@ -1,10 +1,5 @@
 import React, { ReactElement } from 'react'
-import {
+import * as Yup from 'yup'
-  initialValues,
-  validationSchema,
-  PublishFormData
-} from '../../../models/PublishForm'
-import { MetaData } from '@oceanprotocol/squid'
 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<MetaDataPublishForm>({
+  // ---- 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') {
+    // if (metadata.additionalInformation.access === 'Compute') {
-      const computeService: ServiceCompute = await ocean.compute.createComputeServiceAttributes(
+    //   const computeService: ServiceCompute = await ocean.compute.createComputeServiceAttributes(
-        account,
+    //     account,
-        metadata.main.price,
+    //     metadata.main.price,
-        // Note: a hack without consequences.
+    //     // Note: a hack without consequences.
-        // Will make metadata.main.datePublished (automatically created by Aquarius)
+    //     // Will make metadata.main.datePublished (automatically created by Aquarius)
-        // go out of sync with this service.main.datePublished.
+    //     // go out of sync with this service.main.datePublished.
-        toStringNoMS(new Date(Date.now()))
+    //     toStringNoMS(new Date(Date.now()))
-      )
+    //   )
-      services = [computeService]
+    //   services = [computeService]
-    }
+    // }
-    try {
-      const asset = await ocean.assets.create(
-        (metadata as unknown) as MetaData,
-        account,
-        services
-      )
 
-      // 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
+    //   // TODO: Reset the form to initial values
-      toast.success('asset created successfully', {
+
-        className: styles.success
+    //   // User feedback and redirect
-      })
+    //   toast.success('asset created successfully', {
-      toast.dismiss(submittingToast)
+    //     className: styles.success
-      // navigate(`/asset/${asset.id}`)
+    //   })
-    } catch (e) {
+    //   toast.dismiss(submittingToast)
-      console.error(e.message)
+    //   // 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'
             }
           >

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 (
     <article className={styles.grid}>

src/components/pages/Publish/utils.ts

@@ -1,11 +1,10 @@
-import { PublishFormData } from '../../../models/PublishForm'
+import { MetaDataMarket, MetaDataPublishForm } from '../../../@types/MetaData'
-import { MetaDataMarket } 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
 }

src/models/Asset.ts

@@ -15,12 +15,11 @@ const AssetModel: MetaDataMarket = {
   additionalInformation: {
     description: '',
     copyrightHolder: '',
-    tags: undefined,
+    tags: [],
-    // links: [],
+    links: [],
 
     // custom items
     termsAndConditions: false,
-    dateRange: undefined,
     access: 'Download'
   },
   curation: {

src/models/PublishForm.ts

@@ -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
-}

tests/unit/__fixtures__/ddo.ts

@@ -72,7 +72,6 @@ const ddo: Partial<DDO> = {
             }
           ],
           termsAndConditions: true,
-          dateRange: ['2018-09-20T08:38:58', '2019-12-11T05:19:42'],
           access: 'Download'
         },
         curation: {

tests/unit/__fixtures__/testFormData.ts

@@ -4,10 +4,12 @@ const testFormData: PublishFormData = {
   author: '',
   files: [],
   license: '',
-  price: 0,
+  price: '0',
-  title: '',
+  name: '',
   description: 'description',
-  termsAndConditions: true
+  termsAndConditions: true,
+  access: 'Download',
+  links: []
 }
 
 export default testFormData