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

machine.js

const timelineMachine = Machine(
  {
    id: "timeline",
    initial: "idle",
    context: {},
    on: {
      "UPDATE_SPACES": {
        actions: "assignSpaces"
      },
      "ADMINISTER": "admin"
    },
    states: {
      admin: {
        initial: "idle",
        states: {
          autoAdd: {
            on: {
              "": "adding"
            }
          },
          idle: {
            on: {
              "ADD": "adding",
              "REMOVE": "removing",
              "UPDATE": "updating",
              "COMPLETE": {
                // actions: "refetchData",
                target: "#timeline.idle"
              }
            },
          },
          adding: {
            initial: "editing",
            exit: assign({addAfterSubmitFlag: false}),
            states: {
              editing: {
                on: {
                  "SUBMIT": "submitted",
                  "ADD": {
                    actions: assign({
                      addAfterSubmitFlag: true
                    }),
                  }
                },
              },
              submitted: {
                invoke: {
                  id: "createSpace",
                  src: "createSpace",
                  onDone: [{
                    cond: (context, event) => context.addAfterSubmitFlag,
                    target: "#timeline.admin.autoAdd"
                    },{
                      target: "#timeline.admin.idle"
                      
                    }],
                  onError: {
                    target: "#timeline.admin.idle",
                    actions: "handleAdminError"
                  }
                }
              }
            }
          },
          removing: {
            invoke: {
              id: "removeSpace",
              src: "removeSpace",
              onDone: "idle",
              onError: {
                target: "idle",
                actions: "handleAdminError"
              }
            }
          },
          updating: {
            initial: "editing",
            exit: assign({addAfterSubmitFlag: false}),
            states: {
              editing: {
                on: {
                  "SUBMIT": "submitted",
                  "ADD": {
                    actions: assign({
                      addAfterSubmitFlag: true
                    }),
                  }
                }
              },
              submitted: {
                invoke: {
                  id: "updateSpace",
                  src: "updateSpace",
                  onDone: [{
                    cond: (context, event) => context.addAfterSubmitFlag,
                    target: "#timeline.admin.autoAdd"
                    },{
                      target: "#timeline.admin.idle"
                      
                    }],
                  onError: {
                    target: "#timeline.admin.idle",
                    actions: [
                      "handleAdminError",
                      //  "refetchData"
                    ]
                  }
                }
              }
            }
          },
        }
      },
      draft: {
        initial: "editing",
        states: {
          editing: {
            on: {
              "MOUSE_DOWN.ROW": "#timeline.outlining",
              "MOUSE_DOWN.RESERVATION": "#timeline.moving",
              "MOUSE_DOWN.EDGE": "#timeline.extending",
              CANCEL: {
                actions: "resetSelectedReservation",
                target: "#timeline.idle",
              },
              SUBMIT: "#timeline.draft.submitted",
            },
          },
          submitted: {
            on: { "ADMINISTER": undefined },
            invoke: {
              id: "createReservation",
              onDone: "#timeline.idle",
              onError: "editing",
              src: "createReservation",
            },
          },
        },
      },
      extending: {
        entry: "assignSelectedReservation",
        on: {
          MOUSE_MOVE: {
            actions: "updateSelectedReservation",
            cond: "isTimeRangeAvailable",
          },
          MOUSE_UP: {
            actions: "persistSelectedReservation",
            target: "idle",
          },
        },
      },
      idle: {
        on: {
          "MOUSE_DOWN.ROW": "outlining",
          "MOUSE_DOWN.RESERVATION": "moving",
          "MOUSE_DOWN.EDGE": "extending",
        },
      },
      moving: {
        initial: "waiting",
        entry: "assignSelectedReservation",
        on: {
          MOUSE_MOVE: {
            actions: "updateSelectedReservationOffset",
            cond: "isTimeRangeAvailable",
          },
          MOUSE_UP: [
            {
              actions: "persistSelectedReservation",
              cond: "isTimeRangeAvailable",
              target: "#timeline.idle",
            },
            {
              target: "#timeline.idle",
            },
          ],
        },
        states: {
          waiting: {
            on: {
              "MOUSE_UP": {
                target: "#timeline.selected"
              }
            },
            after: {
              300: "active"
            }
          },
          active: {}
        }

      },
      outlining: {
        entry: "startSelectedReservation",
        on: {
          MOUSE_MOVE: {
            actions: "assignSelectedReservationRangeEnd",
            cond: "isTimeRangeEndAvailable",
          },
          MOUSE_UP: {
            target: "draft",
          },
        },
      },
      selected: {
        initial: "loading",
        on: {
          "MOUSE_DOWN.ROW": "outlining",
          "MOUSE_DOWN.RESERVATION": "moving",
          "MOUSE_DOWN.EDGE": "extending",
        },
        states: {
          editing: {
            on: {
              CANCEL: {
                actions: "resetSelectedReservation",
                target: "#timeline.idle",
              },
              SUBMIT: "#timeline.selected.submitted"
            },
          },
          loading: {
            invoke: {
              id: "loadReservation",
              onDone: {
                target: "editing",
                actions: "assignSelectedReservationResponse"
              },
              onError: {
                actions: "handleLoadingError",
                target: "#timeline.idle",
              },
              src: "loadReservation",
            },
          },
          submitted: {
            on: {
              "ADMINISTER": undefined,
              "MOUSE_DOWN.ROW": undefined,
              "MOUSE_DOWN.RESERVATION": undefined,
              "MOUSE_DOWN.EDGE": undefined,
            },
            invoke: {
              id: "updateReservation",
              onDone: "#timeline.idle",
              onError: "editing",
              src: "updateReservation",
            },
          },
        },
      },
    },
  }
)