mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
add UI states: sending, done, error
This commit is contained in:
parent
050936a0c1
commit
ca77e1ed94
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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,6 +105,17 @@ export default class Report extends PureComponent<
|
||||||
<code>{this.props.did}</code>
|
<code>{this.props.did}</code>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
{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>
|
<Form minimal>
|
||||||
<Input
|
<Input
|
||||||
type="textarea"
|
type="textarea"
|
||||||
|
@ -102,6 +135,7 @@ export default class Report extends PureComponent<
|
||||||
Report Data Set
|
Report Data Set
|
||||||
</Button>
|
</Button>
|
||||||
</Form>
|
</Form>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user