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

machine.js

// XState Brain Teaser 2 - Async Validation
// https://www.youtube.com/watch?v=nUKA0xhkZc8

const fetchValidateUserCanSendAmount = () => fetch("/validate-user-can-send-amount")
const fetchValidateBankDetails = () => fetch("/validate-bank-details")
  
  const validationMachine = Machine({
    id: 'validation',
    initial: 'idle',
    context: {},
    states: {
      idle: {
        on: {
          START: 'active',
        }
      },
      active: {
        on: {
          AMOUNT_CHANGED: {
            src: "validateUserCanSendAmount",
            onDone: "active",
            onError: {
              target: "active",
              actions: "notifyValidateUserCanSendAmountFailed"
            }
          },
          CURRENCY_CHANGED: {
            src: "validateUserCanSendAmount",
            onDone: "active",
            onError: {
              target: "active",
              actions: "notifyValidateUserCanSendAmountFailed"
            }
          },
          SORT_CODE_CHANGED: {
            src: "validateBankDetails",
            onDone: "active",
            onError: {
              target: "active",
              actions: "notifyValidateBankDetailsFailed"
            }
          },
          ACCOUNT_NUMBER_CHANGED: {
            src: "validateBankDetails",
            onDone: "active",
            onError: {
              target: "active",
              actions: "notifyValidateBankDetailsFailed"
            }
          },
        }
      },
      valid: {},
    }
  });