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

machine.js

Machine({
  id: 'Create Campaign Workflow',
  initial: 'processing',
  context: {
    // Change this to pikachu or charizard
    campaignId: 'ditto',
    processingStatus: 'idle',
  },
  states: {
    processing: {
      invoke: {
        id: 'fetchCampaign',
        src: apiService,
      },
      on: {
        SUCCESS: 'completed',
        MALFORMED_CSV: 'malformedCSV',
        TRACK_ERRORS: 'trackValidation'
      },
      initial: 'polling',
      states: {
        polling: {
          after: {
            INTERVAL: {
              actions: send('POLL', { to: 'fetchCampaign' })
            }
          }
        }
      }
    },
    error: {
      type: 'final'
    },
    trackValidation: {
      on: {
        PROCEED_WITH_VALID_TRACKS: {
          target: 'processing',
          actions: assign({
            campaignId: 'pikachu'
          })
        },
        PROCEED_WITH_NEW_CSV: {
          target: 'processing',
          action: assign({
            campaignId: 'new-csv',
          })
        }
      }
    },
    malformedCSV: {
      on: {
        SUBMIT_WITH_NEW_CSV: {
          target: 'processing',
          cond: () => true,
        }
      }
    },
    completed: {
      type: 'final'
    },
    completedWithValidTracks: {
      type: 'final'
    }
  }
}, {
  delays: { INTERVAL: 1000 }
})

function apiService(context) {
  return (callback, onReceive) => {
    function poll() {
      if (context.campaignId === 'new-csv') {
        return callback({
          type: 'SUCCESS'
        })
      }
      
      return fetch(`https://pokeapi.co/api/v2/pokemon/${context.campaignId}/`)
      .then(r => r.json())
      .then(pokemans => {
        if (pokemans.name === 'pikachu') { 
          callback({
            type: 'SUCCESS',
          })
        }
        if (pokemans.name === 'charizard') { 
          callback({
            type: 'MALFORMED_CSV',
          })
        }
        if (pokemans.name === 'ditto') { 
          callback({
            type: 'TRACK_ERRORS',
          })
        }
      })
      .catch(console.error)
    }
    
    poll()
    
    onReceive(event => {
      if (event === 'POLL') {
        poll()
      }
    })
  }
}