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

machine.js

const machine = Machine({
  id: 'activeProduct',
  initial: 'pristine',
  strict: true,
  context: {
    name: {},                     // product resource name
    product: {}, // current active product
    dirtyProduct: {},         // locally modified fields not yet submitted
    submittingProduct: {},    // fields currently being submitted
    seqSubmitFails: 0,        // number of sequential submit failures
  },
  states: {
    // A pristine form matches the product in the DB.
    pristine: {
      on: {
        MUTATE: {target: 'dirty', actions: ['mergeMutation']},
      },
    },
    // A dirty form differs from the product in the DB.
    dirty: {
      on: {
        MUTATE: {target: 'dirty', actions: ['mergeMutation']},
      },
      after: {100: {target: 'submitting', actions: ['prepareSubmit']}},
    },
    // A form that is currently submitting.
    submitting: {
      invoke: {
        id: 'product/submitting',
        src: 'submitMutations',
        onDone: [
          {cond: 'isPristine', target: 'pristine', actions: ['mergeSubmitted']},
          {target: 'dirty', actions: ['mergeSubmitted']},
        ],
        onError: {
          target: 'dirty',
          actions: ['handleSubmitFailure'],
        },
      },
      on: {
        MUTATE: {actions: ['mergeMutation']},
      },
    },
  },
});