From ca77e1ed945baa733679ba62cd9dd6ffff40dde1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 8 Jul 2019 15:50:45 +0200 Subject: [PATCH] add UI states: sending, done, error --- .../templates/Asset/Report.module.scss | 15 ++++ .../src/components/templates/Asset/Report.tsx | 78 +++++++++++++------ 2 files changed, 71 insertions(+), 22 deletions(-) diff --git a/client/src/components/templates/Asset/Report.module.scss b/client/src/components/templates/Asset/Report.module.scss index ee2e175..83996e0 100644 --- a/client/src/components/templates/Asset/Report.module.scss +++ b/client/src/components/templates/Asset/Report.module.scss @@ -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; +} diff --git a/client/src/components/templates/Asset/Report.tsx b/client/src/components/templates/Asset/Report.tsx index a78579c..2fd2685 100644 --- a/client/src/components/templates/Asset/Report.tsx +++ b/client/src/components/templates/Asset/Report.tsx @@ -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< {this.props.did}

-
- - -
+ {this.state.isSending ? ( + + ) : this.state.hasError ? ( +
+ {this.state.message} +
+ ) : this.state.hasSuccess ? ( +
+ {this.state.message} +
+ ) : ( +
+ + +
+ )}