hack in some basic input validation

src/routes/Publish/Step.tsx

@@ -26,19 +26,9 @@ interface StepProps {
     content?: string
 }
 
-interface StepState {
-    inputInvalid: boolean
-}
-
-export default class Step extends PureComponent<StepProps, StepState> {
-    public state = {
-        // TODO: manipulate with some form validation for every step,
-        // should be 'true' by default here
-        inputInvalid: false
-    }
-
+export default class Step extends PureComponent<StepProps, {}> {
     public previousButton() {
-        let { currentStep, prev } = this.props
+        const { currentStep, prev } = this.props
 
         if (currentStep !== 1) {
             return (
@@ -51,12 +41,14 @@ export default class Step extends PureComponent<StepProps, StepState> {
     }
 
     public nextButton() {
-        let { currentStep, next, totalSteps } = this.props
-        const { inputInvalid } = this.state
+        const { currentStep, next, totalSteps, state } = this.props
 
         if (currentStep < totalSteps) {
             return (
-                <Button disabled={inputInvalid} onClick={next}>
+                <Button
+                    disabled={!state.validationStatus[currentStep]}
+                    onClick={next}
+                >
                     Next →
                 </Button>
             )

src/routes/Publish/index.tsx

@@ -28,6 +28,7 @@ interface PublishState {
     publishedDid?: string
     publishingError?: string
     currentStep?: number
+    validationStatus?: any
 }
 
 class Publish extends Component<{}, PublishState> {
@@ -46,12 +47,19 @@ class Publish extends Component<{}, PublishState> {
         isPublishing: false,
         isPublished: false,
         publishedDid: '',
-        publishingError: ''
+        publishingError: '',
+        validationStatus: {
+            1: false,
+            2: false,
+            3: false
+        }
     }
 
     private inputChange = (
         event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
     ) => {
+        this.validateInputs(event.currentTarget.name, event.currentTarget.value)
+
         this.setState({
             [event.currentTarget.name]: event.currentTarget.value
         })
@@ -102,6 +110,51 @@ 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 }
+                })
+            }
+        }
+
+        // Step 2
+        if (name === 'description') {
+            if (value !== '') {
+                this.setState({
+                    validationStatus: { 2: true }
+                })
+            } else {
+                this.setState({
+                    validationStatus: { 2: false }
+                })
+            }
+        }
+
+        // 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>) => {
         event.preventDefault()
         this.setState({