cleanup debugger wrapper

Author: ShMcK

web-app/src/App.tsx

@@ -3,17 +3,11 @@ import { ApolloProvider } from '@apollo/react-hooks'
 
 import client from './services/apollo'
 import Routes from './Routes'
-import messageBusReceiver from './services/channel/receiver'
 
-const App = () => {
-  // event bus listener
-  React.useEffect(messageBusReceiver, [])
-
-  return (
-    <ApolloProvider client={client}>
-      <Routes />
-    </ApolloProvider>
-  )
-}
+const App = () => (
+	<ApolloProvider client={client}>
+		<Routes />
+	</ApolloProvider>
+)
 
 export default App

web-app/src/Routes.tsx

@@ -22,27 +22,27 @@ const styles = {
 const tempSend = (action: any) => console.log('sent')
 
 const Routes = () => {
-  const [dimensions, setDimensions] = React.useState({
-    width: window.innerWidth - 20,
-    height: window.innerHeight - 20,
-  })
+  // const [dimensions, setDimensions] = React.useState({
+  //   width: window.innerWidth - 20,
+  //   height: window.innerHeight - 20,
+  // })
 
-  // solution for windows getting off size
-  // without adding multiple listeners
-  React.useEffect(() => {
-    const dimensionsInterval = setInterval(() => {
-      setDimensions({
-        width: window.innerWidth - 20,
-        height: window.innerHeight - 20,
-      })
-    }, 5000)
-    return () => {
-      clearInterval(dimensionsInterval)
-    }
-  }, [])
+  // // solution for windows getting off size
+  // // without adding multiple listeners
+  // React.useEffect(() => {
+  //   const dimensionsInterval = setInterval(() => {
+  //     setDimensions({
+  //       width: window.innerWidth - 20,
+  //       height: window.innerHeight - 20,
+  //     })
+  //   }, 5000)
+  //   return () => {
+  //     clearInterval(dimensionsInterval)
+  //   }
+  // }, [])
 
   return (
-    <div style={{ ...styles.page, ...dimensions }}>
+    <div style={{ ...styles.page }}>
       <Router>
         <Route path="Start.Startup">
           <LoadingPage text="Launching..." />

web-app/src/components/Debugger/debuggerWrapper.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import Debugger from './index'
+import stateToString from './stateToString'
+
+const debuggerWrapper = (element: React.ReactElement, state: any) => {
+	if (process.env.REACT_APP_DEBUG) {
+		return (
+			<Debugger state={stateToString(state.value)}>
+				{element}
+			</Debugger>
+		)
+	}
+	return element
+}
+
+export default debuggerWrapper

web-app/src/components/Router/stateToString.ts renamed to web-app/src/components/Debugger/stateToString.ts

@@ -2,38 +2,33 @@ import * as React from 'react'
 import * as CR from 'typings'
 import { useMachine } from '@xstate/react'
 import machine from '../../services/state/machine'
-import Debugger from '../Debugger'
+
 import Route from './Route'
-import stateToString from './stateToString'
+import debuggerWrapper from '../Debugger/debuggerWrapper'
+import messageBusReceiver from '../../services/channel/receiver'
 
 interface Props {
   children: any
 }
 
-const wrapDebugger = (element: React.ReactElement, state: any) => {
-	if (process.env.REACT_APP_DEBUG) {
-		return (
-			<Debugger state={stateToString(state.value)}>
-				{element}
-			</Debugger>
-		)
-	}
-	return element
-}
-
 interface CloneElementProps {
 	send(action: CR.Action): void
 }
 
 // router finds first state match of <Route path='' />
 const Router = ({ children }: Props): React.ReactElement<CloneElementProps>|null => {
-	const [state, send] = useMachine(machine)
+	const [state, send] = useMachine(machine, {
+		logger: console.log.bind('XSTATE:')
+	})
+
+	// event bus listener
+  React.useEffect(messageBusReceiver, [])
 
   const childArray = React.Children.toArray(children)
   for (const child of childArray) {
     if (state.matches(child.props.path)) {
 			const element = React.cloneElement<CloneElementProps>(child.props.children, { send })
-      return wrapDebugger(element, state)
+      return debuggerWrapper(element, state)
     }
   }
   console.warn(`No Route matches for ${JSON.stringify(state)}`)

web-app/src/components/Router/index.tsx

@@ -27,7 +27,6 @@ interface ContainerProps {
 }
 
 const NewPageContainer = (props: ContainerProps) => {
-	console.log('props', props)
   const { data, loading, error } = useQuery(queryTutorials)
   if (loading) {
     return <Loading />

web-app/src/containers/New/index.tsx

@@ -1,9 +1,11 @@
 import {Action} from 'typings'
+import {send as stateMachineSend} from 'xstate'
 
 declare var acquireVsCodeApi: any
 
 // @ts-ignore
 if (!window.acquireVsCodeApi) {
+	// @ts-ignore
 	require('./mock')
 }
 
@@ -22,9 +24,23 @@ interface ReceivedEvent {
 // Receive from Editor
 export const receive = (event: ReceivedEvent): void => {
 
-	const message = event.data
-	console.log('message', message)
+	const action = event.data
+
+	// @ts-ignore // ignore browser events from plugins
+	if (action.source) {return }
+
+	console.log('receive action', action)
 	// messages from core
+	switch (action.type) {
+		case 'TUTORIAL_LOADED':
+			// send action to state machine
+			stateMachineSend('TUTORIAL_LOADED')
+			console.log(stateMachineSend)
+			console.log('send action to state machine')
+			return
+		default:
+			console.warn(`Unknown received action ${action.type}`, action)
+	}
 
 	// if (message.type === 'SET_DATA') {
 	// 	// SET_DATA - set state machine context

web-app/src/services/channel/index.ts

@@ -1,9 +1,26 @@
+import {Action} from 'typings'
 import {receive} from './index'
 
+const createReceiveEvent = (action: Action) => ({
+	data: action
+})
+
 // mock vscode from client side development
 // @ts-ignore
 window.acquireVsCodeApi = () => ({
-	postMessage(event: string) {
-		console.log('postMessage', event)
+	postMessage(action: Action) {
+		console.log('postMessage', action)
+
+		switch (action.type) {
+			case 'TUTORIAL_START':
+				return setTimeout(() => {
+					const receiveAction: Action = {
+						type: 'TUTORIAL_LOADED'
+					}
+					receive(createReceiveEvent(receiveAction))
+				}, 1000)
+			default:
+				console.warn(`${action.type} not found in post message mock`)
+		}
 	}
 })

web-app/src/services/channel/mock.ts

@@ -1,4 +1,5 @@
 import {send} from 'xstate'
+import * as channel from '../../channel'
 // import {machine} from '../../extension'
 // import {cache} from '../../services/apollo'
 // import {editorDispatch} from '../../services/vscode'
@@ -16,7 +17,14 @@ export default {
 		return hasExistingTutorial ? 'CONTINUE' : 'NEW'
 	}),
 	tutorialStart() {
-		console.log('start')
+		channel.send({
+			type: 'TUTORIAL_START',
+			payload: {
+				tutorial: {
+					id: 'some-tutorial-id'
+				}
+			}
+		})
 	}
 }