refactor price data collection

src/components/molecules/FormFields/Price/Advanced.tsx

@@ -1,8 +1,6 @@
 import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
-import { InputProps } from '../../../atoms/Input'
 import stylesIndex from './index.module.css'
 import styles from './Advanced.module.css'
-import { MetadataPublishForm } from '../../../../@types/MetaData'
 import FormHelp from '../../../atoms/Input/Help'
 import Wallet from '../../Wallet'
 import { useOcean } from '@oceanprotocol/react'
@@ -11,17 +9,20 @@ import Coin from './Coin'
 import { isCorrectNetwork } from '../../../../utils/wallet'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 
-export default function Advanced(props: InputProps): ReactElement {
+export default function Advanced({
+  ocean,
+  tokensToMint,
+  weightOnDataToken,
+  onChange
+}: {
+  ocean: string
+  tokensToMint: number
+  weightOnDataToken: string
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void
+}): ReactElement {
   const { appConfig } = useSiteMetadata()
-  const { price } = props.form.values as MetadataPublishForm
   const { account, balance, chainId } = useOcean()
 
-  const cost = '1'
-  const weightOnDataToken = '90' // in %
-
-  const [ocean, setOcean] = useState('10')
-  const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10)
-
   const [error, setError] = useState<string>()
   const correctNetwork = isCorrectNetwork(chainId)
   const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) =>
@@ -41,10 +42,6 @@ export default function Advanced(props: InputProps): ReactElement {
     }
   }, [ocean])
 
-  function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
-    setOcean(event.target.value)
-  }
-
   return (
     <div className={stylesIndex.content}>
       <div className={styles.advanced}>
@@ -70,7 +67,7 @@ export default function Advanced(props: InputProps): ReactElement {
             symbol="OCEAN"
             value={ocean}
             weight={`${100 - Number(weightOnDataToken)}%`}
-            onChange={handleOceanChange}
+            onChange={onChange}
           />
           <Coin
             name="price.tokensToMint"
@@ -78,7 +75,6 @@ export default function Advanced(props: InputProps): ReactElement {
             value={tokensToMint.toString()}
             weight={`${weightOnDataToken}%`}
             readOnly
-            field={props.field}
           />
         </div>
 
@@ -88,15 +84,6 @@ export default function Advanced(props: InputProps): ReactElement {
           </div>
         )}
       </div>
-
-      {/* Hidden to fields to actually collect form values for Formik state */}
-      <input type="hidden" {...props.field} name="price.cost" value={cost} />
-      <input
-        type="hidden"
-        {...props.field}
-        name="price.tokensToMint"
-        value={tokensToMint}
-      />
     </div>
   )
 }

src/components/molecules/FormFields/Price/Coin.module.css

@@ -35,6 +35,8 @@
   flex-wrap: wrap;
   justify-content: center;
   text-align: center;
+  max-width: 12rem;
+  margin: auto;
 }
 
 .max {

src/components/molecules/FormFields/Price/Coin.tsx

@@ -11,7 +11,8 @@ export default function Coin({
   value,
   weight,
   onChange,
-  readOnly
+  readOnly,
+  field
 }: {
   symbol: string
   name: string
@@ -29,6 +30,7 @@ export default function Coin({
 
       <div className={styles.data}>
         <InputElement
+          {...field}
           value={value}
           name={name}
           type="number"

src/components/molecules/FormFields/Price/Cost.tsx

@@ -1,30 +0,0 @@
-import React, { ReactElement } from 'react'
-import InputElement from '../../../atoms/Input/InputElement'
-import { MetadataPublishForm } from '../../../../@types/MetaData'
-import Conversion from '../../../atoms/Price/Conversion'
-import { InputProps } from '../../../atoms/Input'
-import Label from '../../../atoms/Input/Label'
-import stylesIndex from './index.module.css'
-
-export default function Cost(props: InputProps): ReactElement {
-  const { price } = props.form.values as MetadataPublishForm
-
-  return (
-    <div>
-      <Label htmlFor="price.cost">Ocean Tokens</Label>
-
-      <InputElement
-        {...props.field}
-        value={(price && price.cost) || 0}
-        name="price.cost"
-        type="number"
-        prefix="OCEAN"
-      />
-
-      <Conversion
-        price={price.cost.toString()}
-        className={stylesIndex.conversion}
-      />
-    </div>
-  )
-}

src/components/molecules/FormFields/Price/Simple.module.css

@@ -1,8 +1,5 @@
-.simple {
-}
-
-.simple > div:last-child {
-  max-width: 13.25rem;
+.form {
+  max-width: 12rem;
   margin: 0 auto;
 }
 

src/components/molecules/FormFields/Price/Simple.tsx

@@ -1,11 +1,18 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, ChangeEvent } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Simple.module.css'
 import FormHelp from '../../../atoms/Input/Help'
-import { InputProps } from '../../../atoms/Input'
-import Cost from './Cost'
+import Label from '../../../atoms/Input/Label'
+import InputElement from '../../../atoms/Input/InputElement'
+import Conversion from '../../../atoms/Price/Conversion'
 
-export default function Simple(props: InputProps): ReactElement {
+export default function Simple({
+  ocean,
+  onChange
+}: {
+  ocean: string
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void
+}): ReactElement {
   return (
     <div className={stylesIndex.content}>
       <div className={styles.simple}>
@@ -13,7 +20,20 @@ export default function Simple(props: InputProps): ReactElement {
           Set your price for accessing this data set. A Data Token contract for
           this data set, worth the entered amount of OCEAN will be created.
         </FormHelp>
-        <Cost {...props} />
+
+        <form className={styles.form}>
+          <Label htmlFor="ocean">Ocean Tokens</Label>
+
+          <InputElement
+            value={ocean}
+            name="ocean"
+            type="number"
+            prefix="OCEAN"
+            onChange={onChange}
+          />
+
+          <Conversion price={ocean} className={stylesIndex.conversion} />
+        </form>
       </div>
     </div>
   )

src/components/molecules/FormFields/Price/index.tsx

@@ -1,19 +1,54 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
 import { InputProps } from '../../../atoms/Input'
 import styles from './index.module.css'
 import Tabs from '../../../atoms/Tabs'
 import Simple from './Simple'
 import Advanced from './Advanced'
+import { useField } from 'formik'
 
 export default function Price(props: InputProps): ReactElement {
+  const [field, meta, helpers] = useField(props)
+
+  const cost = 1
+  const weightOnDataToken = '90' // in %
+  const [ocean, setOcean] = useState('1')
+  const [tokensToMint, setTokensToMint] = useState<number>()
+
+  function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
+    setOcean(event.target.value)
+  }
+
+  // Always update everything when ocean changes
+  useEffect(() => {
+    const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10)
+    setTokensToMint(tokensToMint)
+    helpers.setValue({ cost, tokensToMint })
+  }, [ocean])
+
   const tabs = [
-    { title: 'Simple: Fixed', content: <Simple {...props} /> },
-    { title: 'Advanced: Dynamic', content: <Advanced {...props} /> }
+    {
+      title: 'Simple: Fixed',
+      content: <Simple ocean={ocean} onChange={handleOceanChange} />
+    },
+    {
+      title: 'Advanced: Dynamic',
+      content: (
+        <Advanced
+          ocean={ocean}
+          tokensToMint={tokensToMint}
+          weightOnDataToken={weightOnDataToken}
+          onChange={handleOceanChange}
+        />
+      )
+    }
   ]
 
   return (
     <div className={styles.price}>
       <Tabs items={tabs} />
+      <pre>
+        <code>{JSON.stringify(field.value)}</code>
+      </pre>
     </div>
   )
 }

src/global/_code.css

@@ -1,7 +1,7 @@
 code {
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-small);
-  color: var(--brand-grey-light);
+  color: var(--brand-grey);
   text-shadow: none;
 }
 
@@ -15,7 +15,7 @@ pre {
   display: block;
   margin: calc(var(--spacer) / 2) 0;
   padding: 0;
-  border: 1px solid var(--brand-grey-dark);
+  border: 1px solid var(--brand-grey-lighter);
   border-radius: var(--border-radius);
 }
 

src/models/FormPublish.ts

@@ -29,7 +29,7 @@ export const initialValues: MetadataPublishForm = {
   author: '',
   price: {
     cost: 1,
-    tokensToMint: null
+    tokensToMint: 1
   },
   files: '',
   description: '',