sawyerh

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

sawyerh

Upload verification step states
  Not started
    Skip -> Skipped
    Add a file -> Completed
    Child date in future -> Not applicable
  Not applicable
  Skipped
    Add a file -> Completed
  Completed

sawyerh

Verify ID step states
  Not started
    Answer some questions -> In Progress
  In Progress
    Answer all questions -> Completed
  Completed
    Review and confirm -> Submitted
  Submitted

sawyerh

InputPii
  Empty*
    onFocus -> Unmasked & Focused
  Unmasked & Focused
    onBlur -> Unmasked
    Submit -> Masked
  Unmasked
    onFocus -> Unmasked & Focused
  Masked
    onFocus -> Masked & Focused

sawyerh

var names = [
  "patricia", "aakhus", "atia", "abawi", "edward", "abbey", "lynn", "belle", "kendrick", "abbott", "eleanor", "hallowell", "hailey", "megan", "shana", "abé", "louise", "abeita", "robert", "abel", "aberjhani", "walter", "abish", "abiola", "abrams", "diana", "susan", "abulhawa", "kathy", "acker", "cherry", "adair", "alice", "adams", "henry", "yda", "addis", "kim", "addonizio", "george", "ade", "renata", "adler", "warren", "james", "agee", "charlotte", "agell", "kelli", "russell", "agodon", "conrad", "aiken", "hiag", "akmakjian", "mitch", "albom", "kathleen", "alcalá", "louisa", "may", "alcott", "isabella", "macdonald", "alden", "clifford", "lindsey", "alderman", "thomas", "bailey", "aldrich", "malin", "alegria", "lloyd", "alexander", "sherman", "alexie", "horatio", "nelson", "algren", "hervey", "allen", "isabel", "allende", "dorothy", "allison", "lisa", "alther", "joseph", "altsheler", "julia", "alvarez", "rudolfo", "anaya", "laurie", "halse", "anderson", "poul", "sherwood", "eliza", "frances", "a

sawyerh

// router.js
import { routingMachine } from "machine";

export function getNextPathname(event, context) {
  const currentPathname = window.location.pathname;
  
  const nextPathname = routingMachine
    .withContext(context)                 // https://xstate.js.org/docs/guides/context.html
    .transition(currentPathname, event);  // https://xstate.js.org/api/interfaces/statemachine.html#transition
  

sawyerh

// routes.js

export const routes = {
  apply: {
    documents: "/apply/upload-docs",
    household: "/apply/household",
    income: "/apply/income",
    name: "/apply/name",
    review: "/apply/review",
    success: "/apply/success"

sawyerh

import { getNextPathname, goTo } from "router";
import { updateApplication } from "api";

function IncomePage() {
  
  // This is within the page for example purposes, but
  // could be abstracted for a multi-page form.
  const handleFormSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);

sawyerh

const routes = {
  auth: {
    login: "/auth/login",
    reset: "/auth/reset-password"
  },
  apply: {
    documents: "/apply/upload-docs",
    income: "/apply/income",
    name: "/apply/name",
    review: "/apply/review",

sawyerh

// machine.js
import { Machine } from "xstate";

// Conditions for some of our transitions
const guards = {
  hasJobIncome: (context) => context.has_job_income === true,
};

export const routingMachine = Machine({
  // Initial state is mostly useful for visualizations, for our purposes.