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

machine.js

const updateName = {
  target: "editingName",
  actions: ["assignName"],
}

const loadKeywordFromEvent = {
  target: "loadingKeyword",
  actions: "assignKeywordId",
};

const loadKeywordFromContext = {
  target: "loadingKeyword",
};

const machine = Machine(
  {
    id: "keywordMachine",
    context: {
      name: '',
    },
    initial: "idle",
    states: {
      idle: {
        on: {
          UPDATE_NAME: updateName,
          LOAD_KEYWORD: loadKeywordFromEvent,
        },
      },
      editingName: {
        on: {
          "": [
            {
              target: "idle",
              cond: "nameEmpty",
            },
            {
              target: "keywordExists",
              cond: "keywordExists",
            },
            {
              target: "keywordNotExists",
            },
          ],
        },
      },
      keywordExists: {
        on: {
          UPDATE_NAME: updateName,
          LOAD_KEYWORD: loadKeywordFromEvent,
        },
      },
      keywordNotExists: {
        on: {
          UPDATE_NAME: updateName,
          CREATE: "creatingKeyword",
          LOAD_KEYWORD: loadKeywordFromEvent,
        },
      },
      loadingKeyword: {
        invoke: {
          src: "loadKeyword",
          onDone: {
            target: "keywordLoaded",
            actions: ["assignKeyword"],
          },
          onError: "keywordLoadingFailed",
        },
      },
      keywordLoaded: {
        on: {
          EDIT: "editingKeyword",
          UPDATE_NAME: updateName,
        },
      },
      editingKeyword: {
        on: {
          SUBMIT: "updatingKeyword",
          CANCEL: loadKeywordFromContext,
        },
      },
      updatingKeyword: {
        invoke: {
          src: "updateKeyword",
          onDone: loadKeywordFromContext,
          onError: "editingKeyword",
        },
      },
      keywordLoadingFailed: {
        on: {
          RETRY: loadKeywordFromContext,
        },
      },
      creatingKeyword: {},
    },
  },
  {
    services: {
      loadKeyword: (context) => {
        if (context.keywordId === 100) {
          return Promise.resolve({
            id: 100,
            name: "foo",
          });
        }
        else {
          return Promise.resolve({
            id: 200,
            name: "bar",
          });
        }
      },
      updateKeyword: (_event) => {
        return Promise.resolve({});
      },
    },
    guards: {
      nameValid: (context) => {
        return (typeof context.name === 'string') && context.name.trim().length > 0;
      },
      nameEmpty: (context) => {
        return (typeof context.name !== 'string') || context.name.trim().length === 0;
      },
      keywordExists: (context) => {
        return context.name === "foo";
      },
    },
    actions: {
      assignName: assign((_, event) => {
        return { name: (typeof event.name) == 'string' ? event.name.trim() : '' };
      }),
      assignKeywordId: assign({
        keywordId: (_, event) => event.id,
      }),
      assignKeyword: assign({
        loadedKeyword: (_, event) => event.data,
      }),
    }
  }
);