Function useStateMachine

web-app/src/services/state/useStateMachine.tsx:25–57

()

// router finds first state match of <Route path='' />
const useStateMachine = (): Output => {
  const [state, send] = useMachine<T.MachineContext, any>(createMachine({ editorSend }))

  // event bus listener
  React.useEffect(() => {
    const listener = 'message'
    // propagate channel event to state machine
    const handler = (event: any) => {
      // NOTE: must call event.data, cannot destructure. VSCode acts odd
      const action = event.data

      if (action.source !== 'coderoad') {
        // filter out events from other extensions
        return
      }
      send(action)
    }
    window.addEventListener(listener, handler)
    return () => {
      window.removeEventListener(listener, handler)
    }
  }, []) // eslint-disable-line

  // convert route to a string to avoid unnecessary React re-renders on deeply nested objects
  const route = createRouteString(state.value)
  logger(`STATE: "${route}"`)

  return {
    context: state.context,
    route,
    send,
  }
}

export default useStateMachine