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

machine.js

const transTo = (target) => ({
  target,
  actions: sendParent({ type: 'TODO_STATUS_UPDATE', value: target }),
});
const todoStatusMachine = Machine({
  id: 'TodoStatus',
  states: {
    Active: {
      on: {
        SET_ALL_COMPLETED: transTo('Completed'),
        TOGGLE_TODO: transTo('Completed'),
      },
    },
    Completed: {
      on: {
        SET_ALL_ACTIVE: transTo('Active'),
        TOGGLE_TODO: transTo('Active'),
      },
    },
  },
  initial: 'Active',
});

const todosViewMachine = Machine({
  id: 'TodoView',
  context: {
    filter: 'All',
    todoStatusMachine: null,
  },
  initial: 'BeforeCreate',
  states: {
    BeforeCreate: {
      id: 'BeforeCreate',
      states: {},
      on: {
        INPUT_TEXT: '#Creating',
      },
    },
    Creating: {
      id: 'Creating',
      states: {},
      on: {
        ENTER_KEY: '#Created',
        INPUT_EMPTY: '#BeforeCreate',
      },
    },
    Created: {
      id: 'Created',
      entry: assign({
        todoStatusMachine: () => spawn(todoStatusMachine),
      }),
      on: {
        FILTER_ALL: {
          target: '.Unknown?',
          actions: assign({ filter: 'All' }),
        },
        FILTER_ACTIVE: {
          target: '.Unknown?',
          actions: assign({ filter: 'Active' }),
        },
        FILTER_COMPLETED: {
          target: '.Unknown?',
          actions: assign({ filter: 'Completed' }),
        },
        SET_ALL_ACTIVE: {
          actions: send('SET_ALL_ACTIVE', {
            to: (context) => context.todoStatusMachine,
          }),
        },
        SET_ALL_COMPLETED: {
          actions: send('SET_ALL_COMPLETED', {
            to: (context) => context.todoStatusMachine,
          }),
        },
        TODO_STATUS_UPDATE: '.Unknown?',
      },
      states: {
        Showing: {
          id: 'Showing',
          states: {
            Editing: {
              id: 'Editing',
              states: {},
              on: {
                EMPTY_TEXT: '#Deleted',
                UPDATE_TEXT: { target: '#Reading', internal: true },
              },
            },
            Reading: {
              id: 'Reading',
              states: {},
              on: {
                CLICK_DESTROY: '#Deleted',
                TOGGLE_CHECK: {
                  actions: send('TOGGLE_TODO', {
                    to: (context) => context.todoStatusMachine,
                  }),
                },
              },
            },
          },
          initial: 'Reading',
        },
        Hidden: {
          id: 'Hidden',
        },
        'Unknown?': {
          id: 'Unknown?',
          on: {
            '': [
              {
                target: '#Showing.Reading',
                cond: ({ filter, todoStatusMachine }) => {
                  console.log(
                    'todo status machine',
                    todoStatusMachine?.state.value
                  );

                  return (
                    filter === 'All' ||
                    filter === todoStatusMachine?.state.value
                  );
                },
                internal: true,
              },
              { target: '#Hidden', internal: true },
            ],
          },
        },
      },
      initial: 'Unknown?',
    },
    Deleted: {
      id: 'Deleted',
      type: 'final',
    },
  },
});