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

machine.js

// 1

function fetchUsers() {}

const fetchMachine = Machine({
  id: 'multi-admin',
  initial: 'fetch-users',
  context: {
    allUsers: [],
    selected: [],
  },
  states: {
    'fetch-users' : {
      invoke: {
        src: () => fetchUsers,
        onError: 'fetch-error',
        onDone: 'idle',
      }
    },
    'fetch-error': {
      on: {
        RETRY: 'fetch-users'
      }
    },
    idle: {
      id: 'select-machine',
      initial: 'selecting',
      context: {
        selected: [],
      },
      states: {
        selecting: {
          on: {
            CHANGE_FILTER: {
              actions: [
                assign({
                  search: (_, event) => event.value,
                }),
              ],
            },
            SELECT: {
              actions: [
                assign({
                  selected:
                    (context, event) => {
                      return [...context.selected, event.value]
                    },
                }),
              ],
            },
            UNSELECT: {
              actions: [],
            },
            SAVE: {
              target: 'saving',
              // cond: context => context.selected.length > 0,
            },
          },
        },
        saving: {
          invoke: {
            src: () => saveChanges,
            onError: 'error',
            onDone: 'finished',
          },
        },
        error: {
          on: {
            RETRY: 'saving',
          }
        },
        finished: {
          type: 'final',
          data: context => context.selected
        },
      },
      onDone: {
        target: 'finished'
      },
    },
    finished: {
      type: 'final',
    }
  },
})