Signup state machine using xstate

xstate - react signup.jsx

import React, { useState } from "react";
import { Machine, assign } from "xstate";
import { useMachine } from "@xstate/react";

const signupUser = email =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve("You are signed up!");
      reject("Unable to sign you up :(");
    }, 1000);
  });

const signUpMachine = Machine({
  id: "signup",
  initial: "idle",
  context: {
    message: ""
  },
  states: {
    idle: {
      on: {
        SUBMIT: [
          {
            target: "loading",
            // TODO - Validate email here
            cond: (context, event) => event.data.email !== "",
            actions: assign({
              message: (context, event) => "Signing you up..."
            })
          },
          {
            target: "error",
            actions: assign({
              message: (context, event) => "Please enter a valid email"
            })
          }
        ]
      }
    },
    loading: {
      invoke: {
        id: "submitSignup",
        src: (context, event) => signupUser(event.data.email),
        onDone: {
          target: "success",
          actions: assign({
            message: (context, event) => event.data
          })
        },
        onError: {
          target: "error",
          actions: assign({
            message: (context, event) => event.data
          })
        }
      }
    },
    success: {
      type: "final"
    },
    error: {
      on: {
        SUBMIT: [
          {
            target: "loading",
            // TODO - Validate email here
            cond: (context, event) => event.data.email !== "",
            actions: assign({
              message: (context, event) => "Signing you up..."
            })
          },
          // Incase user removes email
          {
            target: "error",
            actions: assign({
              message: (context, event) => "Please enter a valid email"
            })
          }
        ]
      }
    }
  }
});

function App() {
  const [machine, send] = useMachine(signUpMachine);
  const [form, updateForm] = useState({ email: "" });

  return (
    <div className="App">
      {machine.context.message ? machine.context.message : null}
      {!machine.matches("success") ? (
        <form
          onSubmit={e => {
            e.preventDefault();
            send({ type: "SUBMIT", data: form });
          }}
        >
          <input
            type="email"
            name="email"
            onChange={e => {
              updateForm({ ...form, email: e.target.value });
            }}
          />
          <button type="submit">Submit</button>
        </form>
      ) : null}
    </div>
  );
}

export default App;