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

machine.js

const jobsMachineConfig = Machine({
  id: "jobsAdmin",
  initial: "loading",
  context: {
    jobs: [],
    jobCategory: "All",
    jobPolling: true,
    selectedJob: undefined,
    error: undefined,
  },
  states: {
    loading: {
      invoke: {
        src: "requestFetchJobs",
        onDone: [
          {
            target: "ready",
            actions: ["cacheJobs"],
          },
        ],
        onError: {
          target: "error.loading",
        },
      },
      meta: {
        message: "loading...",
      },
    },
    error: {
      states: {
        loading: {
          on: {
            RELOAD: {
              target: "#jobsAdmin.loading",
            },
          },
          meta: {
            message: "There was an error loading the list of jobs",
          },
        },
        job: {
          meta: {
            message: "There was an error modifying this job",
          },
        },
        refreshing: {
          on: {
            RECYCLE: {
              target: "#jobsAdmin.refreshing",
            },
          },
          meta: {
            message: "there was an error refreshing the page",
          },
        },
        bulk: {
          meta: {
            message: "There was an error performing this bulk task",
          },
        },
      },
      meta: {
        alert: "Uh oh.",
      },
    },
    ready: {
      on: {
        OPEN_MODAL: "jobModal",
        BULK_SELECTED: {
          target: "bulk.bulk_ready",
        },
        TAB_SELECTED: {
          target: "",
          actions: ["setTab"],
        },
        TOGGLE_POLLING: {
          target: "",
          actions: ["setPolling"],
        },
      },
    },
    jobModal: {
      entry: ["setSelectedJobIndex"],
      on: {
        CLOSE_MODAL: "ready",
      },
    },
    bulk: {
      initial: "bulk_ready",
      states: {
        bulk_ready: {
          on: {
            PROCESS_BULK: {
              target: "processing_bulk",
            },
            CLOSE_BULK: {
              target: "bulk_closing",
            },
          },
        },
        processing_bulk: {
          on: {
            PROCESS_COMPLETE: {
              target: "bulk_ready",
            },
            PROCESS_ERROR: {
              target: "#jobsAdmin.error.bulk",
            },
          },
        },
        bulk_closing: {
          on: {
            BULK_MENU_CLOSED: {
              target: "#jobsAdmin.refreshing",
            },
          },
        },
      },
    },
    refreshing: {
      on: {
        REFRESH_COMPLETE: {
          target: "ready",
        },
        REFRESH_ERROR: {
          target: "error.refreshing",
        },
      },
    },
  },
  actions: {
    cacheJobs: assign((context, event) => ({
      jobs: event.data,
    })),
    setTab: assign((context, event) => ({
      jobCategory: event.value,
    })),
    setPolling: assign((context, event) => ({
      jobPolling: !context.jobPolling,
    })),
    setSelectedJobIndex: (context, event) => {
      console.log("here you go: ", context, event);
    },
  },
});