Adding inner routing between views

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

@@ -1,14 +1,12 @@
 import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
-
 import {
   composeValidators,
   required,
   validateEmail,
   validatePassword,
 } from "talk-framework/lib/validation";
-
 import {
   Button,
   Flex,
@@ -18,7 +16,7 @@ import {
   Typography,
   ValidationMessage,
 } from "talk-ui/components";
-
+import { View } from "../containers/SignInContainer";
 import * as styles from "./SignIn.css";
 
 interface FormProps {
@@ -28,6 +26,7 @@ interface FormProps {
 
 export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
+  setView: (view: View) => void;
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
@@ -84,7 +83,14 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                       </ValidationMessage>
                     )}
                   <span className={styles.forgotPassword}>
-                    <Button variant="underlined" color="primary" size="small">
+                    <Button
+                      variant="underlined"
+                      color="primary"
+                      size="small"
+                      onClick={() => {
+                        props.setView("FORGOT_PASSWORD");
+                      }}
+                    >
                       Forgot your password?
                     </Button>
                   </span>
@@ -102,7 +108,14 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                 className={styles.subFooter}
               >
                 <Typography>Don't have an account?</Typography>
-                <Button variant="underlined" size="small" color="primary">
+                <Button
+                  variant="underlined"
+                  size="small"
+                  color="primary"
+                  onClick={() => {
+                    props.setView("SIGN_UP");
+                  }}
+                >
                   Sign Up
                 </Button>
               </Flex>

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

@@ -10,8 +10,6 @@ import {
   validatePassword,
   validateUsername,
 } from "talk-framework/lib/validation";
-import * as styles from "./SignUp.css";
-
 import {
   Button,
   Flex,
@@ -22,6 +20,8 @@ import {
   Typography,
   ValidationMessage,
 } from "talk-ui/components";
+import { View } from "../containers/SignUpContainer";
+import * as styles from "./SignUp.css";
 
 interface FormProps {
   email: string;
@@ -32,6 +32,7 @@ interface FormProps {
 
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
+  setView: (view: View) => void;
 }
 
 const SignUp: StatelessComponent<SignUpForm> = props => {
@@ -163,7 +164,14 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 className={styles.subFooter}
               >
                 <Typography>Already have an account?</Typography>
-                <Button variant="underlined" size="small" color="primary">
+                <Button
+                  variant="underlined"
+                  size="small"
+                  color="primary"
+                  onClick={() => {
+                    props.setView("SIGN_IN");
+                  }}
+                >
                   Sign In
                 </Button>
               </Flex>

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

@@ -1,14 +1,26 @@
+import React, { Component } from "react";
 import { BadUserInputError } from "talk-framework/lib/errors";
 import SignIn, { SignInForm } from "../components/SignIn";
-
-import React, { Component } from "react";
-import { SignInMutation, withSignInMutation } from "../mutations";
+import {
+  SetViewMutation,
+  SignInMutation,
+  withSetViewMutation,
+  withSignInMutation,
+} from "../mutations";
 
 interface SignInContainerProps {
   signIn: SignInMutation;
+  setView: SetViewMutation;
 }
 
+export type View = "SIGN_UP" | "FORGOT_PASSWORD";
+
 class SignInContainer extends Component<SignInContainerProps> {
+  private setView = (view: View) => {
+    this.props.setView({
+      view,
+    });
+  };
   private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
     try {
       await this.props.signIn(input);
@@ -23,9 +35,9 @@ class SignInContainer extends Component<SignInContainerProps> {
     return undefined;
   };
   public render() {
-    return <SignIn onSubmit={this.onSubmit} />;
+    return <SignIn onSubmit={this.onSubmit} setView={this.setView} />;
   }
 }
 
-const enhanced = withSignInMutation(SignInContainer);
+const enhanced = withSetViewMutation(withSignInMutation(SignInContainer));
 export default enhanced;

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

@@ -1,14 +1,27 @@
+import React, { Component } from "react";
 import { BadUserInputError } from "talk-framework/lib/errors";
 import SignUp, { SignUpForm } from "../components/SignUp";
 
-import React, { Component } from "react";
-import { SignUpMutation, withSignUpMutation } from "../mutations";
+import {
+  SetViewMutation,
+  SignUpMutation,
+  withSetViewMutation,
+  withSignUpMutation,
+} from "../mutations";
 
 interface SignUpContainerProps {
   signUp: SignUpMutation;
+  setView: SetViewMutation;
 }
 
+export type View = "SIGN_IN";
+
 class SignUpContainer extends Component<SignUpContainerProps> {
+  private setView = (view: View) => {
+    this.props.setView({
+      view,
+    });
+  };
   private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
     try {
       await this.props.signUp(input);
@@ -23,9 +36,9 @@ class SignUpContainer extends Component<SignUpContainerProps> {
     return undefined;
   };
   public render() {
-    return <SignUp onSubmit={this.onSubmit} />;
+    return <SignUp onSubmit={this.onSubmit} setView={this.setView} />;
   }
 }
 
-const enhanced = withSignUpMutation(SignUpContainer);
+const enhanced = withSetViewMutation(withSignUpMutation(SignUpContainer));
 export default enhanced;