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 infiniteShifts = Machine({
    id: 'infinite-scrolling-shifts',
    initial: 'noData',
    states: {
      noData: {
        on: {
          LOAD: 'loading'
        }
      },
      loading: {
        invoke: {
          src: 'loadInitialData',
          onDone: 'data',
          onError: 'error'
        }
      },
      data: {
        initial: 'idle',
        // all of these events will reset
        // the data
        on: {
          // how do we refresh? can we refresh
          // the entire dataset in one go?
          REFRESH: 'loading',
          // we need to reload everything
          FILTERS_CHANGED: 'loading',
          // this is weird in an infinite scroll
          // => how do we display that?
          // i.e. a user scrolls and then
          // changes date -> what happens?
          DATE_CHANGED: 'loading'
        },
        states: {
          // it looks like we need to figure out
          // pagination ourselves here - do we
          // calculate a proper meta ourselves
          // base don page-size, records etc.?
          idle: {
            on: {
              LOAD_NEXT: 'loading',
              LOAD_PREV: 'loading',
            }
          },
          loading: {
            invoke: {
              src: 'loadPage',
              onDone: 'success',
              onError: 'error'
            }
          },
          success: {
            // transition into idle immediately
            // or animate if we want to be nice
          },
          error: {
            // how do we recover from an error here?
          }
        },

      },
      error: {}
    }
  });