xstate invoke

xstate_invoke.ts

import { assign, setup } from 'xstate';

function executeAction() {
    console.log('executing action');
}

export type ConfirmationDialogMachineEvent =
  | { type: 'OPEN_DIALOG'; action: void }
  | { type: 'CONFIRM' }
  | { type: 'CANCEL' };

const confirmDialogueMachine = setup({
  types: {
    events: {} as ConfirmationDialogMachineEvent,
    context: {} as {
      isOpen: boolean;
      action: void | (() => void);
    },
  },
  actors: {
    executeAction: executeAction,
  },
}).createMachine({
  id: 'confirmDialogue',
  initial: 'closed',
  context: {
    isOpen: false,
    action: undefined,
  },
  states: {
    idle: {},
    closed: {
      on: {
        OPEN_DIALOG: {
          target: 'open',
          actions: assign({
            isOpen: true,
            // action: (_, event) => event.action,
          }),
        },
      },
    },
    executingAction: {
        invoke: {
            src: 'executeAction',
            id: 'executeAction',
            onDone: {
                target: 'idle',
                actions: assign({
                    isOpen: false,
                }),
            },
            onError: {
                target: 'idle',
                actions: assign({
                    isOpen: false,
                }),
            },
        },

    },      
    open: {
      initial: "idle" ,
      on: {
        CONFIRM: 'executingAction',
        //   target: 'executingAction',
        //   actions: [
        //     assign({
        //       isOpen: false,
        //     }),
        //     (context) => {
        //       if (context.action) {
        //         context.action();
        //       }
        //     },
        //   ],
        // },
        CANCEL: {
          target: 'closed',
          actions: assign({
            isOpen: false,
          }),
        },
      },
      states: {
        idle: {},
        executingAction: {
            invoke: {
                src: 'executeAction',
                id: 'executeAction',
                onDone: {
                    target: 'idle',
                    actions: assign({
                        isOpen: false,
                    }),
                },
                onError: {
                    target: 'idle',
                    actions: assign({
                        isOpen: false,
                    }),
                },
            },

        },
    },
    

    },
  },
});

export { confirmDialogueMachine };