Handling error messages

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}
+      />
+    );
   }
 }