From b61d1cc63738feaa65e01ab10e8e784e9467ef60 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 21 Feb 2019 14:35:25 +0100
Subject: [PATCH] new form validation mechanism

---
 src/routes/Publish/Files/index.tsx |   2 +-
 src/routes/Publish/Step.tsx        |   6 +-
 src/routes/Publish/index.tsx       | 104 ++++++++++++++++++-----------
 3 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/src/routes/Publish/Files/index.tsx b/src/routes/Publish/Files/index.tsx
index 600fb61..c50e7cf 100644
--- a/src/routes/Publish/Files/index.tsx
+++ b/src/routes/Publish/Files/index.tsx
@@ -52,7 +52,7 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
                 <input
                     type="hidden"
                     name={name}
-                    value={files}
+                    value={JSON.stringify(files)}
                     onChange={onChange}
                 />
 
diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx
index 4001f54..7d06e6d 100644
--- a/src/routes/Publish/Step.tsx
+++ b/src/routes/Publish/Step.tsx
@@ -46,7 +46,9 @@ export default class Step extends PureComponent<StepProps, {}> {
         if (currentStep < totalSteps) {
             return (
                 <Button
-                    disabled={!state.validationStatus[currentStep]}
+                    disabled={
+                        !state.validationStatus[currentStep].allFieldsValid
+                    }
                     onClick={next}
                 >
                     Next →
@@ -101,7 +103,7 @@ export default class Step extends PureComponent<StepProps, {}> {
                                     </Label>
                                     <Files
                                         placeholder={value.placeholder}
-                                        name={value.name}
+                                        name={key}
                                         help={value.help}
                                         files={state.files}
                                         onChange={onChange}
diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx
index 7b7da1b..a0c6851 100644
--- a/src/routes/Publish/index.tsx
+++ b/src/routes/Publish/index.tsx
@@ -49,9 +49,14 @@ class Publish extends Component<{}, PublishState> {
         publishedDid: '',
         publishingError: '',
         validationStatus: {
-            1: false,
-            2: false,
-            3: false
+            1: { name: false, files: false, allFieldsValid: false },
+            2: { description: false, categories: false, allFieldsValid: false },
+            3: {
+                author: false,
+                copyrightHolder: false,
+                license: false,
+                allFieldsValid: false
+            }
         }
     }
 
@@ -111,48 +116,67 @@ class Publish extends Component<{}, PublishState> {
     }
 
     private validateInputs = (name: string, value: any) => {
-        // Step 1
-        if (name === 'name') {
-            if (value !== '') {
-                this.setState({
-                    validationStatus: { 1: true }
-                })
-            } else {
-                this.setState({
-                    validationStatus: { 1: false }
-                })
-            }
+        let { validationStatus } = this.state
+        let hasContent = value.length > 0
+
+        // Setting state for all fields
+        if (hasContent) {
+            this.setState(prevState => ({
+                validationStatus: {
+                    ...prevState.validationStatus,
+                    [this.state.currentStep]: {
+                        ...prevState.validationStatus[this.state.currentStep],
+                        [name]: true
+                    }
+                }
+            }))
+        } else {
+            this.setState(prevState => ({
+                validationStatus: {
+                    ...prevState.validationStatus,
+                    [this.state.currentStep]: {
+                        ...prevState.validationStatus[this.state.currentStep],
+                        [name]: false
+                    }
+                }
+            }))
         }
 
-        // Step 2
-        if (name === 'description') {
-            if (value !== '') {
-                this.setState({
-                    validationStatus: { 2: true }
-                })
-            } else {
-                this.setState({
-                    validationStatus: { 2: false }
-                })
-            }
+        //
+        // Step 1
+        //
+        if (validationStatus[1].name) {
+            this.setState(prevState => ({
+                validationStatus: {
+                    ...prevState.validationStatus,
+                    1: {
+                        ...prevState.validationStatus[1],
+                        allFieldsValid: true
+                    }
+                }
+            }))
         }
 
+        console.log(validationStatus[1])
+
+        //
+        // Step 2
+        //
+        if (validationStatus[2].description) {
+            this.setState(prevState => ({
+                validationStatus: {
+                    ...prevState.validationStatus,
+                    2: {
+                        ...prevState.validationStatus[2],
+                        allFieldsValid: true
+                    }
+                }
+            }))
+        }
+
+        console.log(validationStatus[2])
+
         // Step 3
-        if (
-            name === 'author' ||
-            name === 'copyrightHolder' ||
-            name === 'license'
-        ) {
-            if (value !== '') {
-                this.setState({
-                    validationStatus: { 3: true }
-                })
-            } else {
-                this.setState({
-                    validationStatus: { 3: false }
-                })
-            }
-        }
     }
 
     private registerAsset = async (event: FormEvent<HTMLFormElement>) => {