split up form in multiple steps, one component for all steps

src/data/form-publish.json

@@ -1,6 +1,9 @@
 {
   "title": "Publish a new data asset",
   "description": "A cool form description",
+  "steps": [
+    {
+      "title": "Essentials",
       "fields": {
         "name": {
           "label": "Title",
@@ -15,7 +18,12 @@
           "type": "text",
           "required": true,
           "help": "Provide one or multiple links to your data files."
+        }
+      }
     },
+    {
+      "title": "Information",
+      "fields": {
         "description": {
           "label": "Description",
           "placeholder": "i.e. My cool data set",
@@ -59,6 +67,17 @@
             "Communication & Journalism",
             "Other"
           ]
+        }
+      }
+    },
+    {
+      "title": "Credentials",
+      "fields": {
+        "author": {
+          "label": "Author",
+          "placeholder": "i.e. Jelly McJellyfish",
+          "type": "text",
+          "required": true
         },
         "copyrightHolder": {
           "label": "Copyright Holder",
@@ -66,12 +85,6 @@
           "type": "text",
           "required": true
         },
-    "author": {
-      "label": "Author",
-      "placeholder": "i.e. Jelly McJellyfish",
-      "type": "text",
-      "required": true
-    },
         "license": {
           "label": "License",
           "type": "select",
@@ -87,4 +100,12 @@
           ]
         }
       }
+    },
+    {
+      "title": "Wallet"
+    },
+    {
+      "title": "Complete"
+    }
+  ]
 }

src/routes/Publish/Step.module.scss

@@ -0,0 +1,5 @@
+@import '../../styles/variables';
+
+.title {
+    font-size: $font-size-h2;
+}

src/routes/Publish/Step.tsx

@@ -0,0 +1,121 @@
+import React, { PureComponent } from 'react'
+import Input from '../../components/atoms/Form/Input'
+import Label from '../../components/atoms/Form/Label'
+import Row from '../../components/atoms/Form/Row'
+import Button from '../../components/atoms/Button'
+import { User } from '../../context/User'
+import Files from './Files/'
+import styles from './Step.module.scss'
+
+interface StepProps {
+    currentStep: number
+    index: number
+    inputChange: any
+    inputToArrayChange: any
+    fields?: any[]
+    files?: any
+    state: any
+    title: string
+    next: any
+    prev: any
+}
+
+export default class Step extends PureComponent<StepProps, {}> {
+    public previousButton() {
+        let { currentStep, prev } = this.props
+
+        if (currentStep !== 1) {
+            return <Button onClick={prev}>Previous</Button>
+        }
+        return null
+    }
+
+    public nextButton() {
+        let { currentStep, next } = this.props
+        if (currentStep < 3) {
+            return <Button onClick={next}>Next</Button>
+        }
+        return null
+    }
+
+    public render() {
+        const {
+            currentStep,
+            index,
+            title,
+            fields,
+            inputChange,
+            inputToArrayChange,
+            files,
+            state
+        } = this.props
+
+        if (currentStep !== index + 1) {
+            return null
+        }
+
+        return (
+            <>
+                <h3 className={styles.title}>{title}</h3>
+                {fields &&
+                    Object.entries(fields).map(([key, value]) => {
+                        let onChange = inputChange
+
+                        if (key === 'files' || key === 'categories') {
+                            onChange = inputToArrayChange
+                        }
+
+                        if (key === 'files') {
+                            return (
+                                <Row key={key}>
+                                    <Label htmlFor={key} required>
+                                        {value.label}
+                                    </Label>
+                                    <Files
+                                        placeholder={value.placeholder}
+                                        name={value.name}
+                                        help={value.help}
+                                        files={files}
+                                        onChange={onChange}
+                                    />
+                                </Row>
+                            )
+                        }
+
+                        return (
+                            <Input
+                                key={key}
+                                name={key}
+                                label={value.label}
+                                placeholder={value.placeholder}
+                                required={value.required}
+                                type={value.type}
+                                help={value.help}
+                                options={value.options}
+                                onChange={onChange}
+                                rows={value.rows}
+                                value={(state as any)[key]}
+                            />
+                        )
+                    })}
+
+                {this.previousButton()}
+                {this.nextButton()}
+
+                <User.Consumer>
+                    {states =>
+                        states.isLogged ? (
+                            <Button primary>Register asset</Button>
+                        ) : (
+                            <Button onClick={states.startLogin}>
+                                Register asset (login first)
+                            </Button>
+                        )
+                    }
+                </User.Consumer>
+            </>
+        )
+    }
+}
+
+Step.contextType = User

src/routes/Publish/index.tsx

@@ -1,15 +1,10 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
 import { Logger } from '@oceanprotocol/squid'
 import Route from '../../components/templates/Route'
-import Button from '../../components/atoms/Button'
 import Form from '../../components/atoms/Form/Form'
-import Input from '../../components/atoms/Form/Input'
-import Label from '../../components/atoms/Form/Label'
-import Row from '../../components/atoms/Form/Row'
-import { User } from '../../context/User'
 import AssetModel from '../../models/AssetModel'
 import Web3message from '../../components/Web3message'
-import Files from './Files/'
+import Step from './Step'
 
 import form from '../../data/form-publish.json'
 
@@ -19,7 +14,7 @@ interface PublishState {
     name?: string
     dateCreated?: Date
     description?: string
-    files?: any[]
+    files?: string[]
     price?: number
     author?: string
     type?: AssetType
@@ -31,10 +26,12 @@ interface PublishState {
     isPublished?: boolean
     publishedDid?: string
     publishingError?: string
+    currentStep?: number
 }
 
 class Publish extends Component<{}, PublishState> {
     public state = {
+        currentStep: 1,
         name: '',
         dateCreated: new Date(),
         description: '',
@@ -51,48 +48,6 @@ class Publish extends Component<{}, PublishState> {
         publishingError: ''
     }
 
-    public formFields = (entries: any[]) =>
-        entries.map(([key, value]) => {
-            let onChange = this.inputChange
-
-            if (key === 'files' || key === 'categories') {
-                onChange = this.inputToArrayChange
-            }
-
-            if (key === 'files') {
-                return (
-                    <Row key={key}>
-                        <Label htmlFor={key} required>
-                            {value.label}
-                        </Label>
-                        <Files
-                            placeholder={value.placeholder}
-                            name={value.name}
-                            help={value.help}
-                            files={this.state.files}
-                            onChange={onChange}
-                        />
-                    </Row>
-                )
-            }
-
-            return (
-                <Input
-                    key={key}
-                    name={key}
-                    label={value.label}
-                    placeholder={value.placeholder}
-                    required={value.required}
-                    type={value.type}
-                    help={value.help}
-                    options={value.options}
-                    onChange={onChange}
-                    rows={value.rows}
-                    value={(this.state as any)[key]}
-                />
-            )
-        })
-
     private inputChange = (
         event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
     ) => {
@@ -113,6 +68,22 @@ class Publish extends Component<{}, PublishState> {
         this.setState({ publishingError: '' })
     }
 
+    private next = () => {
+        let { currentStep } = this.state
+        currentStep = currentStep >= 2 ? 3 : currentStep + 1
+        this.setState({
+            currentStep: currentStep
+        })
+    }
+
+    private prev = () => {
+        let { currentStep } = this.state
+        currentStep = currentStep <= 1 ? 1 : currentStep - 1
+        this.setState({
+            currentStep: currentStep
+        })
+    }
+
     private toStart = () => {
         this.setState({
             name: '',
@@ -187,8 +158,6 @@ class Publish extends Component<{}, PublishState> {
     }
 
     public render() {
-        const entries = Object.entries(form.fields)
-
         return (
             <Route title="Publish">
                 <Web3message />
@@ -200,25 +169,27 @@ class Publish extends Component<{}, PublishState> {
                 ) : this.state.isPublished ? (
                     this.publishedState()
                 ) : (
-                    <Form
+                    <>
-                        title={form.title}
+                        <p>Step {this.state.currentStep} </p>
-                        description={form.description}
-                        onSubmit={this.registerAsset}
-                    >
-                        {this.formFields(entries)}
 
-                        <User.Consumer>
+                        <Form onSubmit={this.registerAsset}>
-                            {states =>
+                            {form.steps.map((step: any, index: number) => (
-                                states.isLogged ? (
+                                <Step
-                                    <Button primary>Register asset</Button>
+                                    key={index}
-                                ) : (
+                                    index={index}
-                                    <Button onClick={states.startLogin}>
+                                    title={step.title}
-                                        Register asset (login first)
+                                    currentStep={this.state.currentStep}
-                                    </Button>
+                                    fields={step.fields}
-                                )
+                                    inputChange={this.inputChange}
-                            }
+                                    inputToArrayChange={this.inputToArrayChange}
-                        </User.Consumer>
+                                    files={this.state.files}
+                                    state={this.state}
+                                    next={this.next}
+                                    prev={this.prev}
+                                />
+                            ))}
                         </Form>
+                    </>
                 )}
             </Route>
         )
@@ -249,5 +220,4 @@ class Publish extends Component<{}, PublishState> {
     }
 }
 
-Publish.contextType = User
 export default Publish