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 fetchMachine = {
    initial: 'idle',
    context: {
      retries: 0
    },
    onDone: {
      actions: sendParent(ctx => ({
        type: 'COMPLETE',
        deleted: {
          id: 1
        }
      }))
    },
    states: {
      idle: {
        on: {
          FETCH: 'loading'
        }
      },
      loading: {
        after: {
          100: 'success'
        }
      },
      success: {
        type: 'final'
      },
      failure: {
        on: {
          RETRY: {
            target: 'loading',
            actions: assign({
              retries: (context, event) => context.retries + 1
            })
          }
        }
      }
    }
  };
  
  const createFetchMachine = (id, { selectedMfaOption }) =>
    Machine({ id, ...fetchMachine })
      .withContext({selectedMfaOption})
  
  const manageMachine = Machine({
    id: 'manage',
    initial: 'profile',
    context: {
      mfaOptions: [{
        id: 1
      }, {
        id: 2
      }, {
        id: 3
      }],
      selectedMfaOption: {id: 1},
      frequency: null,
      deleteMachine: null,
      addMachine: null,
      frequencyMachine: null
    },
    states: {
      profile: {
        after: {
          1000: 'list'
        }
      },
      list: {
        id: 'list',
        on: {
          DELETE_MFA: {
            target: 'delete',
            actions: 'selectMfa'
          },
          SELECT_MFA: {
            actions: 'selectMfa'
          }
        }
      },
      delete: {
        initial: 'idle',
        entry: assign({ 
          deleteMachine: (ctx) => 
            spawn(createFetchMachine('delete', ctx), 'deleteMachine')
        }),
        states: {
          idle: {
            on: {
              PREV: '#list',
              FETCH: {
                actions: send('FETCH', {
                  to: 'deleteMachine'
                })
              },
              COMPLETE: {
                actions: 'deleteMfa'
              }
            }
          }
        }
      }
    }
  }, {
    actions: {
      deleteMfa: assign({
        mfaOptions: (ctx, evt) => ctx.mfaOptions.filter(opt => opt.id !== evt.deleted.id)
      }),
      selectMfa: assign({
        selectedMfaOption: { id: 1 }
      })
    }
  });