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

machine.js

// Contact Summary (Machine)
const context = {
    application_data: {
    record: {
      id: '',
      address: '',
      company_name: '',
      emails: [],
      first_name: '',
      title: '',
      primary_email: '',
      primary_phone_number: '',
      last_name: '',
      phone_numbers: [],
      preferred_contacted: ['email', 'phone_number']
    }
  },
  params: {
    id: ''
  }
}

const config = {
    id: 'crm_contact_summary',
    initial: 'loading',
  on: {
    COMPONENT_UNMOUNT: 'done'
  },
  context,
    states: {
      loading: {
      id: 'loading',
      initial: 'get_application_config',
      states: {
        get_application_config: {
          after: {
            REQUEST_TIMEOUT: 'request_timeout'
          },
          invoke: {
            id: 'get-application-config',
            src: 'getApplicationConfig'
          },
          on: {
            SUCCESS: {
              actions: ['assignApplicationConfig'],
              target: 'get_application_data'
            },
            ERROR: {
              actions: ['toastGetApplicationConfigErrorMessage'],
              target: '#retry'
            }
          }
        },
        get_application_data: {
          after: {
            REQUEST_TIMEOUT: 'request_timeout'
          },
          invoke: {
            id: 'get-application-data',
            src: 'getApplicationData'
          },
          on: {
            SUCCESS: {
              actions: ['assignApplicationData', 'resetRetry'],
              target: '#ready'
            },
            ERROR: {
              actions: ['toastGetApplicationDataErrorMessage'],
              target: '#retry'
            }
          }
        },
        request_timeout: {
          on: {
            REFRESH: '#loading'
          }
        }
      }
    },
      ready: {
        id: 'ready',
        initial: 'fetching',
        on: {
          REFETCH: {
            actions: ['assignRecordID'],
            target: '#fetching'
          }
        },
        states: {
          fetching: {
            id: 'fetching',
            invoke: {
              id: 'fetch-record',
              src: 'fetchRecord',
            },
            on: {
              GOT_RECORD: {
                actions: ['assignRecord'],
                target: 'loaded'
              },
              ERROR: 'error'
            },
            after: {
              REQUEST_TIMEOUT: 'error'
            }
          },
          error: {
            entry: ['showErrorFetchingToastMessage'],
            on: {
              REFRESH: 'fetching'
            }
          },
          loaded: {
            id: 'loaded'
          }
        }
      },
          retry: {
      id: 'retry',
      on: {
        RETRY: [
          {
            cond: 'hasReachedMaxAttempts',
            target: 'error'
          },
          {
            actions: ['incrementRetry'],
            target: 'loading'
          }
        ]
      }
      // always: [
      //   {
      //     cond: 'hasReachedMaxAttempts',
      //     target: 'done'
      //   },
      //   {
      //     actions: ['incrementRetry'],
      //     target: '#loading'
      //   }
      // ]
    },
      done: {
        id: 'done',
        type: 'final'
      },
      error: {
        id: 'error',
        type: 'final'
      }
    }
  }
  
const implementations = {
  delays: {
    REQUEST_TIMEOUT: () => 5000
  }
}

Machine(config, implementations)