Handling error messages

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<FormProps>;
   setView: (view: View) => void;
+  errorMessage: string;
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
@@ -34,6 +36,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
+          {props.errorMessage && <CallOut>{props.errorMessage}</CallOut>}
           <Flex itemGutter direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Sign in to join the conversation

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<FormProps>;
   setView: (view: View) => void;
+  errorMessage: string;
 }
 
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
+      {props.errorMessage && <CallOut>{props.errorMessage}</CallOut>}
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter direction="column" className={styles.root}>
@@ -155,7 +158,13 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
               </Field>
             </Flex>
             <div className={styles.footer}>
-              <Button variant="filled" color="primary" size="large" fullWidth>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                type="submit"
+              >
                 Sign up and join the conversation
               </Button>
               <Flex

src/core/client/auth/containers/SignInContainer.tsx

@@ -13,9 +13,17 @@ interface SignInContainerProps {
   setView: SetViewMutation;
 }
 
+interface SignUpContainerState {
+  errorMessage: string;
+}
+
 export type View = "SIGN_UP" | "FORGOT_PASSWORD";
 
-class SignInContainer extends Component<SignInContainerProps> {
+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<SignInContainerProps> {
   };
   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 <SignIn onSubmit={this.onSubmit} setView={this.setView} />;
+    return (
+      <SignIn
+        onSubmit={this.onSubmit}
+        setView={this.setView}
+        errorMessage={this.state.errorMessage}
+      />
+    );
   }
 }
 

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<SignUpContainerProps> {
+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<SignUpContainerProps> {
   };
   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 <SignUp onSubmit={this.onSubmit} setView={this.setView} />;
+    return (
+      <SignUp
+        onSubmit={this.onSubmit}
+        setView={this.setView}
+        errorMessage={this.state.errorMessage}
+      />
+    );
   }
 }
 

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<Partial<RequestInit>, { 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);
+      });
   }
 }

src/core/client/ui/components/BaseButton/BaseButton.tsx

@@ -50,8 +50,6 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   type,
   ...rest
 }) => {
-  console.log("type", type, "Basebutton");
-
   let Element = "button";
 
   if (anchor) {

src/core/client/ui/components/Button/Button.tsx

@@ -63,8 +63,6 @@ export class Button extends React.Component<InnerProps> {
       ...rest
     } = this.props;
 
-    console.log("type", type, "---------");
-
     const rootClassName = cn(classes.root, className, {
       [classes.sizeRegular]: size === "regular",
       [classes.sizeSmall]: size === "small",