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

machine.js

  // Tallio saved post library

  function toggle(action) {
    return assign({
      posts: (context) => {
        let index = context.posts.findIndex((post) => post.id === '1');
        let updatedPost = {
          ...context.posts[index],
          saved: action === 'save',
        };
        console.log('index',index)
        return [
          ...context.posts.slice(0, index),
          updatedPost,
          ...context.posts.slice(index + 1),
        ]
      }
    })
  }

  const savedPostMachine = Machine({
    id: 'savedPost',
    initial: 'idle',
    context: {
      posts: [
        {
          id: '1',
          saved: false
        }
      ]
    },
    states: {
      idle: {
        on: {
          TOGGLE: 'toggling',
        }
      },
      toggling: {
        on: {
          SAVE: {
            target: 'saving',
            cond: (context) => !context.posts[0].saved
          },
          REMOVE: {
            target: 'confirmRemove',
            cond: (context) => context.posts[0].saved
          }
        }
      },
      saving: {
        on: {
          FAIL: 'idle',
          SUCCESS: {
            target: 'idle',
            actions: toggle('save')
          },
        }
      },
      removing: {
        on: {
          FAIL: 'idle',
          SUCCESS: {
            target: 'idle',
            actions: toggle('remove')
          },
        }
      },
      confirmRemove: {
        on: {
          NO: 'idle',
          YES: 'removing',
        }
      },
    }
  });