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

machine.js

const boardMachine = Machine({
  initial: 'idle',
  states: {
    idle: {
      on: {
        CHANGE_COLUMN_NAME: 'changingColumnName',
        CREATE_COLUMN: 'creatingColumn',
        DELETE_COLUMN: 'deletingColumn',
        MOVE_COLUMN: 'movingColumn',
        SET_COLUMN_LIMIT: 'settingColumnLimit',
      }
    },
    changingColumnName: {
      initial: 'saving',
      onDone: 'idle',
      states: {
        saving: {
          invoke: {
            src: 'changeColumnName',
            onDone: {
              target: 'success',
              actions: 'setColumns'
            },
            onError: {
              target: 'failure',
              actions: 'flashError'
            }
          }
        },
        success: { type: 'final' },
        failure: { type: 'final' }
      }
    },
    creatingColumn: {
      initial: 'saving',
      onDone: 'idle',
      states: {
        saving: {
          invoke: {
            src: 'createColumn',
            onDone: {
              target: 'success',
              actions: 'setColumns'
            },
            onError: {
              target: 'failure',
              actions: 'flashError'
            }
          }
        },
        success: { type: 'final' },
        failure: { type: 'final' }
      }
    },
    deletingColumn: {
      initial: 'saving',
      onDone: 'idle',
      states: {
        saving: {
          invoke: {
            src: 'deleteColumn',
            onDone: {
              target: 'success',
              actions: 'setColumns'
            },
            onError: {
              target: 'failure',
              actions: 'flashError'
            }
          }
        },
        success: { type: 'final' },
        failure: { type: 'final' }
      }
    },
    movingColumn: {
      initial: 'saving',
      onDone: 'idle',
      states: {
        saving: {
          invoke: {
            src: 'moveColumn',
            onDone: {
              target: 'success',
              actions: 'setColumns'
            },
            onError: {
              target: 'failure',
              actions: 'flashError'
            }
          }
        },
        success: { type: 'final' },
        failure: { type: 'final' }
      }
    },
    settingColumnLimit: {
      initial: 'saving',
      onDone: 'idle',
      states: {
        saving: {
          invoke: {
            src: 'setColumnLimit',
            onDone: {
              target: 'success',
              actions: 'setColumns'
            },
            onError: {
              target: 'failure',
              actions: 'flashError'
            }
          }
        },
        success: { type: 'final' },
        failure: { type: 'final' }
      }
    }
  }
})