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

machine.js

// Edit Location - Counter (Machine)
const context = {
  application_config: {
    max_attempts: 5,
    buttons: {
      save: {
        name: 'SAVE',
        display_name: 'Save Changes',
        icon: 'check',
        display: true,
        disabled: true
      }
    }
  },
  application_data: {
    attempts: 0,
    record: {},
    fields: {
      location_type: {
        id: 'location_type',
        error: false,
        errorText: '',
        label: 'Location Type',
        required: true,
        placeholder: 'Enter Location Type',
        icon: 'help-outline',
        value: '',
        disabled: true
      },
      counter_name: {
        id: 'counter_name',
        error: false,
        errorText: '',
        label: 'Counter Name',
        required: true,
        placeholder: 'Counter Name',
        icon: 'help-outline',
        value: ''
      },
      address: {
        id: 'address',
        error: false,
        errorText: '',
        label: 'Address',
        required: true,
        placeholder: 'Enter Address',
        icon: 'help-outline',
        value: ''
      },
      region: {
        id: 'region',
        error: false,
        errorText: '',
        label: 'Region',
        required: true,
        placeholder: 'Region',
        icon: 'help-outline',
        value: ''
      },
      location_manager: {
        id: 'location_manager',
        error: false,
        errorText: '',
        label: 'Location Manager',
        required: true,
        placeholder: 'Location Manager',
        icon: 'help-outline',
        value: ''
      },
      email: {
        id: 'email',
        error: false,
        errorText: '',
        label: 'Email',
        required: true,
        placeholder: 'Email',
        icon: 'help-outline',
        value: ''
      },
      phone_number: {
        id: 'phone_number',
        error: false,
        errorText: '',
        label: 'Phone Number',
        required: true,
        placeholder: 'Phone Number',
        icon: 'help-outline',
        value: ''
      },
    }
  },
  params: {
    id: ''
  },
}

const config = {
  id: 'edit-location-counter',
  initial: 'loading',
  on: {
    COMPONENT_UNMOUNT: 'done'
  },
  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: 'fetch',
      on: {
        REFETCH_RECORD: {
          actions: ['assignRecordID'],
          target: '#fetch'
        }
      },
      states: {
        fetch: {
          id: 'fetch',
          after: {
            REQUEST_TIMEOUT: 'error'
          },
          invoke: {
            id: 'fetch-record',
            src: 'fetchRecord'
          },
          on: {
            SUCCESS: {
              actions: ['assignRecord'],
              target: 'loaded'
            },
            FAILED: {
              actions: ['toastErrorFetchingMessage'],
              target: 'error'
            }
          }
        },
        loaded: {
              initial: 'no_pending_change',
              states: {
                no_pending_change: {
                  id: 'no_pending_change',
                  on: {
                    INPUT_CHANGE: {
                      actions: ['updateFieldInputs'],
                      target: 'has_pending_change'
                    },
                    SUBMIT: {
                      actions: ['sendToastNoChangesMadeMessage']
                    }
                  }
                },
                has_pending_change: {
                  id: 'has_pending_change',
                  on: {
                    INPUT_CHANGE: {
                      actions: ['updateFieldInputs']
                    },
                    SUBMIT: {
                      target: 'validating'
                    }
                  }
                },
                validating: {
                  id: 'validating',
                  invoke: {
                    id: 'validation',
                    src: 'validation'
                  },
                  on: {
                    VALIDATE_ERROR: {
                      actions: ['assignErrorMessageToFields'],
                      target: 'has_pending_change'
                    },
                    SUCCESS: {
                      target: 'server_validation'
                    }
                  }
                },
                server_validation: {
                  id: 'server-validation',
                  invoke: {
                    id: 'server-validations',
                    src: 'serverValidations'
                  },
                  on: {
                    SERVER_VALIDATE_ERROR: {
                      actions: ['assignServerValidationErrorMessage'],
                      target: 'has_pending_change'
                    },
                    SUCCESS: {
                      actions: ['logSave'],
                      target: 'submitting'
                    }
                  }
                },
                submitting: {
                  id: 'submitting',
                  after: {
                    REQUEST_TIMEOUT: {
                      actions: ['toastUpdateContactTimeoutMessage'],
                      target: 'has_pending_change'
                    }
                  },
                  invoke: [
                    {
                      id: 'save-record',
                      src: 'saveRecord'
                    }
                  ],
                  on: {
                    SUCCESS: {
                      actions: ['assignRecord'],
                      target: 'submitted'
                    },
                    ERROR: {
                      actions: ['toastUpdateContactErrorMessage'],
                      target: 'has_pending_change'
                    }
                  }
                },
                submitted: {
                  entry: [
                    'toastUpdateContactSuccessMessage',
                    'notifyChangesToListener'
                  ],
                  after: {
                    REQUEST_TIMEOUT: 'no_pending_change'
                  }
                }
              }
            },
        error: {
          on: {
            REFRESH: 'fetch'
          }
        }
      }
    },
    retry: {
      id: 'retry',
      on: {
        RETRY: [
          {
            cond: 'hasReachedMaxAttempts',
            target: 'error'
          },
          {
            actions: ['incrementRetry'],
            target: 'loading'
          }
        ]
      }
      // always: [
      //   {
      //     cond: 'hasReachedMaxAttempts',
      //     target: 'done'
      //   },
      //   {
      //     actions: ['incrementRetry'],
      //     target: '#loading'
      //   }
      // ]
    },
    timeout: {
      id: 'done',
      type: 'final'
    },
    error: {
      id: 'done',
      type: 'final'
    },
    done: {
      id: 'done',
      type: 'final'
    }
  }
}

const implementations = {
  delays: {
    REQUEST_TIMEOUT: () => 5000
  }
}

Machine(config, implementations)