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

machine.js

async function listBranches(){}
async function createBranch(){}
async function deleteBranch(){}
async function renameBranch(){}
async function publishBranch(){}

const branchesManager = Machine({
  id: "branches-manager",
  initial: "loading",
  context: {
    branches: {},
    rcs: [],
    error: null,
    createBranch: {},
    publishBranch: null,
    renameBranch: {},
    deleteBranch: null,
    copyBranch: null
  },
  states: {
    loading: {
      invoke: {
        id: "getBranches",
        src: (context, event) => listBranches(),
        onDone: {
          target: "loaded",
          actions: assign({
            branches: (context, event) => event.data,
          }),
        },
        onError: {
          target: "error",
          actions: assign({
            error: (context, event) => event.data,
          }),
        },
      },
    },

    loaded: {
      id: "loaded",
      initial: "managerView",
      states: {
        managerView: {
          id: 'managerView',
          on: {
            CREATE_BRANCH: "createBranch",
            PUBLISH_BRANCH: {
                target: 'publishBranch',
                actions: assign({
                    publishBranch: (context, event) => event.data
                })
            },
            DELETE_BRANCH: {
                target: 'deleteBranch',
                actions: assign({
                    deleteBranch: (context, event) => event.data
                })
            },
            COPY_BRANCH: {
                target: 'copyBranch',
                actions: assign({
                    copyBranch: (context, event) => ({sourceBranchId: event.data})
                })
            },
            RENAME_BRANCH: {
                target: 'renameBranch',
                actions: assign({
                    renameBranch: (context, event) => ({
                        branch: event.data
                    })
                })
            }
          },
        },
        createBranch: {
          initial: "idle",
          states: {
            idle: {
              on: {
                COPY_FROM_CHANGED: {
                  actions: assign({
                    createBranch: (context, event) => ({
                      ...context,
                      copyFrom: event.data,
                    }),
                  }),
                },
                VERSION_NAME_CHANGED: {
                  actions: assign({
                    createBranch: (context, event) => ({
                      ...context,
                      versionName: event.data,
                    }),
                  }),
                },
                CREATE_BRANCH_CLICKED: "creatingBranch",
                CANCEL_CREATE_BRANCH_CLICKED: {
                  target: "#managerView",
                  actions: assign({
                    createBranch: () => ({}), //reset
                  }),
                },
              },
            },
            creatingBranch: {
              invoke: {
                id: "creatingBranch",
                src: (context, event) => createBranch({name: context.createBranch.versionName, sourceBranchId: context.createBranch.copyFrom}),
                onDone: {
                  target: "#managerView",
                  actions: assign({
                    branches: (context, event) => [...context.branches, context.data],
                    createBranch: () => ({}), //reset
                  }),
                },
                onError: {
                  actions: actions.log("error creating branch"),
                },
              },
            },
          },
        },
        publishBranch: {
            initial: 'idle',
            states: {
                idle: {
                    on: {
                        PUBLISH_BRANCH_CLICKED: {
                          target: 'publishing'
                        },
                        PUBLISH_BRANCH_CANCEL_CLICKED: {
                            target: '#managerView',
                            actions: assign({
                                publishBranch: () => null//reset
                            })
                        }
                    }
                },
                publishing: {
                    invoke: {
                        src: (context, event) => publishBranch({branchId: context.publishBranch}),
                        onDone: {
                            target: '#managerView',
                            actions: assign({
                                publishBranch: () => null//reset
                            })
                        }
                    }
                }
            }
        },
        deleteBranch: {
            initial: 'idle',
            states: {
                idle: {
                    on: {
                        DELETE_BRANCH_CLICKED: {
                          target: "deleting"
                        },
                        CANCEL_DELETE_BRANCH_CLICKED: {
                            target: '#managerView',
                            actions: assign({
                                deleteBranch: () => null//reset
                            })
                        }
                    }
                },
                deleting: {
                    invoke: {
                        src: (context, event) => deleteBranch({branchId: context.deleteBranch}),
                        onDone: {
                            target: '#managerView',
                            actions: assign({
                                deleteBranch: () => null//reset
                            })
                        },
                        onError: {}
                    }
                }
            }
        },
        copyBranch: {
            invoke: {
                src: (context, event) => createBranch({sourceBranchId: context.copyBranch.sourceBranchId, name: `Copy of ${(context.branches.find(({id}) => id === context.copyBranch.sourceBranchId)).name}`}),
                onDone: {
                    target: "#managerView",
                    actions: assign({
                        copyBranch: () => null//reset
                    })
                }
            }
        },
        renameBranch: {
            initial: 'idle',
            states: {
                idle: {
                    on: {
                        VERSION_NAME_CHANGED: {
                            actions: assign({
                                renameBranch: (context, event) => ({
                                    ...context.renameBranch,
                                    newName: event.data
                                })
                            })
                        },
                        SAVE_VERSION_CLICKED: 'savingNewName',
                        CANCEL_CLICKED: {
                            target: '#managerView',
                            actions: assign({
                                renameBranch: (context, event) => ({})//reset
                            })
                        }
                    }
                },
                savingNewName: {
                    invoke: {
                        src: (context, event) => renameBranch({branchId: context.renameBranch.branch.id, newName: context.renameBranch.newName}),
                        onDone: {
                            target: '#managerView',
                            actions: assign({
                                renameBranch: (context, event) => ({})//reset
                            })
                        }
                    }
                }
            }
        }
      },
    },

    error: {}
  },
});