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

machine.js

const windowMachine = Machine({
  initial: "loading",
  context: {
    title: "GI 3:16",
    type: "BIBLE"
  },
  states: {
    idle: {
      on: {
        FETCH: "loading",
        SHOW: "show",
        CLOSE: "close"
      }
    },
    loading: {
      after: {
        3000: 'failure.timeout'
      },
      on: {
        RESOLVE: 'success',
        REJECT: 'failure',
        TIMEOUT: 'failure.timeout'
      },
      meta: {
        message: 'Loading...'
      }
    },
    show: {
      on: {
        OPEN_MODAL: "modal"
      }
    },
    modal: {
      initial: "open",
      states: {
        open: {
          on: {
            CLOSE: "close"
          },
        },
        close: {
          type: "final"
        }
      }
    },
    close: {
      target: "idle"
    },
    success: {
      meta: {
        message: 'The request succeeded!'
      }
    },
    failure: {
      initial: 'rejection',
      states: {
        rejection: {
          meta: {
            message: "The request failed."
          }
        },
        timeout: {
          meta: {
            message: "The request timeout."
          }
        }
      },
      meta: {
        alert: "Uh oh!"
      }
    }
  }
});

const windowsMachine = Machine({
  id: "windows",
  initial: "load",
  context: {
    list: []
  },
  states: {
    load: {
      on: {
        LOAD: 'window'
      }
    },
    window: {
      ...windowMachine  
    },
    close: {}
  }
})