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)
  
  function makeBooking(context) {
      return new Promise((resolve, reject) => {
        
        resolve({id: 1, number: 1, status: 'booking'})
        
        reject({error: 'Failed'})
      })  
  
  }
  
  
  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'initial',
    context: {
      seat: 0
    },
    states: {
      initial: {
        on: {
          AVAILABLE: 'available',
          UNAVAILABLE: 'unavailable',
          BOOKING: 'booking',
          IN_BOOKING: 'in_booking', 
          BOOKED: 'booked'
        }
      },
      available: {
        on: {
          BOOKED: 'booked',
          IN_BOOKING: 'in_booking',
          UPDATE_TO_BOOKING: 'update_to_booking',
          UNAVAILABLE: 'unavailable'
          
        }
      },
      unavailable: {
        
      },
      
      update_to_booking: {
        on: {
          target:'in_booking',
          actions: assign({seat: (_context, event) => event.data})
        }
      },
      
      booking: {
        invoke:{
          id: 'booking-tiket',
          src: (context, _event) => makeBooking(context),
          onDone: {
            target: 'in_booking',
            actions: assign({seat: (_context, event) => event.data})
          },
          onError: {
            target: 'error',
            actions: assign({error: (_context, event) => event.data})
          }
        }
        
      },
      in_booking: {
        on: {
          BOOKED: 'booked'
        }
      },
      
      error: {},
      
      booked: {
        target: 'success', 
        actions: assign({seat: (_context, event) => event})
      },
      success: {
        type: 'final'
      },
      
      
     
    }
  });