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

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const fetchMachine = Machine(
  {
    id: "fetch",
    initial: "idle",
    context: {
      retries: 0,
      results: [{ ibmId: "123d-ddi3-lek2-dsjdiw", thing: "blah" }],
      status: "Create approval pending",
      ready: true,
      creating: false
    },
    states: {
      idle: { on: { FETCH: "findConnection" } },
      // find connection in DB that's still pending
      findConnection: {
        on: {
          RESOLVE: "success",
          REJECT: "failure"
        }
      },
      //   loading: {
      //     on: {
      //       RESOLVE: "success",
      //       REJECT: "failure"
      //     }
      //   },
      success: {
        on: {
          "": [
            { target: "connection", cond: "withConnection" },
            { target: "noConnection", cond: "withoutConnection" }
          ],
          CONNECTION_DATA: {
            actions: assign({
              results: [{ ibmId: "123d-ddi3-lek2-dsjdiw", thing: "blah" }]
            })
          }
        }
      },
      failure: {
        // update states?
        on: {
          RETRY: {
            target: "findConnection",
            actions: assign({
              retries: (context, event) => context.retries + 1
            })
          }
        }
      },
      connection: { on: { FETCH: "poll" } },
      noConnection: { on: { RESOLVE: "idle" } },
      poll: {
        on: {
          "": [
            { target: "ready", cond: "provisionedState" },
            { target: "awaitingApproval", cond: "approvalPending" },
            { target: "creatingConnection", cond: "provisionedState" },
            { target: "error", cond: "errorState" }
            // TODO handle awaiting approval from user AND creating states - two polling states
            // TODO set state to ERROR when errors
          ],
          // fix this
          READY_CONNECTION: {
            actions: assign({
              ready: true
            })
          }
        }
      },
      ready: { on: { RESOLVE: "idle" } },
      awaitingApproval: { on: { RETRY: "poll" } },
      creatingConnection: { on: { RETRY: "poll" } },
      error: { on: { REJECT: "failure" } }
    }
  },
  {
    guards: {
      withConnection: (context, event) => {
        return context.results && context.results.length > 0;
      },
      withoutConnection: (context, event) => {
        return context.results && context.results.length <= 0;
      },
      approvalPending: (context, event) => {
        // when we have state 'Create approval pending', we need to keep polling until user approves connection
        // real one might look like:
        return context.status === "Create approval pending";
      },
      //// 'Create in progress' - if this is true we want to poll until connection is in provisioned state
      createInProgress: (context, event) => {
        return context.creating;
      },
      provisionedState: (context, event) => {
        // status should be PROVISIONED
        // return context.status === 'PROVISIONED'
        return context.ready;
      },
      errorState: (context, event) => {
        return true;
      }
      // TODO handle unknown status
    }
  }
);

const fetchService = interpret(fetchMachine)
  .onTransition(state => console.log(state.value))
  .start();

fetchService.send("CONNECTION_DATA");
fetchService.send("READY_CONNECTION");
// fetchService.send("")