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

machine.js

// npm i -S 'array-move'
// import arrayMove from 'array-move';


const MIN_NUM_SURVEYS = 1;
const MAX_NUM_SURVEYS = 4;

const canAdd = context => context.surveys.length < MAX_NUM_SURVEYS;
const canClone = context => context.surveys.length < MAX_NUM_SURVEYS;
const canDelete = context => context.surveys.length > MIN_NUM_SURVEYS;
const canMoveLeft = (context, event) => context.surveys.length > 1 && event.survey !== undefined;
const canMoveRight = (context, event) => context.surveys.length > 1 && event.survey !== undefined;

const canDeleteGuard = (context, event) =>
  context.surveys.length > 0 && event.survey !== undefined && context.surveys.length > MIN_NUM_SURVEYS;
const canCloneGuard = (context, event) =>
  context.surveys.length > 0 && event.survey !== undefined && context.surveys.length < MAX_NUM_SURVEYS;

const surveysMachine = Machine(
  {
    id: 'surveys',
    type: 'parallel',
    context: {
      surveys: [],
      canAdd: true,
      canClone: false,
      canDelete: false,
      selected: undefined,
    },
    states: {
      selected: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              SELECT_SURVEY: {
                target: 'idle',
                actions: assign({
                  selected: (context, event) => {
                    return event.survey;
                  },
                }),
              },
              DELETE_SURVEY: {
                target: 'idle',
                actions: assign({
                  selected: (context, event) => {
                    if (event.survey === context.selected) {
                      const selectedIndex = context.surveys.indexOf(event.survey);
                      return selectedIndex === -1 ? context.surveys[0] : context.surveys[selectedIndex - 1];
                    }
                    return context.selected;
                  },
                }),
              },
              CLONE_SURVEY: {
                target: 'idle',
                actions: assign({
                  selected: context => context.selected,
                }),
              },
            },
          },
        },
      },
      items: {
        initial: 'idle',
        states: {
          error: {
            entry: (a, b, c) => {
              console.log('error->entry');
              console.log('a', a);
              console.log('b', b);
              console.log('c', c);
              console.log('');
            },
          },
          adding: {
            entry: assign({
              surveys: (context, event) => {
                const { name = 'Default Name', title, firstName, lastName } = event;
                return context.surveys.concat({ name, title, firstName, lastName });
              },
            }),
            on: {
              '': { target: 'idle' },
            },
          },
          deleting: {
            entry: assign({
              surveys: (context, { survey }) => {
                const selectedIndex = context.surveys.indexOf(survey);
                context.surveys.splice(selectedIndex, 1);
                return context.surveys;
              },
            }),
            on: {
              '': { target: 'idle' },
            },
          },
          cloning: {
            entry: assign({
              surveys: (context, { survey }) => {
                // might need to use deepClone here
                const selectedIndex = context.surveys.indexOf(survey);
                context.surveys.splice(selectedIndex, 0, { ...survey });
                return context.surveys;
              },
            }),
            on: {
              '': { target: 'idle' },
            },
          },
          movingLeft: {
            entry: assign({
              surveys: (context, { survey }) => {
                const selectedIndex = context.surveys.indexOf(survey);
                return arrayMove(context.surveys, selectedIndex, selectedIndex - 1);
              },
            }),
            on: {
              '': { target: 'idle' },
            },
          },
          movingRight: {
            entry: assign({
              surveys: (context, { survey }) => {
                const selectedIndex = context.surveys.indexOf(survey);
                return arrayMove(context.surveys, selectedIndex, selectedIndex + 1);
              },
            }),
            on: {
              '': { target: 'idle' },
            },
          },
          idle: {
            entry: ['canAdd', 'canClone', 'canDelete'],
            on: {
              ADD_SURVEY: [
                {
                  target: 'error',
                  cond: (context, event) => event.name === undefined,
                },
                { target: 'adding', cond: 'canAdd' },
              ],
              DELETE_SURVEY: [
                {
                  target: 'error',
                  cond: (context, event) => event.survey === undefined,
                },
                { target: 'deleting', cond: 'canDeleteGuard' },
              ],
              CLONE_SURVEY: [
                {
                  target: 'error',
                  cond: (context, event) => event.survey === undefined,
                },
                { target: 'cloning', cond: 'canCloneGuard' },
              ],
              MOVE_LEFT: [
                {
                  target: 'error',
                  cond: (context, event) => event.survey === undefined,
                },
                { target: 'movingLeft', cond: 'canMoveLeft' },
              ],
              MOVE_RIGHT: [
                {
                  target: 'error',
                  cond: (context, event) => event.survey === undefined,
                },
                { target: 'movingRight', cond: 'canMoveRight' },
              ],
            },
          },
        },
      },
    },
  },
  {
    actions: {
      canAdd: assign({ canAdd }),
      canClone: assign({ canClone }),
      canDelete: assign({ canDelete }),
    },
    guards: {
      canAdd,
      canCloneGuard,
      canDelete,
      canDeleteGuard,
      canMoveLeft,
      canMoveRight,
    },
  }
);