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 fetchIt = (ctx, evt) => new Promise(resolve => {
  setTimeout(() => {
    resolve();
  }, 1000);
});

const resetRetries = assign({ retries: () => -1 });

const monitorNetwork = () => {
  const interval = setInterval(() => {
    console.log(`Checking network connectivity`);
    if (Math.random() > 0.55) {
      console.log(`Simulating disconnected`);
      send("NETWORK_DISCONNECTED");
    }
  }, 10000);
  return () => {
    console.log(`Leaving state, stopping network monitoring`);
    clearInterval(interval);
  };
}

const fetchMachine = Machine({
  id: 'fetch',
  initial: 'idle',
  context: {
    retries: 0
  },
  states: {
    idle: {
      invoke: {
        id: 'fetching',
        src: fetchIt,
        onDone: {
          target: 'connected',
        },
      }
    },
    connected: {
      activities: ["monitorNetwork"],
      entry: ["resetRetries", "sendConnected"],
      on: {
        NETWORK_DISCONNECTED: "success"
      },
    },
    success: {
      type: 'final'
    },
  }
}, {
  activities: {
    monitorNetwork,
  },
  actions: {
    resetRetries,
    sendConnected: sendParent("READY")
  },
  services: {
    fetchIt
  }
});