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

machine.js

const boardMachine = Machine({
  id: 'board',
  initial: 'idle',
  states: {
    idle: {
      on: {
        CHANGE_COLUMN_NAME: 'changingColumnName',
        CREATE_COLUMN: 'creatingColumn',
        DELETE_COLUMN: 'deletingColumn',
        MOVE_COLUMN: 'movingColumn',
        SET_COLUMN_LIMIT: 'settingColumnLimit',
        VIEW_TASK: 'viewingTask'
      }
    },
    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' }
      }
    },
    viewingTask: {
      initial: 'fetching',
      onDone: 'idle',
      states: {
        fetching: {
          invoke: {
            src: 'fetchTask',
            onDone: {
              target: 'success',
              actions: 'setFocusedTask'
            },
            onError: {
              target: 'failed',
              actions: 'flashError'
            }
          }
        },
        failed: {
          on: { RETRY: 'fetching' }
        },
        success: {
          initial: 'viewing',
          states: {
            viewing: {
              on: {
                FETCH_COLUMN_NAMES: 'fetchingColumnNames'
              }
            },
            fetchingColumnNames: {
              invoke: {
                src: 'fetchingColumnNames',
                onDone: {
                  target: 'viewingColumnNames',
                  actions: 'setColumnNames'
                },
                onError: {
                  target: 'viewing',
                  actions: 'flashError'
                }
              }
            },
            viewingColumnNames: {}
          }
        }
      }
    }
  }
});