Generated by XState Viz: https://xstate.js.org/viz

machine.js

const fetchMachine = Machine({
  id: "signUp",
  initial: "edit",
  type: 'parallel',
  states: {
    validation: {
      initial: 'pending',
      states: {
        pending: {
          invoke: {
            src: "validate",
            onDone: "valid",
            onError: {
              target: "invalid",
              actions: "setFieldErrors"
            }
          }
        },
        valid: {},
        invalid: {}
      },
      on: {
        CHANGE: {
          target: ".pending"
        },
        BLUR: {
          target: ".pending"
        }
      }
    },
    submission: {
      initial: "idle",
      onDone: {
        target: "."
      },
      states: {
        idle: {
          on: {
            SUBMIT: {
              target: 'pending',
              // cond: "isValid"
            }
          }
        },
        pending: {
          invoke: {
            src: "signUp",
            onDone: "done",
            onError: {
              target: "error",
              actions: "setFieldError"
            }
          }
        },
        error: {
          on: {
            SUBMIT: {
              target: "pending",
              // cond: "isValid"
            }
          }
        },
        done: {
          type: "final"
        }
      },
    },
  },
});