From 5bb3744dc3d0b18182573c76d5505eb6b8a8750f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 21 Jul 2020 11:56:53 +0200
Subject: [PATCH] collect cost & tokensToMint in form state

---
 content/pages/publish.json                    |  3 +--
 src/@types/MetaData.d.ts                      |  5 ++++-
 src/components/atoms/Input/InputElement.tsx   |  1 -
 .../molecules/FormFields/Price/index.tsx      | 22 +++++++++++++++----
 src/components/pages/Publish/Preview.tsx      |  1 +
 src/components/pages/Publish/index.tsx        |  8 +++----
 src/components/pages/Publish/validation.ts    | 10 +++++++--
 src/pages/publish.tsx                         |  1 -
 8 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/content/pages/publish.json b/content/pages/publish.json
index af3d784a8..bfee73d99 100644
--- a/content/pages/publish.json
+++ b/content/pages/publish.json
@@ -35,11 +35,10 @@
         "required": true
       },
       {
-        "name": "cost",
+        "name": "price",
         "label": "Price",
         "help": "Set your price for accessing this data set in Ocean Tokens.",
         "type": "price",
-        "min": 1,
         "required": true
       },
       {
diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts
index 766651bb0..f49368b38 100644
--- a/src/@types/MetaData.d.ts
+++ b/src/@types/MetaData.d.ts
@@ -24,7 +24,10 @@ export interface MetadataPublishForm {
   files: string | File[]
   author: string
   license: string
-  cost: string
+  price: {
+    cost: string
+    tokensToMint: string
+  }
   access: 'Download' | 'Compute' | string
   termsAndConditions: boolean
   // ---- optional fields ----
diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index 36a1b21b5..80d5c869d 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -68,7 +68,6 @@ export default function InputElement(props: InputProps): ReactElement {
           className={styles.input}
           name={name}
           {...props}
-          value={value || ''}
           type={type || 'text'}
         />
       )
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index 6b5992761..24d97e523 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -3,17 +3,31 @@ import { InputProps } from '../../../atoms/Input'
 import InputElement from '../../../atoms/Input/InputElement'
 import styles from './index.module.css'
 import Label from '../../../atoms/Input/Label'
+import { useFormikContext } from 'formik'
+import { MetadataPublishForm } from '../../../../@types/MetaData'
 
 export default function Price(props: InputProps): ReactElement {
+  const { values } = useFormikContext()
+
   return (
     <div className={styles.price}>
       <div>
-        <Label htmlFor="cost">Cost</Label>
-        <InputElement {...props} type="number" />
+        <Label htmlFor="price.cost">Cost</Label>
+        <InputElement
+          {...props.field}
+          value={(values as MetadataPublishForm).price.cost}
+          name="price.cost"
+          type="number"
+        />
       </div>
       <div>
-        <Label htmlFor="tokensToMint">Tokens to Mint</Label>
-        <InputElement name="tokensToMint" type="number" min="1" />
+        <Label htmlFor="price.tokensToMint">Tokens to Mint</Label>
+        <InputElement
+          {...props.field}
+          value={(values as MetadataPublishForm).price.tokensToMint}
+          name="price.tokensToMint"
+          type="number"
+        />
       </div>
     </div>
   )
diff --git a/src/components/pages/Publish/Preview.tsx b/src/components/pages/Publish/Preview.tsx
index 212f8370a..f89e9e80a 100644
--- a/src/components/pages/Publish/Preview.tsx
+++ b/src/components/pages/Publish/Preview.tsx
@@ -38,6 +38,7 @@ export default function Preview({
                 key.includes('tags') ||
                 key.includes('files') ||
                 key.includes('termsAndConditions') ||
+                key.includes('price') ||
                 value === undefined ||
                 value === ''
               )
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index 669e1a03c..4e870b3b7 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -8,7 +8,7 @@ import PublishForm from './PublishForm'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import { FormContent } from '../../../@types/Form'
 import { initialValues, validationSchema } from './validation'
-import { MetadataPublishForm } from '../../../@types/Metadata'
+import { MetadataPublishForm, MetadataMarket } from '../../../@types/Metadata'
 import { transformPublishFormToMetadata } from './utils'
 import Preview from './Preview'
 
@@ -28,20 +28,20 @@ export default function PublishPage({
     `)
 
     const metadata = transformPublishFormToMetadata(values)
-    const tokensToMint = '4' // how to know this?
+    const { cost, tokensToMint } = values.price
     const serviceType = values.access === 'Download' ? 'access' : 'compute'
 
     console.log(`
       Transformed metadata values:
       ----------------------
       ${JSON.stringify(metadata, null, 2)}
-      Cost: 1
+      Cost: ${cost}
       Tokens to mint: ${tokensToMint}
     `)
 
     try {
       const ddo = await publish(metadata as any, tokensToMint, [
-        { serviceType, cost: '1' }
+        { serviceType, cost }
       ])
 
       if (publishError) {
diff --git a/src/components/pages/Publish/validation.ts b/src/components/pages/Publish/validation.ts
index 6e629adec..e2c948855 100644
--- a/src/components/pages/Publish/validation.ts
+++ b/src/components/pages/Publish/validation.ts
@@ -6,7 +6,10 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   // ---- required fields ----
   name: Yup.string().required('Required'),
   author: Yup.string().required('Required'),
-  cost: Yup.string().required('Required'),
+  price: Yup.object().shape({
+    cost: Yup.string().required('Required'),
+    tokensToMint: Yup.string().required('Required')
+  }),
   files: Yup.array<FileMetadata>().required('Required').nullable(),
   description: Yup.string().required('Required'),
   license: Yup.string().required('Required'),
@@ -24,7 +27,10 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
 export const initialValues: MetadataPublishForm = {
   name: '',
   author: '',
-  cost: '',
+  price: {
+    cost: '',
+    tokensToMint: ''
+  },
   files: '',
   description: '',
   license: '',
diff --git a/src/pages/publish.tsx b/src/pages/publish.tsx
index 0ed58d5af..b8ffd4736 100644
--- a/src/pages/publish.tsx
+++ b/src/pages/publish.tsx
@@ -32,7 +32,6 @@ export const contentQuery = graphql`
                 type
                 required
                 options
-                min
               }
               success
             }