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

machine.js

const PMachineOptions = {
  guards: {
    IS_FETCH_NEEDED: function (ctx) {
      return !ctx.podcast.loaded;
    },
    IS_FETCHED_ALREADY: function (ctx) {
      return ctx.podcast.loaded;
    },
    IS_SUBSCRIBE_NEEDED: function (ctx) {
      return !ctx.currentDevice.isSubscribed(ctx.podcast);
    },
    IS_SUBSCRIBED_ALREADY: function (ctx) {
      return !!ctx.currentDevice.isSubscribed(ctx.podcast);
    },
  },
  services: {
    STATE_FETCHING_SVC: (ctx) =>
      new Promise((resolve) =>
        setTimeout(() => {
          ctx.podcast.loaded = true;
          resolve();
        }, 2000),
      ),
    STATE_SUBSCRIBING_SVC: (ctx) =>
      new Promise((resolve) =>
        setTimeout(() => {
          ctx.podcast.subscribed = true;
          resolve();
        }, 2000),
      ),
    STATE_UNSUBSCRIBING_SVC: (ctx) =>
      new Promise((resolve) =>
        setTimeout(() => {
          ctx.podcast.subscribed = false;
          resolve();
        }, 2000),
      ),
  },
  actions: {},
  activities: {},
  delays: {},
};

const context = {
  expanded: false,
  currentDevice: {
    serialnumber: '',
    subscriptions: {},
    newVersion: 0,
    roles: {},
    machines: [],
    machineMap: {},
    isSubscribed: (podcast) => podcast.subscribed,
  },
  podcast: {
    id: '',
    title: '',
    author: '',
    imageSmall: '',
    imageLarge: '',
    country: '',
    genre: '',
    feedUrl: '',
    releaseDate: '',
    episodes: -1,
    type: 'e',
    loaded: false,
    description: '',
    lastTitle: '',
    rssFeedData: '',
    subscribed: false,
  },
};

const machine = {
  id: 'PMachine',
  initial: 'STATE_IDLE',
  context,
  states: {
    STATE_IDLE: {
      on: {
        E_TOGGLE_EXPAND: [
          { target: 'STATE_FETCHING', cond: 'IS_FETCH_NEEDED' },
          { target: 'STATE_IDLE', cond: 'IS_FETCHED_ALREADY', actions: 'SET_TOGGLE_EXPANDED' },
        ],
        E_TOGGLE_SUBSCRIBE: [
          { target: 'STATE_SUBSCRIBING', cond: 'IS_SUBSCRIBE_NEEDED' },
          { target: 'STATE_UNSUBSCRIBING', cond: 'IS_SUBSCRIBED_ALREADY' },
        ],
      },
    },
    STATE_FETCHING: {
      invoke: { src: 'STATE_FETCHING_SVC', onDone: { target: 'STATE_IDLE', actions: 'SET_RSS_FEED' } },
    },
    STATE_SUBSCRIBING: {
      invoke: { src: 'STATE_SUBSCRIBING_SVC', onDone: { target: 'STATE_IDLE', actions: 'SET_SUBSCRIBE_STATUS' } },
    },
    STATE_UNSUBSCRIBING: {
      invoke: { src: 'STATE_UNSUBSCRIBING_SVC', onDone: { target: 'STATE_IDLE', actions: 'SET_SUBSCRIBE_STATUS' } },
    },
  },
};

const m = Machine(machine, PMachineOptions);