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)
  
  // dynamically determine initial state
  const initialPackageState = 'invalid'
  
  const fetchMachine = Machine({
    id: 'package',
    initial: 'invalid',
    context: {
      retries: 0,
      items: [{ valid: true }, { valid: true }]
    },
    states: {
      invalid: {
        on: {
          VALIDATE: [{ 
            target: 'valid',
            cond: 'productsAreValid'
          },
          { target: 'invalid' }
          ]
        }
      },
      valid: {
        on: {
          FETCH_PRICE: 'fetching_price'
        }
      },
      fetching_price: {
        on: {
          RESOLVE: 'buyable',
          REJECT: 'error'
        }
      },
      buyable: {
        on: {
          ADD_TO_CART: [{
            target: 'added'
          }, { target: 'failed' } ]
        }
      },
      failed: {},
      added: {
        on: {
          VALIDATE: [{
            target: 'valid',
            cond: 'productsAreValid'
          },
          { target: 'invalid' }]
        }
      },
      error: {
        on: {
          RETRY: {
            target: 'fetching_price',
            actions: assign({
              retries: (context, event) => context.retries + 1
            })
          }
        }
      }
    }
  },
  { guards: { productsAreValid } }
  );
  
  function productsAreValid(context, event) {
    const { items } = context;
    
    if (!items) return false;
    
    const length = items.length;
    const validItems = items.filter(item => item.valid);
    
    return length === validItems.length
  }