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

machine.js

  const getOtherContactsAction = () => fetch('google.com')
  
  const load_email_details_machine = Machine({
    id: 'load_contact_details_machine',
    initial: 'loading',
    context: {
        contactData: {}
    },
    states: {
        loading: {
            invoke: {
                src: 'getOtherContactsAction',
                onDone: {
                    target: 'complete',
                    actions: assign({
                        contactData: (context, event) => event.data.data
                    })
                },
                onError: {
                    target: 'error',
                }
            }
        },
        complete: {
            type: 'final',
            data: {
                context: (context, event) => context,
                event:  (context, event) => event,
            }
        },
        error: {
            type: 'final',
            data: {
                context: (context, event) => context
            }
        }
    }
}, {
    services: {
        getOtherContactsAction
    }
})
  

const load_contact_details_machine = () => Promise.resolve()
  
  const fetchMachine = Machine({
    id: 'parallel',
    type: 'parallel',
    context: {
        emailData: {},
        contactData: {},
    },
    states: {
        email: {
            initial: 'pending',
            states: {
                pending: {
                    invoke: {
                        src: 'load_email_details_machine',
                        onDone: {
                            target: 'success',
                            actions: assign({
                                emailData: {
                                    context: (context, event) => context,
                                }
                            }),
                        },
                        onError: {
                            target: 'error',
                            actions: assign({
                                emailData: {
                                    context: (context, event) => context,
                                }
                            }),
                        }
                    }
                },
                success: {
                    type: 'final'
                },
                error: {
                    type: 'final'
                }
            },
        },
        contact: {
            initial: 'pending',
            states: {
                pending: {
                    invoke: {
                        src: 'load_contact_details_machine',
                        onDone: {
                            target: 'success',
                            actions: assign({
                                contactData: {
                                    context: (context, event) => context,
                                }
                            }),
                        },
                        onError: {
                            target: 'error',
                            actions: assign({
                                contactData: {
                                    context: (context, event) => context,
                                }
                            }),
                        }
                    }
                },
                success: {
                    type: 'final',
                },
                error: {
                    type: 'final'
                }
            },
        },
    },
    onDone: {
      actions: [
        'returnContext',
        ]
    }
}, {
    actions: {
        returnContext: (c, e) => c
    },
    services: {
        load_email_details_machine,
        load_contact_details_machine,
    }
})