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 codeRegex = /^[0-9]{6}$/;

const initialContext = {
    code:""
}

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

const verificationCode = Machine({
  id: 'verificationCodeForm',
  context: initialContext,
  initial: 'idle',
  states: {
    idle: {
      initial:'noErrors',
      on:{
        "SEND":[
          {
            target:".invalidCode",
            cond:(_,e)=> !codeRegex.test(e.code)
          },
          {
            target:"loading",
            actions:assign({
                code: (_, e) => e.code,
               
              })
          }
        ],
        "SEND_CODE_AGAIN":{target:".noErrors"}
      },
      states:{
        noErrors:{},
        invalidCode:{},
      }
    },
    loading:{
      invoke:{
        id:"sendCode",
        src: () => mockFetch(),
        onDone:{
          target:"success"
        },
        onError:{
          target:"failure"
        }
      }
    },
    success: {type: 'final' },
    failure: {
      on:{
        "RETRY":{
          target:"loading"
        }
      }
    },
    
  }
});