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

machine.js

const jobsMachineConfig = Machine({
  id: "jobsAdmin",
  initial: "loading",
  context: {
    jobs: undefined,
    selectedJob: undefined,
    error: undefined,
  },
  states: {
    loading: {
      invoke: {
        id: "fetchJobs",
        src: "requestFetchJobs",
        onDone: {
          target: "ready",
          actions: assign({ jobs: (context, event) => event.data }),
        },
        onError: {
          target: "error.loading",
          actions: assign({ error: (context, event) => event.data }),
        },
      },
      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: {
        JOB_SELECTED: {
          target: "job",
        },
        BULK_SELECTED: {
          target: "bulk.bulk_ready",
        },
      },
    },
    job: {
      initial: "opening_job",
      states: {
        opening_job: {
          on: {
            always: "edit_job",
          },
          meta: {
            message: "opening menu for job admin",
          },
        },
        edit_job: {
          on: {
            SUBMIT_EDITS: {
              target: "processing_job",
            },
            CLOSE_JOB: {
              target: "close_job",
            },
          },
        },
        close_job: {
          on: {
            JOB_CLOSED: {
              target: "#jobsAdmin.refreshing",
            },
          },
        },
        processing_job: {
          on: {
            PROCESS_COMPLETE: {
              target: "edit_job",
            },
            PROCESS_ERROR: {
              target: "#jobsAdmin.error.job",
            },
          },
        },
      },
    },
    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",
        },
      },
    },
  },
});