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

machine.js

function makeBooking(context, event) {
    console.log(event)
    let url = `http://localhost:4000/seats/${event.id}`;

    let data = {
        id: event.id,
        number: event.number,
        state: 'booked'
    }
    axios.patch(url, data).then(({data}) => {
        console.log(data)
        context.seat = data
        return data;
    }).catch(response => response.error);
}
  const seatMachine = Machine({
  
  id: 'seat-machine',
    initial: 'init',
    context: {
        error: '',
        seat: '',
    },
    states: {
        init: {
            on: {
                AVAILABLE: {target: 'available'},
                BOOKED: {target: 'booked'},
                BOOKING: {target: 'booking'},
                INBOOKING: {target: 'inBooking'},
            }
        },
        available: {
            on: {
                BOOK: [
                    {
                        cond: (ctx, event) => event.number !== '',
                        target: 'booking'
                    },
                    {
                        target: 'error',
                        actions: assign({error: (ctx, event) => 'Please select a seat to proceed'})
                    }
                ],
                CANCEL: {target: 'available'}
            }
        },
        booked: {target: 'final'},
        booking: {
            invoke: {
                id: 'booking-a-ticket',
                src: (context, event) => makeBooking(context, event),
                onDone: {
                    actions: assign({seat: (context, event) => {
                        console.log(event)
                       return event.data
                    }
                    }),
                    target: 'success'

                },
                onError: {
                    target: 'error',
                    actions: assign({error: (context, event) => event.data})
                }
            }
        },
        inBooking: {
            on: {
                AVAILABLE: {target: 'available'},
                BOOKED: {target: 'booked'},
            }
        },
        success: {
            after: {
                2000: {
                    target: 'booked'
                }
            }
        },
        error: {
            after: {
                2000: {
                    target: 'available',
                    actions: assign({error: (ctx, event) => ''})
                }
            }
        },


    }
})