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

machine.js

const fetchMachine = Machine({
    id: 'get-user-grid',
    initial: "loading",
    context: {
      data: {
        username: "",
        first_name: '',
        lastname: '',
        email: '',
        role: '',
        extension: '',
        phone:''
      },
      error: "",
      filter: "",
      search_text: '',
      items_per_page: 50,
      max_retry_count: 3,
      retry_count: 0,
      enable_filtering: true,
      enable_search: true,
      enable_pagination: true,
      page_count: 1,
      last_page: 20
    },
    states: {
      loading: {
        entry: ['getUserData'],
        on: {
          TIMEOUT: {
            actions: 'assignTimeOutMessageToError',
            target: 'timeout'
          },
          SUCCESS: {
             actions: ['assignDataToContext', 'assignRetryCountToZero'],
            target: '#ready',
          },
          ERROR: {
            actions: ['assignDataToError'],
            target: "error"
          }
        }
      },
      ready: {
        id: 'ready',
        on: {
          ENABLE_FILTERING: {
            actions: "assignEnableFiltering"
          },
          ENABLE_SEARCH: {
            actions: 'assignEnableSearch'
          },
          ENABLE_PAGINATION: {
            actions: 'assignEnablePagination'
          },
          SEARCH_INPUT_CHANGE: [{
            cond: 'isSearchEnable',
            actions: ['assignSearchToUserInput', 'filterDataWithSearchText'],
          }],
          SELECT_ROWS_PER_PAGE: [{
            actions: ["assignItemsPerPageToUserInput"],
          }],
          SELECT_FILTER: [{
            cond: "isFilterEnable",
            actions: ['assignFilterToContext','filterDataInContext'],
          }],
          NEXT: {
            actions: 'assignIncrementedPageCount',
            cond: 'isPaginationEnabledAndValidPageCount'
          },
          PREVIOUS: {
            actions: 'assignDecrementedPageCount',
            cond: 'isPaginationAndPageIsGreaterThanOne'
          },
          JUMP_FIRST: {
            actions: 'assignPageCountToOne',
            cond: 'isPaginationAndPageIsGreaterThanOne'
          },
          JUMP_LAST: {
            actions: 'assignPageCountToLastPage',
            cond: 'isPaginationEnabledAndValidPageCount'
          },
          JUMP_TO: {
            actions: 'assignPageCountToUserInput',
            cond: 'isPaginationAndValidPage'
          }
        }
      },
      timeout: {
        on: {
           RETRY: [{
            actions: ['assignMaxAttemptsReachedMessageToError'],
            target: 'error',
            cond: 'isRetryCountGreaterThanMaxRetry',
          },{
            actions: ['assignIncrementedRetryCount', 'removeTimeoutErrorMessage'],
            target: 'loading',
          }]
        }
      },
      error: {
        type: 'final',
      },
    },
  }, 
  {
    actions: {
      assignIncrementedRetryCount: assign({
        retry_count: (ctx) => ctx.retry_count + 1
      }),
      assignIncrementedPageCount: assign({
        page_count: (ctx) => ctx.page_count + 1
      }),
      assignPageCountToOne: assign({
        page_count: (ctx) => 1
      }),
       assignPageCountToLastPage: assign({
        page_count: (ctx) => ctx.last_page
      }),
      assignPageCountToUserInput: assign({
        page_count: (ctx, event) => event.payload
      }),
    }, 
    guards: {
      isRetryCountGreaterThanMaxRetry: (ctx) => ctx.retry_count > ctx.max_retry_count,
      isSearchEnable: (ctx) => !!ctx.enable_search,
      isFilterEnable: (ctx) => ctx.enable_filtering,
      isPaginationEnabledAndValidPageCount: (ctx) => ctx.enable_pagination && ctx.page_count !== ctx.last_page,
      isPaginationAndPageIsGreaterThanOne: (ctx) => ctx.enable_pagination && ctx.page_count > 1,
      isPaginationAndValidPage: (ctx) => ctx.enable_pagination && ctx.last_page != 0
    }
  });