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({
  	initial: 'loading',

  	states: {
  	  ready: {
  	    id: "ready",
  	    type: 'final'
  	  },
  		loading: {
  			entry: assign({
  				isLoading: true,
  			}),
  			invoke: {
  				id: "fetch-vessel-form",
  				src: "getVesselForm",
  				onDone: {
  					target: "vesselFormLoaded"
  				},
  				onError: {
  					target: "failure",
  				},
  			},
  		},
  		vesselFormLoaded: {
  		  initial: "idle",
  		  on: {
  		    SUBMIT: {
  		      target: ".submitVesselForm"  
  		    }, 
  		  },
  			states: {
  			  idle: {
  			    type: "final"
  			  },
  			  submitVesselForm: {
  			    invoke: "submit-vessel-form",
  			    src: "submitVesselForm",
  			    onDone: {
  			      target: "#ready"
  			    },
  			    onError: {
  			      target: "failure"
  			    }
  			  }  
  			}
  		},
  		failure: {
  			type: 'final'
  		}	
  	}
  },{
    services: {
      getVesselForm: (context, event) => {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							formData: {
								test: true,
							},
						});
					}, 2000);
				});
			},
      submitVesselForm: (context, event) => {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							formSubmitted: {
								test: true,
							},
						});
					}, 2000);
				});
			},
    }
  });