refactor, move feedback out of form

src/components/atoms/Tabs.tsx

@@ -10,14 +10,19 @@ interface TabsItem {
 export default function Tabs({
   items,
   className,
-  handleTabChange
+  handleTabChange,
+  defaultIndex
 }: {
   items: TabsItem[]
   className?: string
   handleTabChange?: (tabName: string) => void
+  defaultIndex?: number
 }): ReactElement {
   return (
-    <ReactTabs className={`${className && className}`}>
+    <ReactTabs
+      className={`${className && className}`}
+      defaultIndex={defaultIndex}
+    >
       <TabList className={styles.tabList}>
         {items.map((item) => (
           <Tab

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

@@ -5,7 +5,7 @@ import styles from './index.module.css'
 import Tabs from '../../../atoms/Tabs'
 import Fixed from './Fixed'
 import Dynamic from './Dynamic'
-import { useField } from 'formik'
+import { useField, useFormikContext } from 'formik'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import { useOcean } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../../@types/MetaData'
@@ -68,8 +68,9 @@ export default function Price(props: InputProps): ReactElement {
     helpers.setValue({ ...field.value, tokensToMint })
   }, [price])
 
-  // Generate new DT name & symbol
+  // Generate new DT name & symbol, but only once automatically
   useEffect(() => {
+    if (!ocean || typeof field?.value?.datatoken?.name !== 'undefined') return
     generateName()
   }, [ocean])
 
@@ -100,7 +101,11 @@ export default function Price(props: InputProps): ReactElement {
 
   return (
     <div className={styles.price}>
-      <Tabs items={tabs} handleTabChange={handleTabChange} />
+      <Tabs
+        items={tabs}
+        handleTabChange={handleTabChange}
+        defaultIndex={field?.value?.type === 'fixed' ? 0 : 1}
+      />
       {debug === true && (
         <pre>
           <code>{JSON.stringify(field.value, null, 2)}</code>

src/components/pages/Publish/Debug.tsx

@@ -0,0 +1,30 @@
+import React, { ReactElement } from 'react'
+import { MetadataPublishForm } from '../../../@types/MetaData'
+import styles from './index.module.css'
+import { transformPublishFormToMetadata } from './utils'
+
+export default function Debug({
+  values
+}: {
+  values: Partial<MetadataPublishForm>
+}): ReactElement {
+  return (
+    <div className={styles.grid}>
+      <div>
+        <h5>Collected Form Values</h5>
+        <pre>
+          <code>{JSON.stringify(values, null, 2)}</code>
+        </pre>
+      </div>
+
+      <div>
+        <h5>Transformed Values</h5>
+        <pre>
+          <code>
+            {JSON.stringify(transformPublishFormToMetadata(values), null, 2)}
+          </code>
+        </pre>
+      </div>
+    </div>
+  )
+}

src/components/pages/Publish/PublishForm.tsx

@@ -5,17 +5,11 @@ import { useFormikContext, Form, Field } from 'formik'
 import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
-import Loader from '../../atoms/Loader'
-import { Persist } from '../../atoms/FormikPersist'
 
 export default function PublishForm({
-  content,
-  publishStepText,
-  isLoading
+  content
 }: {
   content: FormContent
-  publishStepText?: string
-  isLoading: boolean
 }): ReactElement {
   const { ocean, account } = useOcean()
   const {
@@ -27,7 +21,6 @@ export default function PublishForm({
     resetForm,
     initialValues
   } = useFormikContext()
-  const formName = 'ocean-publish-form'
 
   // reset form validation on every mount
   useEffect(() => {
@@ -52,30 +45,22 @@ export default function PublishForm({
       {content.data.map((field: FormFieldProps) => (
         <Field key={field.name} {...field} component={Input} />
       ))}
-      {isLoading ? (
-        <Loader message={publishStepText} />
-      ) : (
-        <footer className={styles.actions}>
-          <Button
-            style="primary"
-            type="submit"
-            disabled={!ocean || !account || !isValid || status === 'empty'}
-          >
-            Submit
-          </Button>
 
-          {status !== 'empty' && (
-            <Button
-              style="text"
-              size="small"
-              onClick={resetFormAndClearStorage}
-            >
-              Reset Form
-            </Button>
-          )}
-        </footer>
-      )}
-      <Persist name={formName} ignoreFields={['isSubmitting']} />
+      <footer className={styles.actions}>
+        <Button
+          style="primary"
+          type="submit"
+          disabled={!ocean || !account || !isValid || status === 'empty'}
+        >
+          Submit
+        </Button>
+
+        {status !== 'empty' && (
+          <Button style="text" size="small" onClick={resetFormAndClearStorage}>
+            Reset Form
+          </Button>
+        )}
+      </footer>
     </Form>
   )
 }

src/components/pages/Publish/index.module.css

@@ -15,3 +15,11 @@
     top: calc(var(--spacer) / 2);
   }
 }
+
+.feedback {
+  width: 100%;
+  min-height: 60vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/pages/Publish/index.tsx

@@ -10,9 +10,14 @@ import { FormContent } from '../../../@types/Form'
 import { initialValues, validationSchema } from '../../../models/FormPublish'
 import { transformPublishFormToMetadata } from './utils'
 import Preview from './Preview'
-import { MetadataMarket, MetadataPublishForm } from '../../../@types/MetaData'
+import { MetadataPublishForm } from '../../../@types/MetaData'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import { Logger, Metadata } from '@oceanprotocol/lib'
+import Loader from '../../atoms/Loader'
+import { Persist } from '../../atoms/FormikPersist'
+import Debug from './Debug'
+
+const formName = 'ocean-publish-form'
 
 export default function PublishPage({
   content
@@ -60,56 +65,38 @@ export default function PublishPage({
   }
 
   return (
-    <article className={styles.grid}>
-      <Formik
-        initialValues={initialValues}
-        initialStatus="empty"
-        validationSchema={validationSchema}
-        onSubmit={async (values, { setSubmitting, resetForm }) => {
-          await handleSubmit(values, resetForm)
-          setSubmitting(false)
-        }}
-      >
-        {({ values }) => (
-          <>
-            <PublishForm
-              content={content.form}
-              isLoading={isLoading}
-              publishStepText={publishStepText}
-            />
-            <aside>
-              <div className={styles.sticky}>
-                <Preview values={values} />
-                <Web3Feedback />
-              </div>
-            </aside>
+    <Formik
+      initialValues={initialValues}
+      initialStatus="empty"
+      validationSchema={validationSchema}
+      onSubmit={async (values, { setSubmitting, resetForm }) => {
+        await handleSubmit(values, resetForm)
+        setSubmitting(false)
+      }}
+    >
+      {({ values }) => (
+        <>
+          <Persist name={formName} ignoreFields={['isSubmitting']} />
 
-            {debug === true && (
-              <>
-                <div>
-                  <h5>Collected Form Values</h5>
-                  <pre>
-                    <code>{JSON.stringify(values, null, 2)}</code>
-                  </pre>
+          {isLoading ? (
+            <div className={styles.feedback}>
+              <Loader message={publishStepText} />
+            </div>
+          ) : (
+            <article className={styles.grid}>
+              <PublishForm content={content.form} />
+              <aside>
+                <div className={styles.sticky}>
+                  <Preview values={values} />
+                  <Web3Feedback />
                 </div>
+              </aside>
+            </article>
+          )}
 
-                <div>
-                  <h5>Transformed Values</h5>
-                  <pre>
-                    <code>
-                      {JSON.stringify(
-                        transformPublishFormToMetadata(values),
-                        null,
-                        2
-                      )}
-                    </code>
-                  </pre>
-                </div>
-              </>
-            )}
-          </>
-        )}
-      </Formik>
-    </article>
+          {debug === true && <Debug values={values} />}
+        </>
+      )}
+    </Formik>
   )
 }