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 fetchMachine = Machine({
    id: 'form',
    initial: 'editing',
    states: {
        editing: {
            on: {
                INPUT: {
                    actions: 'cache',
                    target: 'editing'
                },
                FETCH: [
                    {
                        cond: 'isStartYearEmpty',
                        target: 'editing.startYear.error.empty'
                    },
                    {
                        cond: 'isStartMonthEmpty',
                        target: 'editing.startMonth.error.empty'
                    },
                    {
                        cond: 'isMortgageDollarsEmpty',
                        target: 'editing.mortgageDollars.error.empty'
                    },
                    {
                        cond: 'isMortgageDollarsBadFormat',
                        target: 'editing.mortgageDollars.error.badFormat'
                    },
                    {
                        cond: 'isMortgageDollarsTooLow',
                        target: 'editing.mortgageDollars.error.tooLow'
                    },
                    {
                        cond: 'isRatePercentEmpty',
                        target: 'editing.ratePercent.error.empty'
                    },
                    {
                        cond: 'isRatePercentBadFormat',
                        target: 'editing.ratePercent.error.badFormat'
                    },
                    {
                        cond: 'isRatePercentTooHigh',
                        target: 'editing.ratePercent.error.tooHigh'
                    },
                    {
                        cond: 'isRatePercentTooLow',
                        target: 'editing.ratePercent.error.tooLow'
                    },
                    {
                        cond: 'isLenderNameEmpty',
                        target: 'editing.lenderName.error.empty'
                    },
                    {
                        target: 'fetching'
                    }
                ]
            },
            type: 'parallel',
            states: {
                startYear: {
                    initial: 'valid',
                    states: {
                        valid: {},
                        error: {
                            initial: 'empty',
                            states: {
                                empty: {},
                            },
                            onEntry: 'focusStartYear'
                        }
                    }
                },
                startMonth: {
                    initial: 'valid',
                    states: {
                        valid: {},
                        error: {
                            initial: 'empty',
                            states: {
                                empty: {},
                            },
                            onEntry: 'focusStartMonth'
                        }
                    }
                },
                mortgageDollars: {
                    initial: 'valid',
                    states: {
                        valid: {},
                        error: {
                            initial: 'empty',
                            states: {
                                empty: {},
                                badFormat: {},
                                tooLow: {}
                            },
                            onEntry: 'focusMortgageDollars'
                        }
                    }
                },
                ratePercent: {
                    initial: 'valid',
                    states: {
                        valid: {},
                        error: {
                            initial: 'empty',
                            states: {
                                empty: {},
                                badFormat: {},
                                tooHigh: {},
                                tooLow: {}
                            },
                            onEntry: 'focusRatePercent'
                        }
                    }
                },
                lenderName: {
                    initial: 'valid',
                    states: {
                        valid: {},
                        error: {
                            initial: 'empty',
                            states: {
                                empty: {}
                            },
                            onEntry: 'focusLenderName'
                        }
                    }
                },
            }
        },
        fetching: {
            invoke: {
                id: 'fetch',
                src: 'requestMortgageInfo',
                onDone: {
                    target: 'results',
                    actions: 'saveResults'
                },
                onError: 'failure'
            }
        },
        results: {
            on: {
                INPUT: {
                    actions: 'cache',
                    target: 'editing'
                }
            },
            initial: 'idle',
            states: {
                idle: {
                    on: {
                        OPEN_CONTACT: 'contact'
                    }
                },
                contact: {
                    on: {
                        INPUT: {
                            actions: 'cache',
                            target: 'contact'
                        },
                        SUBMIT_CONTACT: [
                            {
                                cond: 'isNameEmpty',
                                target: 'contact.name.error.empty'
                            },
                            {
                                cond: 'isContactMethodEmpty',
                                target: 'contact.email.error.empty'
                            },
                            {
                                target: 'submitting'
                            }
                        ]
                    },
                    type: 'parallel',
                    states: {
                        name: {
                            initial: 'valid',
                            states: {
                                valid: {},
                                error: {
                                    initial: 'empty',
                                    states: {
                                        empty: {}
                                    },
                                    onEntry: 'focusName'
                                }
                            }
                        },
                        email: {
                            initial: 'valid',
                            states: {
                                valid: {},
                                error: {
                                    initial: 'empty',
                                    states: {
                                        empty: {}
                                    },
                                    onEntry: 'focusEmail'
                                }
                            }
                        }
                    }
                },
                submitting: {
                    invoke: {
                        id: 'submit',
                        src: 'submitContactInfo',
                        onDone: 'success',
                        onError: 'idle'
                    }
                },
                success: {
                  type: 'final'
                }
            }
        },
        failure: {
            on: {
                INPUT: {
                    actions: 'cache',
                    target: 'editing'
                },
                FETCH: 'fetching'
            }
        }
    }
},
{
  guards: {
        isStartYearEmpty: () => false,
        isStartMonthEmpty: () => false,
        isMortgageDollarsEmpty: () => false,
        isMortgageDollarsBadFormat: () => false,
        isMortgageDollarsTooLow: () => false,
        isRatePercentEmpty: () => false,
        isRatePercentBadFormat: () => false,
        isRatePercentTooHigh: () => false,
        isRatePercentTooLow: () => false,
        isLenderNameEmpty: () => false,
        isNameEmpty: () => false,
        isContactMethodEmpty: () => false
    },
    services: {
      requestMortgageInfo: Promise.resolve,
      submitContactInfo: Promise.resolve
    },
    actions: {
        cache: assign((context, event) => event),
        saveResults: assign({
            mortgage: (context, event) => event.data
        })
    }
})