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

machine.js

let approvalsMachine = Machine(
  {
    id: "approvals",
    context: {
      dateStart: "",
      dateEnd: "",
      page: 0,
      results: [],
      items: {},
      error: null
    },
    type: "parallel",
    states: {
      loadApprovals: {
        initial: "idle",
        states: {
          idle: {
            initial: "nonMdm",
            states: {
              nonMdm: {
                on: {
                  TOGGLE_MDM: "mdm"
                }
              },
              mdm: {
                on: {
                  TOGGLE_MDM: "nonMdm"
                }
              }
            },
            on: {
              PREV_PAGE: "prevPage",
              NEXT_PAGE: "nextPage"
            }
          },
          prevPage: {
            initial: "loading",
            states: {
              loading: {
                entry: "decrementPage",
                invoke: {
                  src: "getResults",
                  onDone: "success",
                  onError: "failure"
                }
              },
              success: {
                entry: "setResults",
                type: "final"
              },
              failure: {
                entry: ["incrementPage", "setError"],
                exit: "resetError",
                on: {
                  RETRY: "loading",
                  CANCEL: "canceled"
                }
              },
              canceled: {
                type: "done"
              }
            },
            onDone: "idle"
          },
          nextPage: {
            initial: "loading",
            states: {
              loading: {
                entry: "incrementPage",
                invoke: {
                  src: "getResults",
                  onDone: "success",
                  onError: "failure"
                }
              },
              success: {
                entry: "setResults",
                type: "final"
              },
              failure: {
                entry: ["incrementPage", "setError"],
                exit: "resetError",
                on: {
                  RETRY: "loading",
                  CANCEL: "canceled"
                }
              },
              canceled: {
                type: "done"
              }
            },
            onDone: "idle"
          }
        }
      },
      submitApprovals: {
        initial: "some",
        states: {
          some: {
            initial: "idle",
            states: {
              idle: {
                on: {
                  SELECT_ITEM: {
                    actions: "selectItem"
                  },
                  SUBMIT: "loading"
                }
              },
              loading: {
                invoke: {
                  src: "sendApprovals",
                  onDone: "success",
                  onError: "failure"
                }
              },
              success: {
                on: {
                  DONE: "idle"
                }
              },
              failure: {
                entry: "setError",
                exit: "resetError",
                on: {
                  RETRY: "loading",
                  CANCEL: "idle"
                }
              }
            },
            on: {
              TOGGLE_ALL: "all"
            }
          },
          all: {
            initial: "idle",
            states: {
              idle: {
                on: {
                  SUBMIT: "loading"
                }
              },
              loading: {
                invoke: {
                  src: "approveAll",
                  onDone: "success",
                  onError: "failure"
                }
              },
              success: {
                on: {
                  DONE: "idle"
                }
              },
              failure: {
                entry: "setError",
                exit: "resetError",
                on: {
                  RETRY: "loading",
                  CANCEL: "idle"
                }
              }
            },
            on: {
              TOGGLE_ALL: "some"
            }
          }
        }
      }
    }
  }
);