cleanup senders

Author: ShMcK

web-app/src/App.tsx

@@ -1,44 +1,13 @@
 import * as React from 'react'
 import { ApolloProvider } from '@apollo/react-hooks'
-import * as CR from 'typings'
 
 import client from './services/apollo'
-import currentTutorial from './services/current'
 import Routes from './Routes'
-
-interface ReceivedEvent {
-  data: CR.Action
-}
+import messageBusReceiver from './services/channel/receiver'
 
 const App = () => {
-
   // event bus listener
-  React.useEffect(() => {
-		// update state based on response from editor
-		const handleEvent = (event: ReceivedEvent): void => {
-			const message = event.data
-			// messages from core
-	
-		 if (message.type === 'SET_DATA') {
-				// SET_DATA - set state machine context
-				console.log('SET_DATA updated')
-				const { progress, position } = message.payload
-				if (process.env.REACT_APP_DEBUG) {
-					console.log(`Position: ${position.levelId}/${position.stageId}/${position.stepId}`)
-					// setDebuggerInfo({ progress, position })
-				}
-				console.log('set currentTutorial')
-				currentTutorial.set({ position, progress })
-
-			}
-		}
-
-    const listener = 'message'
-    window.addEventListener(listener, handleEvent)
-    return () => {
-      window.removeEventListener(listener, handleEvent)
-    }
-  }, [])
+  React.useEffect(messageBusReceiver, [])
 
   return (
     <ApolloProvider client={client}>

web-app/src/Routes.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { editorDispatch } from './services/vscode'
+// import { editorDispatch } from './services/vscode'
 
 import Router from './components/Router'
 import LoadingPage from './containers/LoadingPage'
@@ -19,6 +19,8 @@ const styles = {
   },
 }
 
+const tempSend = (action: any) => console.log('sent')
+
 const Routes = () => {
   const [dimensions, setDimensions] = React.useState({
     width: window.innerWidth - 20,
@@ -46,7 +48,7 @@ const Routes = () => {
           <LoadingPage text="Launching..." />
         </Route>
 				<Route path="Start.NewTutorial.SelectTutorial">
-          <NewPage />
+          <NewPage send={tempSend}/>
         </Route>
         <Route path="Start.NewTutorial.InitializeTutorial">
           <LoadingPage text="Launching Tutorial..." />
@@ -61,13 +63,13 @@ const Routes = () => {
         	<LoadingPage text="Loading..." />
 				</Route>
 				<Route path="Tutorial.Summary">
-					<SummaryPage send={editorDispatch} />
+					<SummaryPage send={tempSend}/>
 				</Route>
 				<Route path="Tutorial.Level">
-					<LevelSummaryPage send={editorDispatch} />
+					<LevelSummaryPage send={tempSend} />
 				</Route>
 				<Route path="Tutorial.Stage">
-					<StageSummaryPage send={editorDispatch} />
+					<StageSummaryPage send={tempSend} />
 				</Route>
 				<Route path="Tutorial.Completed">
 					<CompletedPage />

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

@@ -23,7 +23,7 @@ export const NewPage = (props: Props) => (
 const Loading = () => <LoadingPage text="Loading tutorials" />
 
 interface ContainerProps {
-	send?(action: CR.Action): void
+	send(action: CR.Action): void
 }
 
 const NewPageContainer = (props: ContainerProps) => {
@@ -36,14 +36,10 @@ const NewPageContainer = (props: ContainerProps) => {
   if (error) {
     return <ErrorView error={error} />
 	}
-	
-	// TODO: cleanup React.cloneElement props issue
-	const sendFallback = (action: CR.Action) => console.log('Cannot send')
-	const send = props.send || sendFallback
 
   return (
     <React.Suspense fallback={Loading}>
-    	<NewPage onNew={send} tutorialList={data.tutorials} />
+    	<NewPage onNew={props.send} tutorialList={data.tutorials} />
     </React.Suspense>
   )
 }

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

@@ -0,0 +1,42 @@
+import {Action} from 'typings'
+
+declare var acquireVsCodeApi: any
+
+// @ts-ignore
+if (!window.acquireVsCodeApi) {
+	require('./mock')
+}
+
+const channel = acquireVsCodeApi()
+
+
+// Send to Editor
+export const send = (action: Action) => {
+	return channel.postMessage(action)
+}
+
+interface ReceivedEvent {
+	data: Action
+}
+
+// Receive from Editor
+export const receive = (event: ReceivedEvent): void => {
+
+	const message = event.data
+	console.log('message', message)
+	// messages from core
+
+	// if (message.type === 'SET_DATA') {
+	// 	// SET_DATA - set state machine context
+	// 	console.log('SET_DATA updated')
+	// 	const {progress, position} = message.payload
+	// 	if (process.env.REACT_APP_DEBUG) {
+	// 		console.log(`Position: ${position.levelId}/${position.stageId}/${position.stepId}`)
+	// 		// setDebuggerInfo({ progress, position })
+	// 	}
+	// 	console.log('set currentTutorial')
+	// 	// currentTutorial.set({position, progress})
+
+	// }
+}
+

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

@@ -0,0 +1,9 @@
+import {receive} from './index'
+
+// mock vscode from client side development
+// @ts-ignore
+window.acquireVsCodeApi = () => ({
+	postMessage(event: string) {
+		console.log('postMessage', event)
+	}
+})

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

@@ -0,0 +1,12 @@
+import {receive} from './index'
+
+const messageBusReceiver = () => {
+	// update state based on response from editor
+	const listener = 'message'
+	window.addEventListener(listener, receive)
+	return () => {
+		window.removeEventListener(listener, receive)
+	}
+}
+
+export default messageBusReceiver