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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  const productMachine = Machine({
    id: 'productMachine',
    initial: 'input',
    states: {
      input: {
        id: 'inputMode',
        initial: 'brand',
        states: {
          brand: {
            on: {
              SET_BRAND: {
                target: 'product',
                actions: ['setBrand'],
              },
            },
          },
          product: {
            on: {
              SET_PRODUCT: {
                target: 'loading',
                actions: ['setProductFamilyId'],
              },
              RESET: 'brand',
            },
          },
          loading: {
            invoke: {
              id: 'fetch-diet',
              src: (ctx, event) => {},
              onDone: '#productMachine.idle',
              onError: 'error',
            },
          },
          error: {
            on: {
              TRY_ANOTHER_PRODUCT: 'product',
            },
          },
        },
      },
      idle: {
        on: {
          EDIT: 'input',
        },
      },
    },
  })

  const compareMachine = Machine({
  id: 'compare',
  initial: 'idle',
  context: {
    products: [],
  },
  states: {
    idle: {},
  },
  on: {
    ADD_PRODUCT: {
      target: 'idle',
      actions: assign((context, event) => {
        const product = spawn(productMachine, `product-${context.products.length}`)

        return {
          ...context,
          products: [...context.products, product],
        }
      }),
    },
  },
})