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

machine.js

var contentEditorMachine = Machine({
    id: 'content',
    strict: true,
    initial: 'unknown',
    on: {
        CLEAR_ERROR: {
            actions: 'clearError'
        }
    },
    context: {
        variants: [
            { id: '1', status: 'draft' },
            { id: '2', status: 'live' },
        ],
        currentVariant: {
            id: '2',
            status: 'live'
        }
    },
    states: {
        unknown: {
            id: 'unknown',
            entry: 'calculateCurrentVariant',
            on: {
                '': [
                    { target: 'live', cond: 'isLive' },
                    { target: 'draft.viewing', cond: 'isDraft' },
                    { target: 'draft.creating' },
                ]
            }
        },
        live: {
            id: 'live',
            initial: 'viewing',
            states: {
                viewing: {
                    on: {
                        EDIT: '#draft.creating',
                        CHANGE_VARIANT: {
                            target: '#unknown',
                            actions: 'changeCurrentVariant'
                        }
                    }
                }
            }
        },
        draft: {
            id: 'draft',
            initial: 'viewing',
            states: {
                creating: {
                    initial: 'enteringValues',
                    states: {
                        enteringValues: {
                            on: {
                                DISCARD: {
                                    target: 'confirmingDiscard',
                                    cond: 'hasOtherVariants',
                                    actions: 'setNextVariant'
                                },
                                TRY_SAVING_CHANGES: 'saving'
                            }
                        },
                        confirmingDiscard: {
                            on: {
                                CONFIRM_DISCARD: '#unknown',
                                CANCEL_DISCARD: 'enteringValues'
                            }
                        },
                        saving: {
                            invoke: {
                                src: function () {
                                    return new Promise(function (_, reject) {
                                        setTimeout(function () { return reject({ code: 'internal_server_error' }); }, 2000);
                                    });
                                },
                                onDone: '#unknown',
                                onError: {
                                    target: 'enteringValues',
                                    actions: 'setError'
                                }
                            }
                        }
                    }
                },
                editing: {
                    initial: 'makingChanges',
                    states: {
                        makingChanges: {
                            on: {
                                TRY_SAVING_CHANGES: 'saving',
                                DISCARD: {
                                    target: 'confirmingDiscard',
                                    cond: 'isAnotherVariant',
                                    actions: 'setNextVariant'
                                }
                            }
                        },
                        confirmingDiscard: {
                            on: {
                                CONFIRM_DISCARD: '#unknown',
                                CANCEL_DISCARD: 'makingChanges'
                            }
                        },
                        saving: {
                            on: {
                                ON_SUCCESS: '#unknown',
                                ON_CONFLICT: 'solvingConflict',
                                ON_FAILURE: 'makingChanges'
                            }
                        },
                        solvingConflict: {
                            on: {
                                TRY_OVERRIDE: '#unknown',
                                CANCEL: 'makingChanges'
                            }
                        }
                    }
                },
                viewing: {
                    on: {
                        EDIT: 'editing',
                        CHANGE_VARIANT: {
                            target: '#unknown',
                            actions: 'changeCurrentVariant'
                        },
                        PUBLISH: 'publishing'
                    }
                },
                publishing: {
                    on: {
                        TRY_CONFIRM_PUBLISHING: '#live',
                        CANCEL_PUBLISHING: 'viewing'
                    }
                }
            }
        }
    }
}, {
    guards: {
        isLive: function (ctx) { var _a, _b; return ((_b = (_a = ctx) === null || _a === void 0 ? void 0 : _a.currentVariant) === null || _b === void 0 ? void 0 : _b.status) === 'live'; },
        isDraft: function (ctx) { var _a, _b; return ((_b = (_a = ctx) === null || _a === void 0 ? void 0 : _a.currentVariant) === null || _b === void 0 ? void 0 : _b.status) === 'draft'; },
        hasOtherVariants: function (ctx) { var _a; return ((_a = ctx) === null || _a === void 0 ? void 0 : _a.variants) ? ctx.variants.length > 0 : false; },
        isAnotherVariant: function (ctx, event) { var _a, _b, _c, _d; return ((_b = (_a = ctx) === null || _a === void 0 ? void 0 : _a.currentVariant) === null || _b === void 0 ? void 0 : _b.id) !== ((_d = (_c = event) === null || _c === void 0 ? void 0 : _c.variant) === null || _d === void 0 ? void 0 : _d.id); }
    },
    actions: {
        // TODO: use assign({ errorCode: null}) format
        clearError: assign(function (_) {
            return {
                errorCode: null
            };
        }),
        calculateCurrentVariant: assign(function (ctx) {
            var _a;
            if (!((_a = ctx) === null || _a === void 0 ? void 0 : _a.nextVariant)) {
                return {};
            }
            return {
                currentVariant: ctx.nextVariant,
                nextVariant: null,
                errorCode: null
            };
        }),
        changeCurrentVariant: assign(function (_, event) {
            var _a;
            if (!((_a = event) === null || _a === void 0 ? void 0 : _a.variant)) {
                return {};
            }
            return {
                currentVariant: event.variant
            };
        }),
        setNextVariant: assign(function (_, event) {
            var _a;
            if (!((_a = event) === null || _a === void 0 ? void 0 : _a.variant)) {
                return {};
            }
            return {
                nextVariant: event.variant
            };
        }),
        setError: assign({
            errorCode: function (_, event) { var _a, _b; return (_b = (_a = event) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.code; }
        })
    }
});