oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

add UI states: sending, done, error

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-07-08 15:50:45 +02:00
parent 050936a0c1
commit ca77e1ed94
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 71 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/components/templates/Asset/Report.module.scss
View File

@ -32,3 +32,18 @@
color: $brand-grey-light; color: $brand-grey-light;
} }
} }
.error {
background: $red;
padding: $spacer / 2;
text-align: center;
color: $brand-white;
border-radius: $border-radius;
font-weight: $font-weight-bold;
font-size: $font-size-small;
}
.success {
composes: error;
background: $green;
}

78
client/src/components/templates/Asset/Report.tsx
View File

@ -7,14 +7,26 @@ import Button from '../../atoms/Button'
import Input from '../../atoms/Form/Input' import Input from '../../atoms/Form/Input'
import Form from '../../atoms/Form/Form' import Form from '../../atoms/Form/Form'
import { serviceUri } from '../../../config' import { serviceUri } from '../../../config'
import Spinner from '../../atoms/Spinner'
export default class Report extends PureComponent< export default class Report extends PureComponent<
{ did: string; title: string }, { did: string; title: string },
{ isModalOpen: boolean; comment: string; error?: string } {
isModalOpen: boolean
comment: string
message: string
isSending: boolean
hasError?: boolean
hasSuccess?: boolean
}
> { > {
public state = { public state = {
isModalOpen: false, isModalOpen: false,
comment: '' comment: '',
message: 'Sending...',
isSending: false,
hasError: false,
hasSuccess: false
} }
// for canceling axios requests // for canceling axios requests
@ -36,6 +48,7 @@ export default class Report extends PureComponent<
private sendEmail = async (event: Event) => { private sendEmail = async (event: Event) => {
event.preventDefault() event.preventDefault()
this.setState({ isSending: true })
const msg = { const msg = {
to: process.env.REACT_APP_REPORT_EMAIL, to: process.env.REACT_APP_REPORT_EMAIL,
@ -53,10 +66,19 @@ export default class Report extends PureComponent<
cancelToken: this.signal.token cancelToken: this.signal.token
}) })
this.setState({
isSending: false,
hasSuccess: true,
message: 'Thanks for the report! We will take a look soon.'
})
return response.data.result return response.data.result
} catch (error) { } catch (error) {
!axios.isCancel(error) && !axios.isCancel(error) &&
this.setState({ error: error.message }) && this.setState({
message: error.message,
isSending: false,
hasError: true
}) &&
Logger.error(error.message) Logger.error(error.message)
} }
} }
@ -83,25 +105,37 @@ export default class Report extends PureComponent<
<code>{this.props.did}</code> <code>{this.props.did}</code>
</p> </p>
<Form minimal> {this.state.isSending ? (
<Input <Spinner message={this.state.message} />
type="textarea" ) : this.state.hasError ? (
name="comment" <div className={styles.error}>
label="Comment" {this.state.message}
help="Briefly describe what is wrong with this asset." </div>
required ) : this.state.hasSuccess ? (
value={this.state.comment} <div className={styles.success}>
onChange={this.inputChange} {this.state.message}
rows={2} </div>
/> ) : (
<Button <Form minimal>
primary <Input
onClick={(e: Event) => this.sendEmail(e)} type="textarea"
disabled={this.state.comment === ''} name="comment"
> label="Comment"
Report Data Set help="Briefly describe what is wrong with this asset."
</Button> required
</Form> value={this.state.comment}
onChange={this.inputChange}
rows={2}
/>
<Button
primary
onClick={(e: Event) => this.sendEmail(e)}
disabled={this.state.comment === ''}
>
Report Data Set
</Button>
</Form>
)}
</div> </div>
</Modal> </Modal>
</div> </div>