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({