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

machine.js

const fetchMachine = Machine({
 id: 'content',
  context: {
    itemData: null,
    hoverOverItem: null
  },
  initial: 'idle',
  states: {
    idle: {
      entry: 'clearContext',
      on: {
        DRAG: {
          target: 'dragging',
          actions: 'setItemData'
        },
        CLICK: {
          target: 'addingItem',
          actions: 'setItemData'
        }
      }
    },
    addingItem: {
      invoke: {
        id: 'addingItem',
        src: 'getItem',
        onDone: {
          target: 'idle',
          actions: 'addItem'
        },
        onError: {
          target: 'idle',
          actions: 'logError'
        }
      }
    },
    dragging: {
      invoke: {
        src: 'getHoverOverItem$'
      },
      on: {
        DROP: 'addingItem',
        HOVER: 'hovering',
        DRAG_END: 'idle'
      }
    },
    hovering: {
      entry: 'setHoverOverItem',
      on: {
        DROP: 'addingItem',
        DRAG_LEAVE: 'dragging'
      },
      after: {
        SWAP_DELAY: {
          target: 'swapping',
          cond: 'isSameType',
          actions: 'swapItem'
        }
      }
    },
    swapping: {
      on: {
        DRAG_LEAVE: {
          target: 'dragging',
          actions: 'revertSwapItem'
        },
        DRAG_END: 'idle'
      }
    }
  }
}, {
  delays: {
    SWAP_DELAY: () => 1000
  },
  guards: {
    isSameType: () => true
  }
});