state_machine.js

/*

  Do you use?:
    Question
    Alternative(product)
    Note(product)
    Thanks

  Add to Stack:
    ProductSearch
    Note(product, note, photos)
    Photos(product, note, photos)
    Thanks

  Answer Question:
    ProductSearch
    Note(product)
    Thanks

 */
// https://github.com/davidkpiano/xstate/tree/master/packages/xstate-react#readme
// https://github.com/davidkpiano/xstate/tree/master/packages/xstate-fsm
const DoYouUseMachine = createMachine({
  id: 'doYouUse',
  initial: 'question',
  context: {
    component: 'FOO',
  },
  states: {
    question: {
      context: {
        component: 'Foo',
      },
      on: {
        yes: {
          target: 'note',
          actions: assign({
            data: (_, event) => event.data,
          }),
        },
        no: {
          target: 'alternative',
          actions: assign({
            data: (_, event) => event.data,
          }),
        },
      },
    },
    alternative: {
      on: {
        submit: {
          target: 'note',
          actions: assign({
            data: (_, event) => event.data,
          }),
        },
      },
    },
    note: {
      on: {
        submit: {
          target: 'thanks',
          actions: assign({
            data: (_, event) => event.data,
          }),
        },
      },
    },
    thanks: {
      type: 'final',
    },
  },
});

import { createMachine, interpret } from '@xstate/fsm';

const toggleMachine = createMachine({
  /* ... */
});

const toggleService = interpret(toggleMachine).start();

toggleService.subscribe(state => {
  console.log(state.value);
});

toggleService.send('TOGGLE');
// => logs 'active'

toggleService.send('TOGGLE');
// => logs 'inactive'

toggleService.stop();

function useMachineState(machine) {
  const ref = React.useRef();

  if (!ref.current) {
    ref.current = machine;
  }

  const [state, setState] = React.useState(ref.current.initialState);

  React.useEffect(() => {
    ref.current = machine;
    setState(ref.current.initialState);
  }, [machine]);

  const facade = React.memo(
    () => ({
      value: state.value,
      context: state.context,
      transition: (type, context) => setState(machine.transition(state, event)),
      is: state.matches.bind(state),
    }),
    [state],
  );

  return facade;
}

const state = useMachineState(DoYouUseMachine);

const component = state;

state.context.component;

const ProductSearchState = createMachine({
  id: 'ProductSearchComponent',
  initial: 'search',
  states: {
    search: {
      context: {
        product: null,
        component: 'Search',
      },
      on: {
        NEW_PRODUCT: 'newProduct',
      },
    },
    newProduct: {
      context: {
        component: 'NewProduct',
      }
    },
    productSelected: {
      context: {
        component: 'SeletedProduct',
      }
    },
  },
  on: {
    BACK_TO_SEARCH: 'search',
    PRODUCT_SELECT: assign('productSelected', {
      product: (_, event) => event.product,
    }),
  },
});