From e91de4a64d924e57abe8c29210a8b4586b0de7e5 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 19 Feb 2019 16:32:58 +0100 Subject: [PATCH 01/21] split up form in multiple steps, one component for all steps --- src/data/form-publish.json | 183 ++++++++++++++++------------ src/routes/Publish/Step.module.scss | 5 + src/routes/Publish/Step.tsx | 121 ++++++++++++++++++ src/routes/Publish/index.tsx | 110 ++++++----------- 4 files changed, 268 insertions(+), 151 deletions(-) create mode 100644 src/routes/Publish/Step.module.scss create mode 100644 src/routes/Publish/Step.tsx diff --git a/src/data/form-publish.json b/src/data/form-publish.json index cc221be..37c7c6e 100644 --- a/src/data/form-publish.json +++ b/src/data/form-publish.json @@ -1,90 +1,111 @@ { "title": "Publish a new data asset", "description": "A cool form description", - "fields": { - "name": { - "label": "Title", - "placeholder": "i.e. My cool data set", - "type": "text", - "required": true, - "help": "Help me Obiwan" + "steps": [ + { + "title": "Essentials", + "fields": { + "name": { + "label": "Title", + "placeholder": "i.e. My cool data set", + "type": "text", + "required": true, + "help": "Help me Obiwan" + }, + "files": { + "label": "Files", + "placeholder": "i.e. https://file.com/file.json", + "type": "text", + "required": true, + "help": "Provide one or multiple links to your data files." + } + } }, - "files": { - "label": "Files", - "placeholder": "i.e. https://file.com/file.json", - "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", + "type": "textarea", + "required": true, + "rows": 5 + }, + "categories": { + "label": "Categories", + "type": "select", + "options": [ + "Image Recognition", + "Dataset Of Datasets", + "Language", + "Performing Arts", + "Visual Arts & Design", + "Philosophy", + "History", + "Theology", + "Anthropology & Archeology", + "Sociology", + "Psychology", + "Politics", + "Interdisciplinary", + "Economics & Finance", + "Demography", + "Biology", + "Chemistry", + "Physics & Energy", + "Earth & Climate", + "Space & Astronomy", + "Mathematics", + "Computer Technology", + "Engineering", + "Agriculture & Bio Engineering", + "Transportation", + "Urban Planning", + "Medicine", + "Business & Management", + "Sports & Recreation", + "Communication & Journalism", + "Other" + ] + } + } }, - "description": { - "label": "Description", - "placeholder": "i.e. My cool data set", - "type": "textarea", - "required": true, - "rows": 5 + { + "title": "Credentials", + "fields": { + "author": { + "label": "Author", + "placeholder": "i.e. Jelly McJellyfish", + "type": "text", + "required": true + }, + "copyrightHolder": { + "label": "Copyright Holder", + "placeholder": "i.e. fwhfiw", + "type": "text", + "required": true + }, + "license": { + "label": "License", + "type": "select", + "required": true, + "options": [ + "Public Domain", + "CC BY: Attribution", + "CC BY-SA: Attribution ShareAlike", + "CC BY-ND: Attribution-NoDerivs", + "CC BY-NC: Attribution-NonCommercial", + "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike", + "CC BY-NC-ND: Attribution-NonCommercial-NoDerivs" + ] + } + } }, - "categories": { - "label": "Categories", - "type": "select", - "options": [ - "Image Recognition", - "Dataset Of Datasets", - "Language", - "Performing Arts", - "Visual Arts & Design", - "Philosophy", - "History", - "Theology", - "Anthropology & Archeology", - "Sociology", - "Psychology", - "Politics", - "Interdisciplinary", - "Economics & Finance", - "Demography", - "Biology", - "Chemistry", - "Physics & Energy", - "Earth & Climate", - "Space & Astronomy", - "Mathematics", - "Computer Technology", - "Engineering", - "Agriculture & Bio Engineering", - "Transportation", - "Urban Planning", - "Medicine", - "Business & Management", - "Sports & Recreation", - "Communication & Journalism", - "Other" - ] + { + "title": "Wallet" }, - "copyrightHolder": { - "label": "Copyright Holder", - "placeholder": "i.e. fwhfiw", - "type": "text", - "required": true - }, - "author": { - "label": "Author", - "placeholder": "i.e. Jelly McJellyfish", - "type": "text", - "required": true - }, - "license": { - "label": "License", - "type": "select", - "required": true, - "options": [ - "Public Domain", - "CC BY: Attribution", - "CC BY-SA: Attribution ShareAlike", - "CC BY-ND: Attribution-NoDerivs", - "CC BY-NC: Attribution-NonCommercial", - "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike", - "CC BY-NC-ND: Attribution-NonCommercial-NoDerivs" - ] + { + "title": "Complete" } - } + ] } diff --git a/src/routes/Publish/Step.module.scss b/src/routes/Publish/Step.module.scss new file mode 100644 index 0000000..e56002c --- /dev/null +++ b/src/routes/Publish/Step.module.scss @@ -0,0 +1,5 @@ +@import '../../styles/variables'; + +.title { + font-size: $font-size-h2; +} diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx new file mode 100644 index 0000000..56f72b7 --- /dev/null +++ b/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 { + public previousButton() { + let { currentStep, prev } = this.props + + if (currentStep !== 1) { + return + } + return null + } + + public nextButton() { + let { currentStep, next } = this.props + if (currentStep < 3) { + return + } + return null + } + + public render() { + const { + currentStep, + index, + title, + fields, + inputChange, + inputToArrayChange, + files, + state + } = this.props + + if (currentStep !== index + 1) { + return null + } + + return ( + <> +

{title}

+ {fields && + Object.entries(fields).map(([key, value]) => { + let onChange = inputChange + + if (key === 'files' || key === 'categories') { + onChange = inputToArrayChange + } + + if (key === 'files') { + return ( + + + + + ) + } + + return ( + + ) + })} + + {this.previousButton()} + {this.nextButton()} + + + {states => + states.isLogged ? ( + + ) : ( + + ) + } + + + ) + } +} + +Step.contextType = User diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index 8e23393..f27f981 100644 --- a/src/routes/Publish/index.tsx +++ b/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 ( - - - - - ) - } - - return ( - - ) - }) - private inputChange = ( event: ChangeEvent | ChangeEvent ) => { @@ -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 ( @@ -200,25 +169,27 @@ class Publish extends Component<{}, PublishState> { ) : this.state.isPublished ? ( this.publishedState() ) : ( -
- {this.formFields(entries)} + <> +

Step {this.state.currentStep}

- - {states => - states.isLogged ? ( - - ) : ( - - ) - } - -
+
+ {form.steps.map((step: any, index: number) => ( + + ))} + + )}
) @@ -249,5 +220,4 @@ class Publish extends Component<{}, PublishState> { } } -Publish.contextType = User export default Publish From 720705cb6cab0137be4bc9e9e3a94df679a9ea42 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 19 Feb 2019 17:26:15 +0100 Subject: [PATCH 02/21] step & button fixes --- src/data/form-publish.json | 6 ------ src/routes/Publish/Step.tsx | 35 ++++++++++++++++++++--------------- src/routes/Publish/index.tsx | 14 +++++++------- 3 files changed, 27 insertions(+), 28 deletions(-) diff --git a/src/data/form-publish.json b/src/data/form-publish.json index 37c7c6e..5c57de2 100644 --- a/src/data/form-publish.json +++ b/src/data/form-publish.json @@ -100,12 +100,6 @@ ] } } - }, - { - "title": "Wallet" - }, - { - "title": "Complete" } ] } diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx index 56f72b7..6677e1a 100644 --- a/src/routes/Publish/Step.tsx +++ b/src/routes/Publish/Step.tsx @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react' +import React, { PureComponent, FormEvent } from 'react' import Input from '../../components/atoms/Form/Input' import Label from '../../components/atoms/Form/Label' import Row from '../../components/atoms/Form/Row' @@ -18,6 +18,7 @@ interface StepProps { title: string next: any prev: any + totalSteps: number } export default class Step extends PureComponent { @@ -31,8 +32,9 @@ export default class Step extends PureComponent { } public nextButton() { - let { currentStep, next } = this.props - if (currentStep < 3) { + let { currentStep, next, totalSteps } = this.props + + if (currentStep < totalSteps) { return } return null @@ -47,7 +49,8 @@ export default class Step extends PureComponent { inputChange, inputToArrayChange, files, - state + state, + totalSteps } = this.props if (currentStep !== index + 1) { @@ -102,17 +105,19 @@ export default class Step extends PureComponent { {this.previousButton()} {this.nextButton()} - - {states => - states.isLogged ? ( - - ) : ( - - ) - } - + {currentStep === totalSteps && ( + + {states => + states.isLogged ? ( + + ) : ( + + ) + } + + )} ) } diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index f27f981..3583534 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -70,18 +70,17 @@ class Publish extends Component<{}, PublishState> { private next = () => { let { currentStep } = this.state - currentStep = currentStep >= 2 ? 3 : currentStep + 1 - this.setState({ - currentStep: currentStep - }) + const totalSteps = form.steps.length + + currentStep = + currentStep >= totalSteps - 1 ? totalSteps : currentStep + 1 + this.setState({ currentStep }) } private prev = () => { let { currentStep } = this.state currentStep = currentStep <= 1 ? 1 : currentStep - 1 - this.setState({ - currentStep: currentStep - }) + this.setState({ currentStep }) } private toStart = () => { @@ -186,6 +185,7 @@ class Publish extends Component<{}, PublishState> { state={this.state} next={this.next} prev={this.prev} + totalSteps={form.steps.length} /> ))} From 2597e8a63ce5fbb3b401eb241706bfc134805fa1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 19 Feb 2019 17:39:53 +0100 Subject: [PATCH 03/21] progress component setup --- src/routes/Publish/Progress.tsx | 26 ++++++++++++++++++++++++++ src/routes/Publish/index.tsx | 7 ++++++- 2 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 src/routes/Publish/Progress.tsx diff --git a/src/routes/Publish/Progress.tsx b/src/routes/Publish/Progress.tsx new file mode 100644 index 0000000..91e6cb3 --- /dev/null +++ b/src/routes/Publish/Progress.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +const Progress = ({ + currentStep, + totalSteps, + steps +}: { + currentStep: number + totalSteps: number + steps: any[] +}) => { + return ( + + ) +} + +export default Progress diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index 3583534..f035ec5 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -5,6 +5,7 @@ import Form from '../../components/atoms/Form/Form' import AssetModel from '../../models/AssetModel' import Web3message from '../../components/Web3message' import Step from './Step' +import Progress from './Progress' import form from '../../data/form-publish.json' @@ -169,7 +170,11 @@ class Publish extends Component<{}, PublishState> { this.publishedState() ) : ( <> -

Step {this.state.currentStep}

+
{form.steps.map((step: any, index: number) => ( From 73f479be22c31f2d3b31793bf0720bd661ed105c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 20 Feb 2019 11:12:10 +0100 Subject: [PATCH 04/21] add step descriptions, button layout --- src/data/form-publish.json | 3 ++ src/routes/Publish/Step.module.scss | 23 ++++++++++++++ src/routes/Publish/Step.tsx | 48 ++++++++++++++++++----------- src/routes/Publish/index.tsx | 1 + 4 files changed, 57 insertions(+), 18 deletions(-) diff --git a/src/data/form-publish.json b/src/data/form-publish.json index 5c57de2..965c4dd 100644 --- a/src/data/form-publish.json +++ b/src/data/form-publish.json @@ -4,6 +4,7 @@ "steps": [ { "title": "Essentials", + "description": "A description about these essential fields", "fields": { "name": { "label": "Title", @@ -23,6 +24,7 @@ }, { "title": "Information", + "description": "A description about these fields", "fields": { "description": { "label": "Description", @@ -72,6 +74,7 @@ }, { "title": "Credentials", + "description": "A description about these credentials fields", "fields": { "author": { "label": "Author", diff --git a/src/routes/Publish/Step.module.scss b/src/routes/Publish/Step.module.scss index e56002c..0ee678a 100644 --- a/src/routes/Publish/Step.module.scss +++ b/src/routes/Publish/Step.module.scss @@ -1,5 +1,28 @@ @import '../../styles/variables'; +.header { + margin-bottom: $spacer * 1.5; + border-bottom: .1rem solid $brand-grey-lighter; +} + .title { font-size: $font-size-h2; + margin: 0; +} + +.description { + margin-top: $spacer / 4; +} + +.actions { + display: flex; + justify-content: space-between; + border-top: .1rem solid $brand-grey-lighter; + padding-top: $spacer; + margin-top: $spacer * 2; + + button:last-child { + min-width: 12rem; + margin-left: auto; + } } diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx index 6677e1a..6d2e88f 100644 --- a/src/routes/Publish/Step.tsx +++ b/src/routes/Publish/Step.tsx @@ -16,6 +16,7 @@ interface StepProps { files?: any state: any title: string + description: string next: any prev: any totalSteps: number @@ -26,7 +27,11 @@ export default class Step extends PureComponent { let { currentStep, prev } = this.props if (currentStep !== 1) { - return + return ( + + ) } return null } @@ -35,7 +40,7 @@ export default class Step extends PureComponent { let { currentStep, next, totalSteps } = this.props if (currentStep < totalSteps) { - return + return } return null } @@ -45,6 +50,7 @@ export default class Step extends PureComponent { currentStep, index, title, + description, fields, inputChange, inputToArrayChange, @@ -59,7 +65,11 @@ export default class Step extends PureComponent { return ( <> -

{title}

+
+

{title}

+

{description}

+
+ {fields && Object.entries(fields).map(([key, value]) => { let onChange = inputChange @@ -102,22 +112,24 @@ export default class Step extends PureComponent { ) })} - {this.previousButton()} - {this.nextButton()} +
+ {this.previousButton()} + {this.nextButton()} - {currentStep === totalSteps && ( - - {states => - states.isLogged ? ( - - ) : ( - - ) - } - - )} + {currentStep === totalSteps && ( + + {states => + states.isLogged ? ( + + ) : ( + + ) + } + + )} +
) } diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index f035ec5..298f9f0 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -182,6 +182,7 @@ class Publish extends Component<{}, PublishState> { key={index} index={index} title={step.title} + description={step.description} currentStep={this.state.currentStep} fields={step.fields} inputChange={this.inputChange} From ab315532c70ea03305df310d4b47223221fbf9ad Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 20 Feb 2019 12:33:04 +0100 Subject: [PATCH 05/21] progress styling, visually structure form, lots of tweaks --- src/components/atoms/Form/Form.module.scss | 4 ++ src/data/form-publish.json | 7 +- src/routes/Publish/Progress.module.scss | 76 ++++++++++++++++++++++ src/routes/Publish/Progress.tsx | 30 +++++---- src/routes/Publish/Step.module.scss | 3 +- src/routes/Publish/Step.tsx | 13 +++- src/routes/Publish/index.tsx | 10 +-- 7 files changed, 119 insertions(+), 24 deletions(-) create mode 100644 src/routes/Publish/Progress.module.scss diff --git a/src/components/atoms/Form/Form.module.scss b/src/components/atoms/Form/Form.module.scss index 27fb268..b7d8752 100644 --- a/src/components/atoms/Form/Form.module.scss +++ b/src/components/atoms/Form/Form.module.scss @@ -2,6 +2,10 @@ .form { width: 100%; + background: $brand-white; + padding: $spacer; + border: 1px solid $brand-grey-lighter; + border-radius: $border-radius; fieldset { border: 0; diff --git a/src/data/form-publish.json b/src/data/form-publish.json index 965c4dd..6b9aba8 100644 --- a/src/data/form-publish.json +++ b/src/data/form-publish.json @@ -18,7 +18,7 @@ "placeholder": "i.e. https://file.com/file.json", "type": "text", "required": true, - "help": "Provide one or multiple links to your data files." + "help": "Provide one or multiple urls to your data set files." } } }, @@ -73,7 +73,7 @@ } }, { - "title": "Credentials", + "title": "Authorship", "description": "A description about these credentials fields", "fields": { "author": { @@ -103,6 +103,9 @@ ] } } + }, + { + "title": "Register" } ] } diff --git a/src/routes/Publish/Progress.module.scss b/src/routes/Publish/Progress.module.scss new file mode 100644 index 0000000..6e89805 --- /dev/null +++ b/src/routes/Publish/Progress.module.scss @@ -0,0 +1,76 @@ +@import '../../styles/variables'; + +.progress { + display: block; + padding: 0; + position: relative; + margin-top: $spacer * 1.5; + margin-bottom: $spacer; +} + +.item { + display: inline-block; + width: 25%; + text-align: center; + color: $brand-grey-light; + + &:before { + content: ''; + display: block; + width: 60%; + height: .1rem; + background: $brand-grey-lighter; + position: absolute; + top: 20%; + left: -30%; + } + + &:first-child { + &:before { + display: none; + } + } + + span { + display: block; + } +} + +.active { + composes: item; + font-family: $font-family-button; + font-weight: $font-weight-bold; + color: $brand-black; + + .number { + background: $brand-black; + } + + &:before { + background: $green; + } +} + +.completed { + composes: active; + + .number { + background: $green; + } +} + +.label { + margin-top: $spacer / 8; + font-size: $font-size-small; +} + +.number { + width: 1.6rem; + height: 1.6rem; + margin: auto; + border-radius: 50%; + background: $brand-grey-light; + color: $brand-white; + font-family: $font-family-button; + font-weight: $font-weight-bold; +} diff --git a/src/routes/Publish/Progress.tsx b/src/routes/Publish/Progress.tsx index 91e6cb3..5880dec 100644 --- a/src/routes/Publish/Progress.tsx +++ b/src/routes/Publish/Progress.tsx @@ -1,25 +1,31 @@ import React from 'react' +import styles from './Progress.module.scss' const Progress = ({ currentStep, - totalSteps, steps }: { currentStep: number - totalSteps: number steps: any[] }) => { return ( - +
    + {steps.map(({ title }, index) => ( +
  • index + 1 + ? styles.completed + : styles.item + } + > + {index + 1} + {title} +
    • + ))} +
) } diff --git a/src/routes/Publish/Step.module.scss b/src/routes/Publish/Step.module.scss index 0ee678a..97d8555 100644 --- a/src/routes/Publish/Step.module.scss +++ b/src/routes/Publish/Step.module.scss @@ -2,7 +2,6 @@ .header { margin-bottom: $spacer * 1.5; - border-bottom: .1rem solid $brand-grey-lighter; } .title { @@ -19,7 +18,7 @@ justify-content: space-between; border-top: .1rem solid $brand-grey-lighter; padding-top: $spacer; - margin-top: $spacer * 2; + margin-top: $spacer; button:last-child { min-width: 12rem; diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx index 6d2e88f..c8236ee 100644 --- a/src/routes/Publish/Step.tsx +++ b/src/routes/Publish/Step.tsx @@ -1,8 +1,9 @@ -import React, { PureComponent, FormEvent } from 'react' +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 Web3message from '../../components/Web3message' import { User } from '../../context/User' import Files from './Files/' import styles from './Step.module.scss' @@ -20,6 +21,7 @@ interface StepProps { next: any prev: any totalSteps: number + component?: string } export default class Step extends PureComponent { @@ -56,13 +58,16 @@ export default class Step extends PureComponent { inputToArrayChange, files, state, - totalSteps + totalSteps, + component } = this.props if (currentStep !== index + 1) { return null } + const lastStep = currentStep === totalSteps + return ( <>
@@ -112,11 +117,13 @@ export default class Step extends PureComponent { ) })} + {lastStep && } +
{this.previousButton()} {this.nextButton()} - {currentStep === totalSteps && ( + {lastStep && ( {states => states.isLogged ? ( diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index 298f9f0..ff5600a 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -3,7 +3,6 @@ import { Logger } from '@oceanprotocol/squid' import Route from '../../components/templates/Route' import Form from '../../components/atoms/Form/Form' import AssetModel from '../../models/AssetModel' -import Web3message from '../../components/Web3message' import Step from './Step' import Progress from './Progress' @@ -159,9 +158,10 @@ class Publish extends Component<{}, PublishState> { public render() { return ( - - - + {this.state.isPublishing ? ( this.publishingState() ) : this.state.publishingError ? ( @@ -173,7 +173,6 @@ class Publish extends Component<{}, PublishState> { @@ -192,6 +191,7 @@ class Publish extends Component<{}, PublishState> { next={this.next} prev={this.prev} totalSteps={form.steps.length} + component={step.component} /> ))} From 2688a7a8c505a89a7ac5ab803abe8950baaf81c2 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 20 Feb 2019 13:46:54 +0100 Subject: [PATCH 06/21] move register feedback onto last step --- src/components/atoms/Spinner.module.scss | 6 +- src/routes/Publish/Step.module.scss | 7 +- src/routes/Publish/Step.tsx | 21 ++++-- src/routes/Publish/StepRegisterContent.tsx | 52 +++++++++++++ src/routes/Publish/index.tsx | 88 +++++++--------------- 5 files changed, 99 insertions(+), 75 deletions(-) create mode 100644 src/routes/Publish/StepRegisterContent.tsx diff --git a/src/components/atoms/Spinner.module.scss b/src/components/atoms/Spinner.module.scss index 78992c6..f89de59 100644 --- a/src/components/atoms/Spinner.module.scss +++ b/src/components/atoms/Spinner.module.scss @@ -3,7 +3,8 @@ .spinner { position: relative; text-align: center; - margin-bottom: $spacer / 2; + margin-bottom: $spacer * 2; + margin-top: $spacer * 2; &:before { content: ''; @@ -13,7 +14,7 @@ left: 50%; width: 20px; height: 20px; - margin-top: -10px; + margin-top: -20px; margin-left: -10px; border-radius: 50%; border: 2px solid $brand-purple; @@ -24,7 +25,6 @@ .spinnerMessage { color: $brand-grey-light; - margin-top: $spacer / 2; } @keyframes spinner { diff --git a/src/routes/Publish/Step.module.scss b/src/routes/Publish/Step.module.scss index 97d8555..e96ea6d 100644 --- a/src/routes/Publish/Step.module.scss +++ b/src/routes/Publish/Step.module.scss @@ -1,7 +1,7 @@ @import '../../styles/variables'; .header { - margin-bottom: $spacer * 1.5; + margin-bottom: $spacer; } .title { @@ -11,14 +11,13 @@ .description { margin-top: $spacer / 4; + margin-bottom: 0; } .actions { display: flex; justify-content: space-between; - border-top: .1rem solid $brand-grey-lighter; - padding-top: $spacer; - margin-top: $spacer; + margin-top: $spacer * 2; button:last-child { min-width: 12rem; diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx index c8236ee..899b767 100644 --- a/src/routes/Publish/Step.tsx +++ b/src/routes/Publish/Step.tsx @@ -3,9 +3,9 @@ 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 Web3message from '../../components/Web3message' import { User } from '../../context/User' import Files from './Files/' +import StepRegisterContent from './StepRegisterContent' import styles from './Step.module.scss' interface StepProps { @@ -14,14 +14,15 @@ interface StepProps { inputChange: any inputToArrayChange: any fields?: any[] - files?: any state: any title: string description: string next: any prev: any totalSteps: number - component?: string + tryAgain: any + toStart: any + publishedDid?: string } export default class Step extends PureComponent { @@ -56,10 +57,10 @@ export default class Step extends PureComponent { fields, inputChange, inputToArrayChange, - files, state, totalSteps, - component + tryAgain, + toStart } = this.props if (currentStep !== index + 1) { @@ -93,7 +94,7 @@ export default class Step extends PureComponent { placeholder={value.placeholder} name={value.name} help={value.help} - files={files} + files={state.files} onChange={onChange} /> @@ -117,7 +118,13 @@ export default class Step extends PureComponent { ) })} - {lastStep && } + {lastStep && ( + + )}
{this.previousButton()} diff --git a/src/routes/Publish/StepRegisterContent.tsx b/src/routes/Publish/StepRegisterContent.tsx new file mode 100644 index 0000000..6b7aa6e --- /dev/null +++ b/src/routes/Publish/StepRegisterContent.tsx @@ -0,0 +1,52 @@ +import React, { PureComponent } from 'react' +import Web3message from '../../components/Web3message' +import Spinner from '../../components/atoms/Spinner' + +interface StepRegisterContentProps { + tryAgain: any + toStart: any + state: any +} + +export default class StepRegisterContent extends PureComponent< + StepRegisterContentProps, + {} +> { + public publishingState = () => ( + + ) + + public errorState = () => ( +
+ Something went wrong,{' '} + this.props.tryAgain()}>try again +
+ ) + + public publishedState = () => ( +
+ Your asset is published! See it{' '} + here, submit + another asset by clicking{' '} + this.props.toStart()}>here +
+ ) + + public render() { + return ( + <> + + + {this.props.state.isPublishing ? ( + this.publishingState() + ) : this.props.state.publishingError ? ( + this.errorState() + ) : this.props.state.isPublished ? ( + this.publishedState() + ) : ( +
Hello
+ )} + + ) + } +} diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index ff5600a..7c91762 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -64,10 +64,6 @@ class Publish extends Component<{}, PublishState> { }) } - private tryAgain = () => { - this.setState({ publishingError: '' }) - } - private next = () => { let { currentStep } = this.state const totalSteps = form.steps.length @@ -83,6 +79,10 @@ class Publish extends Component<{}, PublishState> { this.setState({ currentStep }) } + private tryAgain = () => { + this.setState({ publishingError: '' }) + } + private toStart = () => { this.setState({ name: '', @@ -162,68 +162,34 @@ class Publish extends Component<{}, PublishState> { title="Publish" description="Publish a new data set into the Ocean Protocol Network." > - {this.state.isPublishing ? ( - this.publishingState() - ) : this.state.publishingError ? ( - this.errorState() - ) : this.state.isPublished ? ( - this.publishedState() - ) : ( - <> - + +
+ {form.steps.map((step: any, index: number) => ( + - - - {form.steps.map((step: any, index: number) => ( - - ))} - - - )} + ))} + ) } - - public publishingState = () => { - return
Please sign with your crypto wallet
- } - - public errorState = () => { - return ( -
- Something went wrong,{' '} - this.tryAgain()}>try again -
- ) - } - - public publishedState = () => { - return ( -
- Your asset is published! See it{' '} - here, submit - another asset by clicking{' '} - this.toStart()}>here -
- ) - } } export default Publish From 2656bdb5153fa8faa091b2956b00c9051871fb9a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 20 Feb 2019 14:07:29 +0100 Subject: [PATCH 07/21] fix resetting form --- src/routes/Publish/Step.module.scss | 2 +- src/routes/Publish/StepRegisterContent.tsx | 4 ++-- src/routes/Publish/index.tsx | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/routes/Publish/Step.module.scss b/src/routes/Publish/Step.module.scss index e96ea6d..692e8d4 100644 --- a/src/routes/Publish/Step.module.scss +++ b/src/routes/Publish/Step.module.scss @@ -17,7 +17,7 @@ .actions { display: flex; justify-content: space-between; - margin-top: $spacer * 2; + padding-top: $spacer / 2; button:last-child { min-width: 12rem; diff --git a/src/routes/Publish/StepRegisterContent.tsx b/src/routes/Publish/StepRegisterContent.tsx index 6b7aa6e..c3e4f2b 100644 --- a/src/routes/Publish/StepRegisterContent.tsx +++ b/src/routes/Publish/StepRegisterContent.tsx @@ -24,12 +24,12 @@ export default class StepRegisterContent extends PureComponent< ) public publishedState = () => ( -
+

Your asset is published! See it{' '} here, submit another asset by clicking{' '} this.props.toStart()}>here -

+

) public render() { diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index 7c91762..bd8e30d 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -96,7 +96,8 @@ class Publish extends Component<{}, PublishState> { copyrightHolder: '', categories: [], isPublishing: false, - isPublished: false + isPublished: false, + currentStep: 1 }) } From 1fee0cfc66f83a0ac5033e2f7c2672eeba7f1084 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 20 Feb 2019 14:35:41 +0100 Subject: [PATCH 08/21] basic feedback message styling, fix publishing --- src/components/atoms/Spinner.module.scss | 2 +- src/data/form-publish.json | 4 +++- src/routes/Publish/Step.tsx | 5 ++++- src/routes/Publish/StepRegisterContent.module.scss | 5 +++++ src/routes/Publish/StepRegisterContent.tsx | 10 ++++++---- src/routes/Publish/index.tsx | 3 +++ 6 files changed, 22 insertions(+), 7 deletions(-) create mode 100644 src/routes/Publish/StepRegisterContent.module.scss diff --git a/src/components/atoms/Spinner.module.scss b/src/components/atoms/Spinner.module.scss index f89de59..c5705f6 100644 --- a/src/components/atoms/Spinner.module.scss +++ b/src/components/atoms/Spinner.module.scss @@ -3,7 +3,7 @@ .spinner { position: relative; text-align: center; - margin-bottom: $spacer * 2; + margin-bottom: $spacer; margin-top: $spacer * 2; &:before { diff --git a/src/data/form-publish.json b/src/data/form-publish.json index 6b9aba8..a8bc3e4 100644 --- a/src/data/form-publish.json +++ b/src/data/form-publish.json @@ -105,7 +105,9 @@ } }, { - "title": "Register" + "title": "Register", + "description": "We got all the data, now let's register your data set.", + "content": "After clicking the button below you will be asked by your wallet to sign this request." } ] } diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx index 899b767..90fc1fa 100644 --- a/src/routes/Publish/Step.tsx +++ b/src/routes/Publish/Step.tsx @@ -23,6 +23,7 @@ interface StepProps { tryAgain: any toStart: any publishedDid?: string + content?: string } export default class Step extends PureComponent { @@ -60,7 +61,8 @@ export default class Step extends PureComponent { state, totalSteps, tryAgain, - toStart + toStart, + content } = this.props if (currentStep !== index + 1) { @@ -123,6 +125,7 @@ export default class Step extends PureComponent { tryAgain={tryAgain} toStart={toStart} state={state} + content={content} /> )} diff --git a/src/routes/Publish/StepRegisterContent.module.scss b/src/routes/Publish/StepRegisterContent.module.scss new file mode 100644 index 0000000..60a5936 --- /dev/null +++ b/src/routes/Publish/StepRegisterContent.module.scss @@ -0,0 +1,5 @@ +@import '../../styles/variables'; + +.message { + margin-bottom: $spacer; +} diff --git a/src/routes/Publish/StepRegisterContent.tsx b/src/routes/Publish/StepRegisterContent.tsx index c3e4f2b..ea1a718 100644 --- a/src/routes/Publish/StepRegisterContent.tsx +++ b/src/routes/Publish/StepRegisterContent.tsx @@ -1,11 +1,13 @@ import React, { PureComponent } from 'react' import Web3message from '../../components/Web3message' import Spinner from '../../components/atoms/Spinner' +import styles from './StepRegisterContent.module.scss' interface StepRegisterContentProps { tryAgain: any toStart: any state: any + content?: string } export default class StepRegisterContent extends PureComponent< @@ -17,19 +19,19 @@ export default class StepRegisterContent extends PureComponent< ) public errorState = () => ( -
+
Something went wrong,{' '} this.props.tryAgain()}>try again
) public publishedState = () => ( -

+

Your asset is published! See it{' '} here, submit another asset by clicking{' '} this.props.toStart()}>here -

+
) public render() { @@ -44,7 +46,7 @@ export default class StepRegisterContent extends PureComponent< ) : this.props.state.isPublished ? ( this.publishedState() ) : ( -
Hello
+

{this.props.content}

)} ) diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index bd8e30d..efcf0fa 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -3,6 +3,7 @@ import { Logger } from '@oceanprotocol/squid' import Route from '../../components/templates/Route' import Form from '../../components/atoms/Form/Form' import AssetModel from '../../models/AssetModel' +import { User } from '../../context/User' import Step from './Step' import Progress from './Progress' @@ -185,6 +186,7 @@ class Publish extends Component<{}, PublishState> { totalSteps={form.steps.length} tryAgain={this.tryAgain} toStart={this.toStart} + content={step.content} /> ))} @@ -193,4 +195,5 @@ class Publish extends Component<{}, PublishState> { } } +Publish.contextType = User export default Publish From d58a5f1f1b7ab8e9a7fa0c6b22ab07043833bfc1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 20 Feb 2019 14:58:55 +0100 Subject: [PATCH 09/21] prepare disabling button based on form validation --- src/components/atoms/Button.module.scss | 3 +-- src/components/atoms/Button.tsx | 1 + src/routes/Publish/Step.tsx | 19 +++++++++++++++++-- src/routes/Publish/index.tsx | 8 +++----- 4 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/atoms/Button.module.scss b/src/components/atoms/Button.module.scss index 8805c03..4a98a2c 100644 --- a/src/components/atoms/Button.module.scss +++ b/src/components/atoms/Button.module.scss @@ -37,10 +37,9 @@ } &:disabled { - color: rgba($brand-white, .7); cursor: not-allowed; pointer-events: none; - opacity: .8; + opacity: .5; } } diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx index 312565b..473db50 100644 --- a/src/components/atoms/Button.tsx +++ b/src/components/atoms/Button.tsx @@ -9,6 +9,7 @@ interface ButtonProps { link?: boolean href?: string onClick?: any + disabled?: boolean } export default class Button extends PureComponent { diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx index 90fc1fa..c54f0e6 100644 --- a/src/routes/Publish/Step.tsx +++ b/src/routes/Publish/Step.tsx @@ -26,7 +26,17 @@ interface StepProps { content?: string } -export default class Step extends PureComponent { +interface StepState { + inputInvalid: boolean +} + +export default class Step extends PureComponent { + public state = { + // TODO: manipulate with some form validation for every step, + // should be 'true' by default here + inputInvalid: false + } + public previousButton() { let { currentStep, prev } = this.props @@ -42,9 +52,14 @@ export default class Step extends PureComponent { public nextButton() { let { currentStep, next, totalSteps } = this.props + const { inputInvalid } = this.state if (currentStep < totalSteps) { - return + return ( + + ) } return null } diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index efcf0fa..4982ce5 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -108,7 +108,8 @@ class Publish extends Component<{}, PublishState> { publishingError: '', isPublishing: true }) - const account = await this.context.ocean.getAccounts() + const { ocean } = this.context + const account = await ocean.getAccounts() const newAsset = { // OEP-08 Attributes // https://github.com/oceanprotocol/OEPs/tree/master/8 @@ -138,10 +139,7 @@ class Publish extends Component<{}, PublishState> { } try { - const asset = await this.context.ocean.registerAsset( - newAsset, - account[0] - ) + const asset = await ocean.registerAsset(newAsset, account[0]) this.setState({ publishedDid: asset.id, isPublished: true From c155f22955e8d446588cbf1529bd1d1b80d1fc6b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 20 Feb 2019 16:50:27 +0100 Subject: [PATCH 10/21] hack in some basic input validation --- src/routes/Publish/Step.tsx | 22 +++++---------- src/routes/Publish/index.tsx | 55 +++++++++++++++++++++++++++++++++++- 2 files changed, 61 insertions(+), 16 deletions(-) diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx index c54f0e6..4001f54 100644 --- a/src/routes/Publish/Step.tsx +++ b/src/routes/Publish/Step.tsx @@ -26,19 +26,9 @@ interface StepProps { content?: string } -interface StepState { - inputInvalid: boolean -} - -export default class Step extends PureComponent { - 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 { 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 { } public nextButton() { - let { currentStep, next, totalSteps } = this.props - const { inputInvalid } = this.state + const { currentStep, next, totalSteps, state } = this.props if (currentStep < totalSteps) { return ( - ) diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index 4982ce5..7b7da1b 100644 --- a/src/routes/Publish/index.tsx +++ b/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 | ChangeEvent ) => { + 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) => { event.preventDefault() this.setState({ From b61d1cc63738feaa65e01ab10e8e784e9467ef60 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 21 Feb 2019 14:35:25 +0100 Subject: [PATCH 11/21] 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 { 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 { if (currentStep < totalSteps) { return (
) From b3459547e3c7de98b2069ce47113bc22ea9ca78d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 4 Mar 2019 13:59:21 -0300 Subject: [PATCH 19/21] frontpage form tweaks, disable button based on input state --- src/components/atoms/Form/Form.module.scss | 7 +++++++ src/components/atoms/Form/Form.tsx | 8 +++++++- src/routes/Home.module.scss | 5 +++++ src/routes/Home.tsx | 10 +++++++--- 4 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/atoms/Form/Form.module.scss b/src/components/atoms/Form/Form.module.scss index b7d8752..7d55ec7 100644 --- a/src/components/atoms/Form/Form.module.scss +++ b/src/components/atoms/Form/Form.module.scss @@ -13,6 +13,13 @@ } } +.formMinimal { + composes: form; + background: none; + padding: 0; + border: 0; +} + .formHeader { margin-bottom: $spacer; } diff --git a/src/components/atoms/Form/Form.tsx b/src/components/atoms/Form/Form.tsx index 3ef1cfc..945f50e 100644 --- a/src/components/atoms/Form/Form.tsx +++ b/src/components/atoms/Form/Form.tsx @@ -6,14 +6,20 @@ const Form = ({ description, children, onSubmit, + minimal, ...props }: { title?: string description?: string children: any onSubmit?: any + minimal?: boolean }) => ( - + {title && (

{title}

diff --git a/src/routes/Home.module.scss b/src/routes/Home.module.scss index da87cc8..1b56304 100644 --- a/src/routes/Home.module.scss +++ b/src/routes/Home.module.scss @@ -2,6 +2,11 @@ .home { display: block; + + form { + margin-top: $spacer * 2; + margin-bottom: $spacer * 4; + } } .published { diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index 1804bf7..cad4448 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -26,15 +26,19 @@ class Home extends Component { description={meta.description} className={styles.home} > - + Search} + group={ + + } /> From c4b100bad413cd3cbfcf93f2b5a753d8a964d10d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 4 Mar 2019 14:07:18 -0300 Subject: [PATCH 20/21] remove data set listing on frontpage for now * will be added back in https://github.com/oceanprotocol/commons-marketplace/pull/19 --- src/routes/Home.module.scss | 18 ------------------ src/routes/Home.tsx | 9 --------- 2 files changed, 27 deletions(-) diff --git a/src/routes/Home.module.scss b/src/routes/Home.module.scss index 1b56304..9e3082a 100644 --- a/src/routes/Home.module.scss +++ b/src/routes/Home.module.scss @@ -8,21 +8,3 @@ margin-bottom: $spacer * 4; } } - -.published { - margin-top: $spacer * 3; - margin-bottom: $spacer; - - > div { - text-align: center; - margin-top: $spacer; - margin-bottom: $spacer; - } -} - -.subTitle { - font-size: $font-size-h4; - color: $brand-grey-light; - border-bottom: 1px solid $brand-grey-lighter; - padding-bottom: $spacer / 2; -} diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index cad4448..7c7dc68 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -41,15 +41,6 @@ class Home extends Component { } /> - -
-

Your Data Sets

- -
-

None yet.

- + Publish A Data Set -
-
) } From fe9f85033837c2d7603bbcd61cff69d63789cf9a Mon Sep 17 00:00:00 2001 From: Jernej Pregelj Date: Tue, 5 Mar 2019 10:10:22 +0100 Subject: [PATCH 21/21] disable next button on clearing form --- src/routes/Publish/index.tsx | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index 162d422..f93b5a5 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -169,6 +169,16 @@ class Publish extends Component<{}, PublishState> { } } })) + } else { + this.setState(prevState => ({ + validationStatus: { + ...prevState.validationStatus, + 1: { + ...prevState.validationStatus[1], + allFieldsValid: false + } + } + })) } // @@ -184,6 +194,16 @@ class Publish extends Component<{}, PublishState> { } } })) + } else { + this.setState(prevState => ({ + validationStatus: { + ...prevState.validationStatus, + 2: { + ...prevState.validationStatus[2], + allFieldsValid: false + } + } + })) } // @@ -203,6 +223,16 @@ class Publish extends Component<{}, PublishState> { } } })) + } else { + this.setState(prevState => ({ + validationStatus: { + ...prevState.validationStatus, + 3: { + ...prevState.validationStatus[3], + allFieldsValid: false + } + } + })) } }