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

machine.js

  const fetchMachine = Machine({
    id: "approvals",
    context: {
      page: 0,
      results: [],
      selectedIds: {},
      error: null
    },
    type: "parallel",
    states: {
      loadApprovals: {
        initial: "idle",
        states: {
          idle: {
            on: {
              SET_PAGE: {
                target: "loading",
                actions: "setPage"
              }
            }
          },
          loading: {
            invoke: {
              src: "getResults",
              onDone: {
                target: "idle",
                actions: "setResults"
              },
              onError: {
                target: "failure",
                actions: "setError"
              }
            }
          },
          failure: {
            exit: "resetError",
            on: {
              RETRY: "loading",
              CANCEL: {
                target: "idle",
                actions: "rollbackPage"
              }
            }
          }
        }
      },
      approveSelected: {
        initial: "idle",
        states: {
          idle: {
            on: {
              SELECT_ITEM: {
                actions: "selectItem"
              },
              APPROVE_SELECTED: "loading"
            }
          },
          loading: {
            invoke: {
              src: "approveSelected",
              onDone: "success",
              onError: {
                target: "failure",
                actions: "setError"
              }
            }
          },
          success: {
            on: {
              DONE: "idle"
            }
          },
          failure: {
            exit: "resetError",
            on: {
              RETRY: "loading",
              CANCEL: "idle"
            }
          }
        }
      }
    }
  });