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

machine.js

const formMachine = Machine(
  {
    id: 'form',
    initial: 'editing',
    context: {
      apiError: '',
      formSchema: null,
      formData: null,
    },
    states: {
      editing: {
        type: 'parallel',
        on: {
          CHANGE: {
            actions: 'setValue',
          },
        },
        states: {
          validity: {
            initial: 'hidden',
            states: {
              hidden: {
                on: {
                  SUBMIT: 'evaluating',
                },
              },
              evaluating: {
                on: {
                  '': [
                    {
                      cond: 'hasInvalidFields',
                      target: 'invalid',
                    },
                    {
                      target: 'valid',
                    },
                  ],
                },
              },
              invalid: {
                entry: 'focusOnErrors',
                on: {
                  SUBMIT: 'evaluating',
                },
              },
              valid: {
                on: {
                  SUBMIT: 'evaluating',
                },
              },
            },
          },
          apiClient: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  SUBMIT: [
                    {
                      cond: 'hasInvalidFields',
                      target: 'idle',
                    },
                    {
                      target: 'sending',
                    },
                  ],
                },
              },
              sending: {
                invoke: {
                  id: 'sendForm',
                  src: 'sendForm',
                  onError: {
                    actions: 'setApiError',
                    target: 'rejected',
                  },
                  onDone: {
                    target: 'resolved',
                  },
                },
              },
              resolved: {},
              rejected: {},
            },
          },
        },
      },
      complete: {
        entry: 'onComplete',
        type: 'final',
      },
    },
  },
  {
    guards: {
      hasInvalidFields: (ctx) => true,
    },
    actions: {
      focusOnErrors: () => {
        console.log('Call .focus() on list of validation errors');
      },
      setApiError: assign({
        apiError: (ctx, event) => event.data.message,
      }),
      onComplete: (ctx) => {
        if (ctx.shouldRememberMe === true) {
          console.log('Set RememberMe Cookie to', ctx.email);
        } else {
          console.log('Ensure RememberMe Cookie is not set');
        }
      },
      setValue: assign((ctx, { name, value }) =>
        name in ctx
          ? {
              ...ctx,
              [name]: value,
              [`${name}Error`]: '',
            }
          : ctx
      ),
    },
    services: {
      sendForm: apiThatOnlyWorksFor30SecondsEachMinute,
    },
  }
);

function apiThatOnlyWorksFor30SecondsEachMinute() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      new Date().getSeconds() < 30 ? resolve() : reject(new Error('500 Error'));
    }, 2000);
  });
}

// { "type": "SET_EMAIL", "email": "a@a.com" }
// { "type": "SET_REMEMBER_ME", "shouldRememberMe": true }