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

machine.js

const getBranches = async () =>
  await [
    {
      id: "fe4b7150-c29d-4da0-8785-5f4479163f0f",
      sourceBranchId: "fe4b7150-c29d-4da0-8785-5f4479163f0f",
      name: "Origin Version",
      branchUpdatedUser: {
        value: "[email protected]",
        valueType: "EMAIL", // can be: EMAIL, SITE_OWNER, WIX_STAFF
      },
      branchPublishedUser: {
        value: "Site Owner",
        valueType: "SITE_OWNER",
      },
      branchUpdatedDate: "2019-07-02T07:00:21.154Z",
      branchPublishedDate: "2019-07-02T07:00:21.154Z",
      updatedDate: "2019-07-02T07:00:21.154Z",
      createdDate: "2019-06-26T07:15:12.921Z",
      renameable: true,
      url: "https://www.mysite.com",
    },
  ];

const createBranch = async () => await {};

const publishBranch = async () => await {};
const deleteBranch = async () => await {};

const copyBranch = async () => new Promise(res => setTimeout(res, 1500))
const renameBranch = async () => new Promise(res => setTimeout(res, 1500))

const isValidVersionName = () => {};

const branchesManager = Machine({
  id: "branches-manager",
  initial: "loading",
  context: {
    branches: {},
    rcs: [],
    error: null,
    createBranch: {},
    publishBranch: {},
    renameBranch: {},
    deleteBranch: {},
    copyBranch: null
  },
  states: {
    loading: {
      invoke: {
        id: "getBranches",
        src: (context, event) => getBranches(),
        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) => ({
                        publishCandidate: event.data
                    })
                })
            },
            DELETE_BRANCH: {
                target: 'deleteBranch',
                actions: assign({
                    deleteBranch: (context, event) => ({
                        deleteCandidate: event.data
                    })
                })
            },
            COPY_BRANCH: {
                target: 'copyBranch',
                actions: assign({
                    copyBranch: (context, event) => event.data
                })
            },
            RENAME_BRANCH: {
                target: 'renameBranch',
                actions: assign({
                    copyBranch: (context, event) => ({
                        branchId: 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(),
                onDone: {
                  target: "#managerView",
                  actions: assign({
                    createBranch: () => ({}), //reset
                  }),
                },
                onError: {
                  actions: actions.log("error creating branch"),
                },
              },
            },
          },
        },
        publishBranch: {
            initial: 'idle',
            states: {
                idle: {
                    on: {
                        PUBLISH_BRANCH_CLICKED: 'publishing',
                        PUBLISH_BRANCH_CANCEL_CLICKED: {
                            target: '#managerView',
                            actions: assign({
                                publishBranch: () => ({})//reset
                            })
                        }
                    }
                },
                publishing: {
                    invoke: {
                        src: (context, event) => publishBranch(),
                        onDone: {
                            target: '#managerView',
                            actions: assign({
                                publishBranch: () => ({})//reset
                            })
                        }
                    }
                }
            }
        },
        deleteBranch: {
            initial: 'idle',
            states: {
                idle: {
                    on: {
                        DELETE_BRANCH_CLICKED: "deleting",
                        CANCEL_DELETE_BRANCH_CLICKED: {
                            target: '#managerView',
                            actions: assign({
                                deleteBranch: () => ({})//reset
                            })
                        }
                    }
                },
                deleting: {
                    invoke: {
                        src: () => deleteBranch,
                        onDone: {
                            target: '#managerView',
                            actions: assign({
                                deleteBranch: () => ({})//reset
                            })
                        },
                        onError: {}
                    }
                }
            }
        },
        copyBranch: {
            invoke: {
                src: (context, event) => copyBranch(context.copyBranch),
                onDone: {
                    target: "#managerView",
                    actions: assign({
                        copyBranch: () => null//reset
                    })
                }
            }
        },
        renameBranch: {
            initial: 'idle',
            states: {
                idle: {
                    on: {
                        VERSION_NAME_CHANGED: {
                          internal:true,
                            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(),
                        onDone: {
                            target: '#managerView',
                            actions: assign({
                                renameBranch: (context, event) => ({})//reset
                            })
                        }
                    }
                }
            }
        }
      },
    },

    error: {}
  },
});