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',
        CREATE_TASK: 'creatingTask',
        
        // Task actor events
        DELETE_TASK: 'pendingDeleteTask',
        RENAME_TASK: {
          target: 'idle',
          actions: 'spawnRenameTaskActor'
        },
        MOVE_TASK: {
          target: 'idle',
          actions: 'spawnMoveTaskActor'
        },
      }
    },
    pendingDeleteTask: {
      on: {
        CANCEL: 'idle',
        CONFIRM: {
          target: 'idle',
          actions: 'spawnDeleteTaskActor'
        }
      }
    },
    creatingTask: {
      initial: 'creating',
      onDone: 'idle',
      states: {
        creating: {
          invoke: {
            src: 'createTask',
            onDone: {
              target: 'done',
              actions: ['setColumns', 'spawnTaskActor']
            },
            onError: {
              target: 'done',
              actions: 'flashError'
            }
          }
        },
        done: { type: 'final' }
      }
    },
    changingColumnName: {
      initial: 'saving',
      onDone: 'idle',
      states: {
        saving: {
          invoke: {
            src: 'changeColumnName',
            onDone: {
              target: 'done',
              actions: 'setColumns'
            },
            onError: {
              target: 'done',
              actions: 'flashError'
            }
          }
        },
        done: { type: 'final' }
      }
    },
    creatingColumn: {
      initial: 'saving',
      onDone: 'idle',
      states: {
        saving: {
          invoke: {
            src: 'createColumn',
            onDone: {
              target: 'done',
              actions: 'setColumns'
            },
            onError: {
              target: 'done',
              actions: 'flashError'
            }
          }
        },
        done: { type: 'final' }
      }
    },
    deletingColumn: {
      initial: 'awaiting',
      onDone: 'idle',
      states: {
        awaiting: {
          on: {
            CLOSE_DELETE_COLUMN: 'done',
            CONFIRM_DELETE_COLUMN: 'saving'
          }
        },
        saving: {
          invoke: {
            src: 'deleteColumn',
            onDone: {
              target: 'done',
              actions: 'setColumns'
            },
            onError: {
              target: 'done',
              actions: 'flashError'
            }
          }
        },
        done: { type: 'final' }
      }
    },
    movingColumn: {
      initial: 'saving',
      onDone: 'idle',
      states: {
        saving: {
          invoke: {
            src: 'moveColumn',
            onDone: {
              target: 'done',
              actions: 'setColumns'
            },
            onError: {
              target: 'done',
              actions: 'flashError'
            }
          }
        },
        done: { type: 'final' }
      }
    },
    settingColumnLimit: {
      initial: 'awaiting',
      onDone: 'idle',
      states: {
        awaiting: {
          on: {
            CLOSE_COLUMN_LIMIT: 'done',
            SUBMIT_COLUMN_LIMIT: {
              target: 'saving',
              cond: 'isValidColumnLimit'
            }
          }
        },
        saving: {
          invoke: {
            src: 'setColumnLimit',
            onDone: {
              target: 'done',
              actions: 'setColumns'
            },
            onError: {
              target: 'done',
              actions: 'flashError'
            }
          }
        },
        done: { type: 'final' }
      }
    }
  }
});