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

machine.js

const FS = {
  IDLE: 'idle',
  OPEN: 'open',
};

 actions: ActionFunctionMap = {
  showModal: assign({
    showModal: (_) => true,
  }),
  hideModal: assign({
    showModal: (_) => false,
    newItems: (_) => [],
  }),
  addItems: assign({
    newItems: ({ newItems }, { data }) => [...newItems, ...data],
    showModal: (_) => true,
  }),
};

/* https://xstate.js.org/viz/?gist=3470be56c3fc9655d3fbc5439c02c661 */
const machine = Machine(
  {
    initial: FS.IDLE,
    context: {
      showModal: false,
      newItems: [],
    },
    states: {
      [FS.IDLE]: {
        on: {
          SHOW_MODAL: {
            target: FS.OPEN,
            actions: 'showModal',
          },
          ADD_ITEMS: {
            target: FS.OPEN,
            actions: ['addItems', 'showModal'],
          },
        },
      },
      [FS.OPEN]: {
        on: {
          HIDE_MODAL: {
            target: FS.IDLE,
            actions: 'hideModal',
          },
        },
      },
    },
  },
  { actions },
);