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

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const STORE = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

const COUNT = 5;

function fetchItems(last = 5, before = null) {
  let idx = STORE.length;
  if (before) {
    idx = STORE.indexOf(before);
  }

  let items = STORE.slice(idx - last, idx);
  let hasMoreBefore = items[0] !== STORE[0];

  return {
    items,
    info: {
      hasMoreAfter: false,
      hasMoreBefore,
    },
  };
}

const fetchMachine = Machine({
  id: 'infinte-scroll',
  initial: 'idle',
  context: {
    items: [],
    pageInfo: {},
  },
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      invoke: {
        id: 'loadInitialItems',
        src() {
          let data = fetchItems(COUNT);
          return Promise.resolve(data);
        },
        onDone: {
          target: 'success',
          actions: assign({
            items: (_, { data }) => [...data.items],
            pageInfo: (_, { data }) => data.info,
          }),
        },
      },
    },
    loadMoreBefore: {
      invoke: {
        id: 'loadItemsBefore',
        src({ items }) {
          let data = fetchItems(COUNT, items[0]);
          return Promise.resolve(data);
        },
        onDone: {
          target: 'success',
          actions: assign({
            items: ({ items }, { data }) => [...data.items, ...items],
            pageInfo: ({ pageInfo }, { data }) => {
              return { ...pageInfo, hasMoreBefore: data.info.hasMoreBefore };
            },
          }),
        },
      },
    },
    success: {
      on: {
        LOAD_MORE_BEFORE: {
          target: 'loadMoreBefore',
          cond({ pageInfo }, _) {
            return pageInfo.hasMoreBefore;
          },
        },
      },
    },
    failure: {
      type: 'final',
    },
  },
});