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

machine.js

const PAGE_ACTIONS = {
  NEXT_PAGE: {
    target: 'loadingPosts',
    actions: assign({ page: ctx => ctx.page + 1 }),
  },
  PREV_PAGE: {
    target: 'loadingPosts',
    actions: assign({ page: ctx => ctx.page - 1 }),
  },
  FIRST_PAGE: {
    target: 'loadingPosts',
    actions: assign({ page: 0 }),
  },
  LAST_PAGE: {
    target: 'loadingPosts',
    actions: assign({ page: ctx => ctx.totalPages }),
  },
};

const bepisMachine = Machine({
  id: 'dashboard',
  initial: 'loadingNewPosts',
  // All internal filters that are depended upon by the loadPosts endpoint. These are being managed by the
  // machine in order to prevent stale filters upon React component state updates
  context: {
    page: 0,
    pageLength: 10,
    totalPages: null,
    filterByAccount: false,
    filterActiveOnly: true,
    filterPostsWithAdOnly: false,
  },
  states: {
    idle: {
      on: {
        ...PAGE_ACTIONS,
        CHANGE_PAGE_LENGTH: {
          target: 'loadingNewPosts',
          actions: assign({ pageLength: (_ctx, e) => e.payload, page: 0 }),
        },
        FILTER_BY_ACCOUNT: {
          target: 'loadingNewPosts',
          actions: assign({ filterByAccount: (_ctx, e) => e.payload, page: 0 }),
        },
        TOGGLE_ARCHIVED: {
          target: 'loadingNewPosts',
          actions: assign({ filterActiveOnly: ctx => !ctx.filterActiveOnly, page: 0 }),
        },
        FILTER_AD_ONLY: {
          target: 'loadingNewPosts',
          actions: assign({ filterPostsWithAdOnly: (_ctx, e) => e.payload, page: 0 }),
        },
        ACTIVATE_CAMPAIGN: {
          target: 'activatingCampaign',
          actions: ['campaignLoading'],
        },
        READVERTISE_CAMPAIGN: 'readvertisingCampaign',
      },
    },
    loadingPosts: {
      invoke: {
        src: 'loadPosts',
        onDone: {
          target: 'idle',
          actions: 'changePosts',
        },
        // TODO: Add onError
      },
      // TODO: Figure out how to cancel requests upon page change to prevent unnecc requests
      on: {
        ...PAGE_ACTIONS,
      },
    },
    loadingNewPosts: {
      invoke: {
        src: 'loadPosts',
        onDone: {
          target: 'idle',
          actions: ['initPosts', assign({ totalPages: (_ctx, e) => e.data.totalPages })],
        },
        // TODO: Add onError
      },
    },
    readvertisingCampaign: {
      initial: 'idle',
      on: {
        CLOSE: '#dashboard.idle',
      },
      states: {
        idle: {
          on: {
            SUBMIT: 'submitting',
          },
        },
        submitting: {
          invoke: {
            src: '#dashboard.readvertiseCampaign',
            onDone: {
              target: '#dashboard.idle',
              actions: ['alertSuccessful', 'modifyCampaign'],
            },
            onError: {
              target: 'idle',
              actions: ['alertUnsuccessful'],
            },
          },
        },
      },
    },
    activatingCampaign: {
      invoke: {
        src: 'activateCampaign',
        onDone: {
          target: 'idle',
          actions: 'campaignActive',
        },
        onError: {
          target: 'idle',
          actions: ['alertUnsuccessful', 'campaignPaused'],
        },
      },
    },
    pausingCampaign: {
      invoke: {
        src: 'pauseCampaign',
        onDone: {
          target: 'idle',
          actions: 'campaignPaused',
        },
        onError: {
          target: 'idle',
          actions: ['alertUnsuccessful', 'campaignActive'],
        },
      },
    },
  },
});