Errors handled by the forms

src/core/client/auth/components/SignIn.tsx

@@ -31,23 +31,24 @@ export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
   goToSignUp: () => void;
   goToForgotPassword: () => void;
-  error: string | null;
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitting }) => (
+      {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter="double" direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Sign in to join the conversation
             </Typography>
-            {props.error && (
+
+            {submitError && (
               <CallOut color="error" fullWidth>
-                {props.error}
+                {submitError}
               </CallOut>
             )}
+
             <Field
               name="email"
               validate={composeValidators(required, validateEmail)}

src/core/client/auth/components/SignUp.tsx

@@ -34,24 +34,25 @@ interface FormProps {
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
   goToSignIn: () => void;
-  error: string | null;
 }
 
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitting }) => (
+      {({ handleSubmit, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter="double" direction="column" className={styles.root}>
             <Flex direction="column">
               <Typography variant="heading1" align="center">
                 Sign up to join the conversation
               </Typography>
-              {props.error && (
+
+              {submitError && (
                 <CallOut color="error" fullWidth>
-                  {props.error}
+                  {submitError}
                 </CallOut>
               )}
+
               <Field
                 name="email"
                 validate={composeValidators(required, validateEmail)}

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

@@ -1,6 +1,5 @@
+import { FORM_ERROR } from "final-form";
 import React, { Component } from "react";
-import { BadUserInputError } from "talk-framework/lib/errors";
-
 import SignIn, { SignInForm } from "../components/SignIn";
 import {
   SetViewMutation,
@@ -24,7 +23,6 @@ class SignInContainer extends Component<
   SignInContainerProps,
   SignUpContainerState
 > {
-  public state = { error: null };
   private setView = (view: View) => {
     this.props.setView({
       view,
@@ -33,16 +31,10 @@ class SignInContainer extends Component<
   private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
     try {
       await this.props.signIn(input);
-      form.reset();
+      return form.reset();
     } catch (error) {
-      this.setState({ error: error.message });
-      if (error instanceof BadUserInputError) {
-        return error.invalidArgsLocalized;
-      }
-      // tslint:disable-next-line:no-console
-      console.error(error);
+      return { [FORM_ERROR]: error.message };
     }
-    return undefined;
   };
   private goToForgotPassword = () => this.setView("FORGOT_PASSWORD");
   private goToSignUp = () => this.setView("SIGN_UP");
@@ -52,7 +44,6 @@ class SignInContainer extends Component<
         onSubmit={this.onSubmit}
         goToForgotPassword={this.goToForgotPassword}
         goToSignUp={this.goToSignUp}
-        error={this.state.error}
       />
     );
   }

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

@@ -1,5 +1,5 @@
+import { FORM_ERROR } from "final-form";
 import React, { Component } from "react";
-import { BadUserInputError } from "talk-framework/lib/errors";
 import SignUp, { SignUpForm } from "../components/SignUp";
 
 import {
@@ -24,7 +24,6 @@ class SignUpContainer extends Component<
   SignUpContainerProps,
   SignUpContainerState
 > {
-  public state = { error: "" };
   private setView = (view: View) => {
     this.props.setView({
       view,
@@ -32,27 +31,15 @@ class SignUpContainer extends Component<
   };
   private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
     try {
-      await this.props.signUp(input);
+      return await this.props.signUp(input);
       form.reset();
     } catch (error) {
-      this.setState({ error: error.message });
-      if (error instanceof BadUserInputError) {
-        return error.invalidArgsLocalized;
-      }
-      // tslint:disable-next-line:no-console
-      console.error(error);
+      return { [FORM_ERROR]: error.message };
     }
-    return undefined;
   };
   private goToSignIn = () => this.setView("SIGN_IN");
   public render() {
-    return (
-      <SignUp
-        onSubmit={this.onSubmit}
-        goToSignIn={this.goToSignIn}
-        error={this.state.error}
-      />
-    );
+    return <SignUp onSubmit={this.onSubmit} goToSignIn={this.goToSignIn} />;
   }
 }