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

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const config = {
  id: "form",
  initial: "idle",
  context: {},
  states: {
    idle: {
      initial: "unknown",
      states: {
        unknown: {
          on: {
            "": [{ target: "valid", cond: "valid" }, { target: "invalid" }]
          }
        },
        valid: { on: { SUBMIT: "#form.pending" } },
        invalid: {}
      },
      on: { INPUT: { target: "idle.unknown", actions: "input" } }
    },
    pending: {
      entry: "pending",
      invoke: {
        src: "submit",
        onDone: "success",
        onError: { target: "failure", actions: "error" }
      },
      after: { TIMEOUT: { target: "failure", actions: "timeout" } }
    },
    success: { type: "final" },
    failure: { on: { "": "idle" } }
  }
};

const options = {
  actions: {
    input: assign((context, event) => ({
      ...context,
      ...event
    })),
    pending: assign({ error: undefined }),
    error: assign({
      error: (_context, event) => event.data.message
    }),
    timeout: assign({ error: 'Timeout: No response from backend' })
  },
  guards: {
    valid: context => context.valid,
    success: () => true
  },
  delays: {
    TIMEOUT: 2000
  }
};

const machine = Machine(config, options);