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

machine.js

const updateMessage = (message) => assign({ message: (_, _e) => message });

const projectnameStates = {
    initial: 'editing',
    states: {
        editing: {
            entry: ['logState'],
            on: {
                PROJECT_NAME_SAVING: {
                    target: '#headerMachine.saving',
                    cond: 'validProjectName',
                    actions: 'updateLabel'
                },
                PROJECT_NAME_CANCEL: 'cancelled'
            }
        },
        cancelled: { entry: ['logState'] }
    }
};

const headerMachine = Machine(
    {
        id: 'headerMachine',
        strict: true,
        initial: 'ready',
        context: {
            projectName: '',
            message: undefined,
        },
        on: {
            PROJECT_NAME_EDIT: 'projectname',
            UNDO_CLICK: 'undo',
            REDO_CLICK: 'redo',
            INVITE_CLICK: 'invite',
            DOWNLOAD_ITEM_CLICK: 'download',
            SHARE_ITEM_CLICK: 'share'
        },
        states: {
            ready: {},
            projectname: { ...projectnameStates },
            redo: {
                entry: ['logState'],
                after: { AUTO_SAVE_DELAY: 'saving'}
            },
            undo: {
                entry: ['logState'],
                after: { AUTO_SAVE_DELAY: 'saving'}
            },
            invite: {
                entry: ['logState']
            },
            download: {
                entry: ['logState']
            },
            share: {
                entry: ['logState']
            },
            saving: {
                entry: ['updateLabel', updateMessage('Saving...')],
                invoke: {
                    id: 'saveProject',
                    src: 'saveService',
                    onDone: {
                        target: 'saved',
                        actions: updateMessage('Saved'),
                    },
                    onError: {
                        target: 'failed',
                        actions: updateMessage('Failed to save!'),
                    },
                },
            },
            saved: {
                entry: ['logState'],
                // on: { '': 'idle'}
            },
            failed: {
                entry: ['logState'],
                // on: { '': 'idle'}
            },
        },
    },
    {
      delays: {
        AUTO_SAVE_DELAY: 2000
      },
        actions: {
            updateLabel: assign({
                projectName: (_, { projectName }) => projectName,
            }),
            logState: (_, event) => console.info(event),
        },
        services: {
            saveService: (_ctx, event) => {
                // this is a fetch request which saves project
                return new Promise((resolve, _reject) => {
                  console.info(event.type);
                    setTimeout(resolve, 2000);
                });
            },
        },
        guards: {
            validProjectName: (_, { projectName }) => !!projectName,
        },
    }
);