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

infiniteScrollMachine.js

const fetchMachine = Machine({
  id: "infinite-scroll",
  initial: "idle",
  context: {
    page: 1,
    size: 2,
    total: 0,
    keyword: "",
    items: []
  },
  states: {
    idle: {
      on: {
        SEARCH: {
          target: "searching",
          actions: assign({ page: 1, keyword: (_, event) => event.keyword }),
          cond: 'notSameKeyword'
        },
        FETCH_MORE: {
          target: "fechingMore",
          cond: "hasMore",
          actions: assign({ page: context => context.page + 1 })
        }
      }
    },
    searching: {
      invoke: {
        id: "search",
        src: "onFetch",
        onDone: {
          target: "idle",
          actions: assign((_, event) => event.data)
        },
        onError: {
          target: "idle"
        }
      }
    },
    fechingMore: {
      invoke: {
        id: "fetchMore",
        src: "onFetch",
        onDone: {
          target: "idle",
          actions: assign((context, event) => ({
            ...event.data,
            items: [...context.items, ...event.data.items]
          }))
        },
        onError: {
          target: "idle"
        }
      }
    }
  }
},
{
  guards: {
    hasMore: (context, event) => {
      return context.page < Math.ceil(context.total / context.size);
    },
    notSameKeyword: (context, event) => {
      return context.keyword !== event.keyword
    }
  }
});