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

machine.js

const formMachine = Machine({
  id: 'form',
  initial: 'idle',
  context: {},
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      on: {
        RESOLVE: {
          target: "loaded",
          actions: assign({
            data: (context, event) => event.data
          })
        },
        REJECT: {
          target: "errorapi",
          actions: assign({
            data: (context, event) => event.data
          })
        },        
      }      
    },
    loaded: {
      on: {
        SAVE_UNFINISHED: 'saving',
        SAVE_CONTINUE: 'validating'
      }
    },
    validating: {
      on: {
        INVALID: 'errorvalidation',
        VALID: 'saving',        
      }
    },
    errorvalidation: {
      on: {
        SAVE_UNFINISHED: 'saving',
        SAVE_CONTINUE: 'validating'        
      }
    },    
    saving: {
      on: {
        RESOLVE: {
          target: "saved",
          actions: assign({
            data: (context, event) => event.data
          })
        },
        REJECT: {
          target: "errorapi",
          actions: assign({
            data: (context, event) => event.data
          })
        },        
      }       
    },
    saved: {
      type: 'final'
    },
    errorapi: {
      type: 'final'
    }
  }
});