From 9b5cd8b8ed0c483bfdd1cbf9d2d94f37626f5eaa Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 29 Oct 2021 14:38:30 +0100
Subject: [PATCH] start creating actual wizard

---
 package-lock.json                             |  2 +-
 .../FormPublish/FormActions.module.css        |  2 +
 .../Publish/FormPublish/FormActions.tsx       | 38 +++++----
 .../Publish/FormPublish/index.module.css      |  1 -
 src/components/Publish/FormPublish/index.tsx  | 81 ++++---------------
 src/components/Publish/_constants.ts          |  1 +
 src/components/Publish/_types.ts              |  1 +
 7 files changed, 43 insertions(+), 83 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cd6363fd4..5f579f444 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -77658,4 +77658,4 @@
       "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Publish/FormPublish/FormActions.module.css b/src/components/Publish/FormPublish/FormActions.module.css
index 8553be147..2304f7f58 100644
--- a/src/components/Publish/FormPublish/FormActions.module.css
+++ b/src/components/Publish/FormPublish/FormActions.module.css
@@ -2,4 +2,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding-top: var(--spacer);
+  border-top: 1px solid var(--border-color);
 }
diff --git a/src/components/Publish/FormPublish/FormActions.tsx b/src/components/Publish/FormPublish/FormActions.tsx
index b24dc901e..382f3f707 100644
--- a/src/components/Publish/FormPublish/FormActions.tsx
+++ b/src/components/Publish/FormPublish/FormActions.tsx
@@ -1,34 +1,38 @@
-import React, { FormEvent, ReactElement } from 'react'
+import React, { ReactElement } from 'react'
 import { useOcean } from '@context/Ocean'
 import Button from '@shared/atoms/Button'
 import styles from './FormActions.module.css'
 import { FormikContextType, useFormikContext } from 'formik'
 import { FormPublishData } from '../_types'
 
-export default function FormActions({
-  isValid,
-  resetFormAndClearStorage
-}: {
-  isValid: boolean
-  resetFormAndClearStorage: (e: FormEvent<Element>) => void
-}): ReactElement {
+export default function FormActions({ step }: { step: number }): ReactElement {
   const { ocean, account } = useOcean()
-  const { status }: FormikContextType<FormPublishData> = useFormikContext()
+  const { status, isValid, setFieldValue }: FormikContextType<FormPublishData> =
+    useFormikContext()
+
+  function handleNext() {
+    setFieldValue('step', step + 1)
+  }
+
+  function handlePrevious() {
+    setFieldValue('step', step - 1)
+  }
 
   return (
     <footer className={styles.actions}>
-      {status !== 'empty' && (
-        <Button style="text" size="small" onClick={resetFormAndClearStorage}>
-          Reset Form
-        </Button>
-      )}
+      <Button onClick={handlePrevious}>Back</Button>
 
-      <Button
+      <Button style="primary" onClick={() => handleNext()}>
+        Continue
+      </Button>
+
+      {/* <Button
+        type="submit"
         style="primary"
-        disabled={!ocean || !account || !isValid || status === 'empty'}
+        disabled={!ocean || !account || !isValid}
       >
         Submit
-      </Button>
+      </Button> */}
     </footer>
   )
 }
diff --git a/src/components/Publish/FormPublish/index.module.css b/src/components/Publish/FormPublish/index.module.css
index dbff1e924..55c0b5be0 100644
--- a/src/components/Publish/FormPublish/index.module.css
+++ b/src/components/Publish/FormPublish/index.module.css
@@ -1,5 +1,4 @@
 .form {
   composes: box from '@shared/atoms/Box.module.css';
   margin-bottom: var(--spacer);
-  padding: 0;
 }
diff --git a/src/components/Publish/FormPublish/index.tsx b/src/components/Publish/FormPublish/index.tsx
index 92e42b624..455816384 100644
--- a/src/components/Publish/FormPublish/index.tsx
+++ b/src/components/Publish/FormPublish/index.tsx
@@ -1,10 +1,8 @@
-import React, { ReactElement, FormEvent } from 'react'
+import React, { ReactElement } from 'react'
 import { useFormikContext, Form, FormikContextType } from 'formik'
 import FormActions from './FormActions'
 import { FormPublishData } from '../_types'
 import styles from './index.module.css'
-import { initialValues } from '../_constants'
-import Tabs from '@shared/atoms/Tabs'
 import PricingFields from './Pricing'
 import Debug from '../Debug'
 import MetadataFields from './Metadata'
@@ -12,6 +10,20 @@ import ServicesFields from './Services'
 import content from '../../../../content/publish/form.json'
 import Preview from './Preview'
 
+function Steps({ step }: { step: number }) {
+  switch (step) {
+    case 1:
+      return <MetadataFields />
+    case 2:
+      return <ServicesFields />
+    case 3:
+      return <PricingFields />
+    case 4:
+      return <Preview />
+    default:
+  }
+}
+
 export default function FormPublish(): ReactElement {
   const { isValid, values, resetForm }: FormikContextType<FormPublishData> =
     useFormikContext()
@@ -24,70 +36,11 @@ export default function FormPublish(): ReactElement {
   //   // setSubmitting(false)
   // }, [setErrors, setTouched])
 
-  const resetFormAndClearStorage = (e: FormEvent<Element>) => {
-    e.preventDefault()
-
-    resetForm({
-      values: initialValues as FormPublishData,
-      status: 'empty'
-    })
-  }
-
-  const tabs = [
-    {
-      title: content.metadata.title,
-      content: (
-        <>
-          <MetadataFields />
-          <FormActions
-            isValid={isValid}
-            resetFormAndClearStorage={resetFormAndClearStorage}
-          />
-        </>
-      )
-    },
-    {
-      title: content.services.title,
-      content: (
-        <>
-          <ServicesFields />
-          <FormActions
-            isValid={isValid}
-            resetFormAndClearStorage={resetFormAndClearStorage}
-          />
-        </>
-      )
-    },
-    {
-      title: content.pricing.title,
-      content: (
-        <>
-          <PricingFields />
-          <FormActions
-            isValid={isValid}
-            resetFormAndClearStorage={resetFormAndClearStorage}
-          />
-        </>
-      )
-    },
-    {
-      title: content.preview.title,
-      content: (
-        <>
-          <Preview />
-          <FormActions
-            isValid={isValid}
-            resetFormAndClearStorage={resetFormAndClearStorage}
-          />
-        </>
-      )
-    }
-  ]
-
   return (
     <>
       <Form className={styles.form}>
-        <Tabs items={tabs} />
+        <Steps step={values.step} />
+        <FormActions step={values.step} />
       </Form>
       <Debug values={values} />
     </>
diff --git a/src/components/Publish/_constants.ts b/src/components/Publish/_constants.ts
index 047378bd7..9ef33d123 100644
--- a/src/components/Publish/_constants.ts
+++ b/src/components/Publish/_constants.ts
@@ -4,6 +4,7 @@ import { allowDynamicPricing, allowFixedPricing } from '../../../app.config.js'
 import { FormPublishData } from './_types'
 
 export const initialValues: Partial<FormPublishData> = {
+  step: 1,
   type: 'dataset',
   metadata: {
     name: '',
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index c0fbbd329..df645bc1e 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -14,6 +14,7 @@ export interface FormPublishService {
 }
 
 export interface FormPublishData {
+  step: number
   type: 'dataset' | 'algorithm'
   metadata: {
     name: string