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 fetchPayments = new Promise((resolve) => {
  setTimeout(() => {
    const paymentList = [
      { id: '1', cardNumber: 1 },
      { id: '2', cardNumber: 2 }
    ];
    resolve(paymentList);
  }, 3000);
});

const fetchMachine = Machine(
  {
    id: 'payment',
    type: 'parallel',
    context: {
      payments: []
    },
    states: {
      paymentActions: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              ADD_CARD: {
                target: '',
                actions: ['goToAddCard']
              },
              DELETE_CARD: { target: 'confirmation' }
            }
          },
          confirmation: {
            on: {
              YES: {
                target: 'idle',
                actions: ['deleteCard']
              },
              NOP: { target: 'idle' }
            }
          }
        }
      },
      fetchPayments: {
        initial: 'fetching',
        states: {
          fetching: {
            invoke: {
              id: 'fetchPayments',
              src: fetchPayments,
              onDone: {
                target: 'success',
                actions: ['savePayments']
              },
              onError: {
                target: 'failure',
                actions: ['showError']
              }
            }
          },
          success: {
            on: {
              REFRESH_PAYMENTS: { target: 'fetching' }
            }
          },
          failure: {
            on: {
              REFRESH_PAYMENTS: { target: 'fetching' }
            }
          }
        }
      }
    }
  },
  {
    actions: {
      goToAddCard: () => {},
      savePayments: assign({
        payments: (context, event) => {
          console.log(event);
          return event.data;
        }
      }),
      showError: () => {},
      deleteCard: assign({
        payments: (context, event) => {
          console.log('deleteCard', context.payments.splice(1, 1))
          return context.payments.splice(1, 1);
        }
      })
    }
  }
);