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

machine.js

const amendDraft = (context) => {
    console.log("saving", context.pendingQueue)

    let resolver;
    const promise = new Promise((resolve) => resolver = resolve)

    setTimeout(() => resolver(), 200);

    return promise;
}

const fetchMachine = Machine(
  {
    id: 'SWAPI',
    initial: 'idle',
    context: {
      queue: [],
      pendingQueue: [],
    },
    on: {
      SAVE_SETTING: {
        actions: (context, event) => context.queue.push(event.amendment),
      },
    },
    states: {
      idle: {
        after: {
          200: [
            {
              target: 'saving',
              cond: context => context.queue.length > 0,
            },
            {
              target: 'idle',
            },
          ],
        },
      },
      saving: {
        entry: ['assignPendingQueue', 'clearQueue'],
        invoke: {
          id: 'fetchLuke',
          src: amendDraft,
          onDone: {
            actions: [
              'clearPendingQueue',
              // sendParent((_, event) => {
              //   return {
              //     type: 'SETTINGS_SAVED',
              //     data: event.data,
              //   };
              // }),
            ],
            target: 'idle',
          },
          onError: {
            // actions: sendParent('SAVE_FAILED'),
          },
        },
      },
    },
  },
  {
    actions: {
      assignPendingQueue: assign({
        pendingQueue: context => context.queue,
      }),
      clearQueue: assign({
        queue: _ => [],
      }),
      clearPendingQueue: assign({
        pendingQueue: _ => [],
      }),
    },
  }
);