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 phoneRegex = /^[0-9]{7,9}$/;
const countryCodeRegex = /^\+[0-9]{2,3}$/;

const initialContext = {
   countryCode:"",
    phoneNumber:""
}

function mockFetch() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.8) resolve("got jwt");
      else reject("oopsy doopsy");
    }, 1500);
  });
}

const phoneNumber = Machine({
  id: 'phoneForm',
  context: initialContext,
  initial: 'idle',
  states: {
    idle: {
      initial:'noErrors',
      on:{
        "SEND":[
          {
            target:".invalidCountryCode",
            cond:(_,e)=> !countryCodeRegex.test(e.countryCode)
          },
          {
            target: ".invalidPhoneNumber",
            cond: (_, e) => !phoneRegex.test(e.phoneNumber)
          },
          {
            target:"loading",
            actions:assign({
                countryCode: (_, e) => e.countryCode,
                phoneNumber: (_, e) => e.phoneNumber
              })
          }
        ]
      },
      states:{
        noErrors:{},
        invalidCountryCode:{},
        invalidPhoneNumber:{},
      }
    },
    loading:{
      invoke:{
        id:"sendPhoneNumber",
        src: () => mockFetch(),
        onDone:{
          target:"success"
        },
        onError:{
          target:"failure"
        }
      }
    },
    success: {type: 'final' },
    failure: {
      on:{
        "RETRY":{
          target:"loading"
        }
      }
    },
    
  }
});