From e4ebb2553fa737945dffde044c97e8f2b9db36ab Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 16 Aug 2018 13:14:47 -0300 Subject: [PATCH] Handling error messages --- src/core/client/auth/components/SignIn.tsx | 3 ++ src/core/client/auth/components/SignUp.tsx | 11 ++++++- .../auth/containers/SignInContainer.tsx | 25 +++++++++++++--- .../auth/containers/SignUpContainer.tsx | 23 +++++++++++++-- src/core/client/framework/lib/rest.ts | 29 ++++++++++--------- .../ui/components/BaseButton/BaseButton.tsx | 2 -- .../client/ui/components/Button/Button.tsx | 2 -- 7 files changed, 69 insertions(+), 26 deletions(-) diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx index 5785ea2e9..1934d03a8 100644 --- a/src/core/client/auth/components/SignIn.tsx +++ b/src/core/client/auth/components/SignIn.tsx @@ -9,6 +9,7 @@ import { } from "talk-framework/lib/validation"; import { Button, + CallOut, Flex, FormField, InputLabel, @@ -27,6 +28,7 @@ interface FormProps { export interface SignInForm { onSubmit: OnSubmit; setView: (view: View) => void; + errorMessage: string; } const SignIn: StatelessComponent = props => { @@ -34,6 +36,7 @@ const SignIn: StatelessComponent = props => {
{({ handleSubmit, submitting }) => ( + {props.errorMessage && {props.errorMessage}} Sign in to join the conversation diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx index 5e4b913e6..071d1affc 100644 --- a/src/core/client/auth/components/SignUp.tsx +++ b/src/core/client/auth/components/SignUp.tsx @@ -12,6 +12,7 @@ import { } from "talk-framework/lib/validation"; import { Button, + CallOut, Flex, FormField, InputDescription, @@ -33,11 +34,13 @@ interface FormProps { export interface SignUpForm { onSubmit: OnSubmit; setView: (view: View) => void; + errorMessage: string; } const SignUp: StatelessComponent = props => { return ( + {props.errorMessage && {props.errorMessage}} {({ handleSubmit, submitting }) => ( @@ -155,7 +158,13 @@ const SignUp: StatelessComponent = props => {
- { +class SignInContainer extends Component< + SignInContainerProps, + SignUpContainerState +> { + public state = { errorMessage: "" }; private setView = (view: View) => { this.props.setView({ view, @@ -23,19 +31,28 @@ class SignInContainer extends Component { }; private onSubmit: SignInForm["onSubmit"] = async (input, form) => { try { - await this.props.signIn(input); - form.reset(); + const res = await this.props.signIn(input); + console.log(res); + // form.reset(); } catch (error) { if (error instanceof BadUserInputError) { return error.invalidArgsLocalized; } + console.log(error); + this.setState({ errorMessage: `Error: ${error}` }); // tslint:disable-next-line:no-console console.error(error); } return undefined; }; public render() { - return ; + return ( + + ); } } diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx index 6cbe4bf02..299bc5c91 100644 --- a/src/core/client/auth/containers/SignUpContainer.tsx +++ b/src/core/client/auth/containers/SignUpContainer.tsx @@ -14,9 +14,17 @@ interface SignUpContainerProps { setView: SetViewMutation; } +interface SignUpContainerState { + errorMessage: string; +} + export type View = "SIGN_IN"; -class SignUpContainer extends Component { +class SignUpContainer extends Component< + SignUpContainerProps, + SignUpContainerState +> { + public state = { errorMessage: "" }; private setView = (view: View) => { this.props.setView({ view, @@ -24,19 +32,28 @@ class SignUpContainer extends Component { }; private onSubmit: SignUpForm["onSubmit"] = async (input, form) => { try { - await this.props.signUp(input); + const res = await this.props.signUp(input); + console.log("response", res); form.reset(); } catch (error) { + console.log("error", error); if (error instanceof BadUserInputError) { return error.invalidArgsLocalized; } + this.setState({ errorMessage: `Something ${error}` }); // tslint:disable-next-line:no-console console.error(error); } return undefined; }; public render() { - return ; + return ( + + ); } } diff --git a/src/core/client/framework/lib/rest.ts b/src/core/client/framework/lib/rest.ts index 9548febea..975c7e282 100644 --- a/src/core/client/framework/lib/rest.ts +++ b/src/core/client/framework/lib/rest.ts @@ -17,20 +17,17 @@ const buildOptions = (inputOptions: RequestInit = {}) => { return options; }; -const handleResp = (res: Response) => { - if (res.status > 399) { - return res.text(); - // TODO (bc): sync error handling with server. - // return res.json().then((err: any) => { - // const message = err.message || err.error || res.status; - // const error = new Error(message); - // throw error; - // }); - } else if (res.status === 204) { - return res.text(); - } else { - return res.json(); +const handleResp = async (res: Response) => { + if (!res.ok) { + const response = await res.json(); + throw new Error(response.error); } + + if (res.status === 204) { + return res.text(); + } + + return res.json(); }; type PartialRequestInit = Overwrite, { body?: any }>; @@ -53,6 +50,10 @@ export class RestClient { }, }); } - return fetch(`${this.uri}${path}`, buildOptions(opts)).then(handleResp); + return fetch(`${this.uri}${path}`, buildOptions(opts)) + .then(handleResp) + .catch(err => { + throw Error(err); + }); } } diff --git a/src/core/client/ui/components/BaseButton/BaseButton.tsx b/src/core/client/ui/components/BaseButton/BaseButton.tsx index b9a95a1ee..8dfa8575b 100644 --- a/src/core/client/ui/components/BaseButton/BaseButton.tsx +++ b/src/core/client/ui/components/BaseButton/BaseButton.tsx @@ -50,8 +50,6 @@ const BaseButton: StatelessComponent = ({ type, ...rest }) => { - console.log("type", type, "Basebutton"); - let Element = "button"; if (anchor) { diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx index e466049dd..424b8bbe5 100644 --- a/src/core/client/ui/components/Button/Button.tsx +++ b/src/core/client/ui/components/Button/Button.tsx @@ -63,8 +63,6 @@ export class Button extends React.Component { ...rest } = this.props; - console.log("type", type, "---------"); - const rootClassName = cn(classes.root, className, { [classes.sizeRegular]: size === "regular", [classes.sizeSmall]: size === "small",