oceanprotocol
/
commons
mirror of https://github.com/oceanprotocol/commons.git
1
0
Fork 0
Code Releases Activity

new form validation mechanism

This commit is contained in:
Matthias Kretschmann 2019-02-21 14:35:25 +01:00
parent c155f22955
commit b61d1cc637
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 69 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/Publish/Files/index.tsx
View File

@ -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}
/>

6
src/routes/Publish/Step.tsx
View File

@ -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}

104
src/routes/Publish/index.tsx
View File

@ -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>) => {