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 isNotShowingBestPath = ({ view }) => view !== 'best'
const isNotShowingAllPaths = ({ view }) => view !== 'all'
const isNotShowingEqualSizePaths = ({ view }) => view !== 'equalSize'
const nodeIsNotSelected = ({ selectedNode }) => selectedNode === ''
const nodeIsSelected = ({ selectedNode }) => selectedNode !== ''
  
const findHopsMachine = Machine(
  {
    id: 'findHops',
    initial: 'start',
    context: {
      retries: 0,
      view: 'best',
      selectedNode: ''
    },
    states: {
      start: {
        on: {
          SEARCH: 'searching'
        }
      },
      searching: {
        on: {
          RESOLVE: {
            target: 'results',
            actions: ['onShowResults']
          },
          REJECT: 'failure'
        }
      },
      failure: {
        on: {
          RETRY: {
            target: 'searching',
            actions: assign({
              retries: (context, event) => context.retries + 1
            })
          }
        }
      },
      results: {
        on: {
          SEARCH_AGAIN: 'searching',
          SEARCH_AGAIN_WITH_START: {
            target: 'searching',
            cond: nodeIsSelected
          },
          SEARCH_AGAIN_WITH_END: {
            target: 'searching',
            cond: nodeIsSelected
          }
        },
        type: 'parallel',
        states: {
          search: {
            on: {
              TOGGLE_POPULAR_MOVIES: 'search',
              TOGGLE_POPULAR_ACTORS: 'search'
            }
            // states: {
              
            // }
          },
          graph: {
            type: 'parallel',
            states: {
              view: {
                on: {
                  SHOW_ALL: {
                    target: 'view',
                    cond: isNotShowingAllPaths,
                    actions: ['togglePathView']
                  },
                  SHOW_BEST: {
                    target: 'view',
                    cond: isNotShowingBestPath,
                    actions: ['togglePathView']
                  },
                  SHOW_EQUAL_SIZE: {
                    target: 'view',
                    cond: isNotShowingEqualSizePaths,
                    actions: ['togglePathView']
                  }
                }
              },
              selection: {
                initial: 'unselected',
                on: {
                  SELECT_ACTOR: {
                    target: '.nodeSelected',
                    cond: nodeIsNotSelected,
                    actions: ['selectNode']
                  },
                  SELECT_MOVIE: {
                    target: '.nodeSelected',
                    cond: nodeIsNotSelected,
                    actions: ['selectNode']
                  },
                  CLOSE_DRAWER: {
                    target: '.unselected',
                    cond: nodeIsSelected,
                    actions: ['selectNode']
                  }
                },
                states: {
                  unselected: {},
                  nodeSelected: {}
                }
              }
            }
          }
        }
      }
    }
  },
  {
    actions: {
      togglePathView: assign({
        view: (context, event) => {
          switch (event.type) {
            case 'SHOW_ALL':
              return 'all'
            case 'SHOW_BEST':
              return 'best'
            default:
              return 'equalSize'
          }
        }
      }),
      selectNode: assign({
        selectedNode: (context, event) => {
          switch (event.type) {
            case 'SELECT_ACTOR':
              return 'actor'
            case 'SELECT_MOVIE':
              return 'movie'
            default:
              return ''
          }
        }
      }),
      onShowResults: assign({
        selectedNode: '',
        view: 'best',
        retries: 0
      })
    }
  }
)