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

machine.js

/*
  We now have a fully baked delete example where we update context
*/
const service = {
  addMfa: (mfaOpt) => Promise.resolve(mfaOpt),
  deleteMfa: (mfaOpt) => Promise.resolve(mfaOpt.id)
}

const notificationMachine = Machine({
  id: 'notification',
  initial: 'idle',
  context: {
    message: ''
  },
  states: {
    idle: {
      on: {
        NOTIFY: {
          target: 'visible',
          actions: assign({
            message: (_, e) => e.data
          })
        }
      }
    },
    visible: {
      entry: 'addNotification',
      after: {
        1000: 'idle'
      }
    }
  }
}, {
  actions: {
    addNotification: (ctx) => {
      console.log(ctx.message)
    }
  }
})
  
const manageMachine = Machine({
  id: 'manage',
  initial: 'profile',
  entry: assign({
    notificationMachine: () => spawn(notificationMachine)
  }),
  context: {
    mfaOptions: [{
      id: 1
    }, {
      id: 2
    }, {
      id: 3
    }],
    selectedMfaOption: {id: 1},
    frequency: null,
    deleteMachine: null,
    addMachine: null,
    frequencyMachine: null,
    notificationMachine: null
  },
  states: {
    profile: {
      after: {
        750: 'list'
      }
    },
    list: {
      id: 'list',
      on: {
        DELETE_MFA: {
          target: 'delete',
          actions: 'selectMfa'
        },
        SELECT_MFA: {
          actions: 'selectMfa'
        },
        ADD_EMAIL: 'add.email',
        ADD_PHONE: 'add.phone'
      }
    },
    add: {
      states: {
        email: {
          initial: 'idle',
          on: {
            PREV: '#list',
            NEXT: '.adding'
          },
          states: {
            error: {},
            idle: {},
            adding: {
              // entry: ['setEmail', 'selectMfa'],
              invoke: {
                id: 'addMfa',
                src: 'addMfa',
                onDone: {
                  target: '#list',
                  actions: ['sendNotification', 'addMfaToCtx']
                },
                onError: 'error'
              }
              
            }
          }
        },
        phone: {}
      }
    },
    code: {
      id: 'code',
      type: 'final'
    },
    delete: {
      initial: 'idle',
      states: {
        error: {},
        idle: {
          on: {
            PREV: '#list',
            NEXT: 'deleting'
          }
        },
        deleting: {
          invoke: {
            id: 'deleteMfa',
            src: 'deleteMfa',
            onDone: {
              target: '#list',
              actions: ['sendNotification', 'deleteMfaFromCtx']
            },
            onError: 'error'
          }
        }
      }
    }
  }
}, {
  actions: {
    addMfaToCtx: assign({
      mfaOptions: (ctx, evt) =>
        [...ctx.mfaOptions, evt.data]
    }),
    deleteMfaFromCtx: assign({
      mfaOptions: (ctx, evt) => ctx.mfaOptions.filter(opt => opt.id !== evt.data)
    }),
    selectMfa: assign({
      selectedMfaOption: (_, evt) => ({ id: evt.data || 1 })
    }),
    sendNotification: send((ctx, evt) => ({
      type: 'NOTIFY',
      data: `Successfully deleted mfa Option with id ${ctx.selectedMfaOption.id}`
    }), {
      to: ctx => ctx.notificationMachine
    })
  },
  services: {
    addMfa: (ctx) => 
      service.addMfa({ id: ctx.mfaOptions.length + 1 }),
    deleteMfa: (ctx, evt) => service.deleteMfa(ctx.selectedMfaOption)
  }
});