Created
September 15, 2021 12:30
-
-
Save TibsGracia/bfae957ecd6717f804eb8a3bc3aa3e2f to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const context = { | |
| application_config: { | |
| max_attempts: 5, | |
| buttons: { | |
| save_close: { | |
| name: 'SAVE', | |
| display: true, | |
| disabled: true | |
| }, | |
| cancel: { | |
| name: 'CANCEL', | |
| display: true, | |
| disabled: false | |
| } | |
| } | |
| }, | |
| application_data: { | |
| attempts: 0, | |
| record: {}, | |
| search_address_input: '', | |
| search_results: [], | |
| fields: { | |
| first_name: { | |
| id: 'first_name', | |
| error: false, | |
| errorText: '', | |
| label: 'First Name', | |
| required: true, | |
| placeholder: 'Enter First Name', | |
| icon: 'user', | |
| value: '' | |
| }, | |
| last_name: { | |
| id: 'last_name', | |
| error: false, | |
| errorText: '', | |
| label: 'Last Name', | |
| required: true, | |
| placeholder: 'Enter Last Name', | |
| icon: 'user', | |
| value: '' | |
| }, | |
| company_name: { | |
| id: 'company_name', | |
| error: false, | |
| errorText: '', | |
| label: 'Company', | |
| required: true, | |
| placeholder: 'Enter Company Name', | |
| icon: 'building-types', | |
| value: '' | |
| }, | |
| title: { | |
| id: 'title', | |
| error: false, | |
| errorText: '', | |
| label: 'Job Title', | |
| required: true, | |
| placeholder: 'Enter Job Title', | |
| icon: 'jobs', | |
| value: '' | |
| }, | |
| address: { | |
| id: 'address', | |
| error: false, | |
| errorText: '', | |
| label: 'Address', | |
| required: false, | |
| placeholder: 'Enter Address', | |
| icon: '', | |
| value: '' | |
| }, | |
| phone_numbers: { | |
| value: [ | |
| { | |
| id: 'phone_number', | |
| error: false, | |
| errorText: '', | |
| label: 'Phone Number', | |
| required: true, | |
| placeholder: 'Phone Number', | |
| icon: 'phone', | |
| phone_number: '', | |
| is_primary: true | |
| } | |
| ] | |
| }, | |
| emails: { | |
| value: [ | |
| { | |
| id: 'email', | |
| error: false, | |
| errorText: '', | |
| label: 'Email', | |
| required: true, | |
| placeholder: 'Enter Email', | |
| icon: 'envelope', | |
| email: '', | |
| is_primary: true | |
| } | |
| ] | |
| } | |
| } | |
| }, | |
| params: { | |
| id: '' | |
| }, | |
| current_field: '' | |
| } | |
| const config = { | |
| initial: 'loading', | |
| context, | |
| on: { | |
| COMPONENT_UNMOUNT: 'done' | |
| }, | |
| states: { | |
| loading: { | |
| id: 'loading', | |
| initial: 'get_application_config', | |
| states: { | |
| get_application_config: { | |
| after: { | |
| 20000: '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: { | |
| 20000: '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: { | |
| // on: { | |
| // ADD_FIELD: { | |
| // actions: ['assignAddNewInputField'], | |
| // target: '#has_pending_change' | |
| // }, | |
| // REMOVE_FIELD: { | |
| // actions: ['assignRemoveSelectedInputField'], | |
| // target: '#has_pending_change' | |
| // }, | |
| // SELECT_PRIMARY: { | |
| // actions: ['assignNewPrimary'], | |
| // target: '#has_pending_change' | |
| // } | |
| // }, | |
| // initial: 'no_pending_change', | |
| // states: { | |
| // no_pending_change: { | |
| // id: 'no_pending_change', | |
| // on: { | |
| // INPUT_CHANGE: { | |
| // actions: ['updateFields'], | |
| // target: 'has_pending_change' | |
| // } | |
| // } | |
| // }, | |
| // has_pending_change: { | |
| // id: 'has_pending_change', | |
| // on: { | |
| // INPUT_CHANGE: { | |
| // actions: ['updateFields'] | |
| // }, | |
| // CANCEL: { | |
| // target: 'cancel_confirmation' | |
| // }, | |
| // SUBMIT: { | |
| // target: 'validating' | |
| // } | |
| // } | |
| // }, | |
| // validating: { | |
| // id: 'validating', | |
| // invoke: { | |
| // id: 'validation', | |
| // src: 'validation' | |
| // }, | |
| // on: { | |
| // VALIDATE_ERROR: { | |
| // actions: ['assignErrorMessageToFields'], | |
| // target: 'has_pending_change' | |
| // }, | |
| // SUCCESS: { | |
| // actions: ['logSave'], | |
| // target: 'contact_exist_validating' | |
| // } | |
| // } | |
| // }, | |
| // contact_exist_validating: { | |
| // id: 'contact-exist-validating', | |
| // invoke: { | |
| // id: 'contact-exist-validation', | |
| // src: 'contactExistValidation' | |
| // }, | |
| // on: { | |
| // SERVER_VALIDATE_ERROR: { | |
| // actions: ['assignServerValidationErrorMessage'], | |
| // target: 'has_pending_change' | |
| // }, | |
| // SUCCESS: { | |
| // actions: ['logSave'], | |
| // target: 'submitting' | |
| // } | |
| // } | |
| // }, | |
| // cancel_confirmation: { | |
| // id: 'cancel_confirmation', | |
| // on: { | |
| // YES: { | |
| // actions: ['resetFieldsToOriginalRecord'], | |
| // target: ['no_pending_change'] | |
| // }, | |
| // NO: { | |
| // actions: ['closeDialog'], | |
| // target: 'has_pending_change' | |
| // } | |
| // } | |
| // }, | |
| // submitting: { | |
| // id: 'submitting', | |
| // after: { | |
| // REQUEST_TIMEOUT: { | |
| // actions: ['toastUpdateContactTimeoutMessage'], | |
| // target: 'has_pending_change' | |
| // } | |
| // }, | |
| // invoke: [ | |
| // { | |
| // id: 'submit', | |
| // src: 'submit' | |
| // } | |
| // ], | |
| // on: { | |
| // SUCCESS: { | |
| // actions: ['assignRecord'], | |
| // target: 'submitted' | |
| // }, | |
| // ERROR: { | |
| // actions: ['toastUpdateContactErrorMessage'], | |
| // target: 'has_pending_change' | |
| // } | |
| // } | |
| // }, | |
| // submitted: { | |
| // entry: [ | |
| // 'toastUpdateContactSuccessMessage', | |
| // 'notifyChangesToListener' | |
| // ], | |
| // after: { | |
| // 100: 'no_pending_change' | |
| // } | |
| // } | |
| // } | |
| // }, | |
| // error: { | |
| // on: { | |
| // REFRESH: 'fetch' | |
| // } | |
| // } | |
| // } | |
| }, | |
| retry: { | |
| id: 'retry', | |
| after: { | |
| 2000: [ | |
| { | |
| cond: 'hasReachedMaxAttempts', | |
| target: 'error' | |
| }, | |
| { | |
| actions: ['incrementRetry'], | |
| target: 'loading' | |
| } | |
| ] | |
| }, | |
| }, | |
| timeout: { | |
| id: 'done', | |
| type: 'final' | |
| }, | |
| error: { | |
| id: 'done', | |
| type: 'final' | |
| }, | |
| done: { | |
| id: 'done', | |
| type: 'final' | |
| } | |
| } | |
| } | |
| Machine(config, { | |
| guards: { | |
| hasReachedMaxAttempts: () => false | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment