From 2688a7a8c505a89a7ac5ab803abe8950baaf81c2 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 20 Feb 2019 13:46:54 +0100 Subject: [PATCH] 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