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 { cancel } = actions
function fetchUsers() {}
function saveChanges() {}

const fetchMachine = Machine({
  id: 'multi-admin',
  initial: 'fetch-users',
  context: {
    allUsers: [],
    selected: [],
  },
  states: {
    'fetch-users' : {
      invoke: {
        src: () => fetchUsers,
        onError: 'fetch-error',
        onDone: 'selection',
      }
    },
    'fetch-error': {
      on: {
        RETRY: 'fetch-users'
      }
    },
    selection: {
      type: 'parallel',
      states: {
        active: {
          initial: 'selecting',
          states: {
            selecting: {
              on: {
                SELECT: {
                  actions: [
                    assign({
                      selected: context => context.selected,
                    }),
                    cancel('debounce'),
                    send('SAVE', { id: 'debounce', delay: 2000 }),
                  ],
                },
              },
            },
          },
        },
        sync: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                SAVE: 'saving'
              },
            },
            saving: {
              invoke: {
                id: 'saving',
                src: context => saveChanges(),
                onDone: 'idle',
                onError: 'error',
              },
            },
            error: {},
          },
        },
      },
    },
  },
})