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;
}
}
.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 Form from '../../atoms/Form/Form'
import { serviceUri } from '../../../config'
import Spinner from '../../atoms/Spinner'
export default class Report extends PureComponent<
{ did: string; title: string },
{ isModalOpen: boolean; comment: string; error?: string }
{
isModalOpen: boolean
comment: string
message: string
isSending: boolean
hasError?: boolean
hasSuccess?: boolean
}
> {
public state = {
isModalOpen: false,
comment: ''
comment: '',
message: 'Sending...',
isSending: false,
hasError: false,
hasSuccess: false
}
// for canceling axios requests
@ -36,6 +48,7 @@ export default class Report extends PureComponent<
private sendEmail = async (event: Event) => {
event.preventDefault()
this.setState({ isSending: true })
const msg = {
to: process.env.REACT_APP_REPORT_EMAIL,
@ -53,10 +66,19 @@ export default class Report extends PureComponent<
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
} catch (error) {
!axios.isCancel(error) &&
this.setState({ error: error.message }) &&
this.setState({
message: error.message,
isSending: false,
hasError: true
}) &&
Logger.error(error.message)
}
}
@ -83,25 +105,37 @@ export default class Report extends PureComponent<
<code>{this.props.did}</code>
</p>
<Form minimal>
<Input
type="textarea"
name="comment"
label="Comment"
help="Briefly describe what is wrong with this asset."
required
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>
{this.state.isSending ? (
<Spinner message={this.state.message} />
) : this.state.hasError ? (
<div className={styles.error}>
{this.state.message}
</div>
) : this.state.hasSuccess ? (
<div className={styles.success}>
{this.state.message}
</div>
) : (
<Form minimal>
<Input
type="textarea"
name="comment"
label="Comment"
help="Briefly describe what is wrong with this asset."
required
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>
</Modal>
</div>