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

machine.js

const HeaderMachine = Machine(
    {
        id: 'header',
        strict: true,
        initial: 'ready',
        context: {
            projectName: ''
        },
        states: {
            ready: {
                on: {
                    PROJECT_NAME_EDIT: 'editing'
                }
            },
            editing: {
                on: {
                    PROJECT_NAME_SAVING: 'saving',
                    PROJECT_NAME_CANCEL: 'cancelled'
                }
            },
            saving: {
                entry: ['updateLabel'],
                after: [{ delay: 2000, target: 'saved' }],
                on: {
                    PROJECT_NAME_SAVE: 'saved'
                }
            },
            saved: {
                on: { PROJECT_NAME_EDIT: 'editing' }
            },
            cancelled: {
                on: { PROJECT_NAME_EDIT: 'editing' }
            }
        }
    },
    { actions: { updateLabel: assign({ projectName: (_, event) => event.projectName }) } }
);