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 timerMachine = Machine({
  id: 'timer',
  initial: 'ready', // should be entry  
  context: {
    accumulatedTime: 0,
    start: null
  },
  states: {
    running: {
      on: {
        STOP: { 
          target: 'stopped',
          actions: [
            assign({
              accumulatedTime: (ctx) => 
                ctx.accumulatedTime + (new Date() - ctx.start),         
            })
          ]
        },
      }
    },
    stopped: {
      on: {
        START: {
          target: 'running', 
          actions: assign({
            start: () => new Date(),
          })
        },
        RESET: {
          target: 'saveTime',
        }
      }
    },
    saveTime: {
      invoke: {
        id: 'save',
        src: 'saveTimeAsync',
        onDone: {
          target: 'ready',
        },
        onError: {
          target: 'stopped'
        }
      }
    },
    ready: {
      on: {
        START: {
          target: 'running',
          actions: [
            assign(ctx => ({
              accumulatedTime: 0,
              start: new Date(),
            }))
          ] 
        }
      }
    }
  },
}, {
  services: {
    // simulate asyncStorage effect
    saveTimeAsync: ctx => new Promise(res => {
      setTimeout(() => {
        const time = Math.round(ctx.accumulatedTime / 10000 / 60) * 10 ;
        console.log(`Your end time was ${time} minutes`);
        res();
      }, 1000)
    })
  }
});