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

machine.js

const pageMachine = Machine({
  id: 'page',
  initial: 'visible',
  context: {
    isSent: false,
  },
  states: {
    visible: {
      initial: 'enabled',
      description: 'A visible page can be enabled/disabled',
      states: {
        enabled: {
          on: { DISABLED: { target: 'disabled' } },
        },
        disabled: {
          on: { ENABLED: { target: 'enabled' } },
        },
        hist: {
          type: 'history',
          target: 'enabled',
        },
      },
      on: { INVISIBLE: { target: 'invisible' } },
    },
    invisible: {
      on: { VISIBLE: { target: 'visible.hist' } },
    },
  },
});


const surveyPagesMachine = Machine(
  {
    id: 'survey_pages',
    type: 'parallel',
    context: {
      selected: undefined,
      pages: [],
    },
    states: {
      selected: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              SELECT_PAGE: {
                target: 'idle',
                actions: assign({ selected: (context, { page }) => page }),
              },
            },
          },
        },
      },
      items: {
        initial: 'initialize',
        states: {
          idle: {
            on: {
              DISABLED: (_, { page, event }) => page.ref.send(event),
              ENABLED: (_, { page, event }) => page.ref.send(event),
              DO_INVISIBLE: (_, { page, event }) => {
                console.log('inside INVISIBLE');
                console.log('page', page);
                console.log('event', event);
                console.log('');
                page.ref.send(event);
              },
              VISIBLE: (_, { page, event }) => page.ref.send(event),
            },
          },
          initialize: {
            on: {
              '': {
                target: 'idle',
                actions: assign({
                  pages: [
                    {
                      id: 'property_details_page',
                      title: 'Property details',
                      ref: spawn(pageMachine, { name: 'property_details_page', sync: true }),
                    },
                    {
                      id: 'energy_details_page',
                      title: 'Energy details',
                      ref: spawn(pageMachine, { name: 'energy_details_page', sync: true }),
                    },
                    {
                      id: 'solar_pv_page',
                      title: 'Solar PV',
                      ref: spawn(pageMachine, { name: 'solar_pv_page', sync: true }),
                    },
                    {
                      id: 'battery_page',
                      title: 'Battery',
                      ref: spawn(pageMachine, { name: 'battery_page', sync: true }),
                    },
                    {
                      id: 'ev_charging_page',
                      title: 'EV Charging',
                      ref: spawn(pageMachine, { name: 'ev_charging_page', sync: true }),
                    },
                  ],
                }),
              },
            },
          },
        },
      },
    },
  },
  {}
);