replace client channel

Author: ShMcK

src/channel/index.ts

@@ -40,7 +40,7 @@ class Channel implements Channel {
     const onError = (error: T.ErrorMessage) => this.send({ type: 'ERROR', payload: { error } })
 
     switch (actionType) {
-      case 'ENV_GET':
+      case 'EDITOR_ENV_GET':
         this.send({
           type: 'ENV_LOAD',
           payload: {

typings/index.d.ts

@@ -63,6 +63,7 @@ export interface MachineStateSchema {
       states: {
         Startup: {}
         Authenticate: {}
+        Error: {}
         NewOrContinue: {}
         SelectTutorial: {}
         ContinueTutorial: {}

web-app/src/Routes.tsx

@@ -21,6 +21,9 @@ const Routes = () => {
         <Route path={['Start.Startup', 'Start.Authenticate', 'Start.NewOrContinue']}>
           <LoadingPage text="Launching..." context={{} as CR.MachineContext} />
         </Route>
+        <Route path={'Start.Error'}>
+          <div>Error</div>
+        </Route>
         <Route path="Start.SelectTutorial">
           <NewPage send={tempSend} context={{} as CR.MachineContext} />
         </Route>

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

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import * as CR from 'typings'
-import channel from '../../services/channel'
-import messageBusReceiver from '../../services/channel/receiver'
-import machine from '../../services/state/machine'
+import { createMachine } from '../../services/state/machine'
 import { useMachine } from '../../services/xstate-react'
 import debuggerWrapper from '../Debugger/debuggerWrapper'
 import Route from './Route'
@@ -17,38 +15,43 @@ interface CloneElementProps {
   send(action: CR.Action): void
 }
 
+declare let acquireVsCodeApi: any
+
+const editor = acquireVsCodeApi()
+
 // router finds first state match of <Route path='' />
 const Router = ({ children }: Props): React.ReactElement<CloneElementProps> | null => {
-  const [state, send] = useMachine(machine, {
-    interpreterOptions: {
-      logger: console.log.bind('XSTATE:'),
-    },
-  })
-
-  channel.setMachineSend(send)
-
-  // event bus listener
-  React.useEffect(messageBusReceiver, [])
-
-  const childArray = React.Children.toArray(children)
-  for (const child of childArray) {
-    const { path } = child.props
-    let pathMatch
-    if (typeof path === 'string') {
-      pathMatch = state.matches(path)
-    } else if (Array.isArray(path)) {
-      pathMatch = path.some(p => state.matches(p))
-    } else {
-      throw new Error(`Invalid route path ${JSON.stringify(path)}`)
-    }
-    if (pathMatch) {
-      const element = React.cloneElement<CloneElementProps>(child.props.children, { send, context: state.context })
-      return debuggerWrapper(element, state)
-    }
-  }
-  const message = `No Route matches for ${JSON.stringify(state)}`
-  onError(new Error(message))
-  console.warn(message)
+  // const [state, send] = useMachine(createMachine({ editorSend: editor.postMessage }))
+
+  // // event bus listener
+  // React.useEffect(() => {
+  //   const listener = 'message'
+  //   window.addEventListener(listener, send)
+  //   return () => {
+  //     window.removeEventListener(listener, send)
+  //   }
+  // }, [])
+
+  // const childArray = React.Children.toArray(children)
+  // for (const child of childArray) {
+  //   const { path } = child.props
+  //   let pathMatch
+  //   if (typeof path === 'string') {
+  //     pathMatch = state.matches(path)
+  //   } else if (Array.isArray(path)) {
+  //     pathMatch = path.some(p => state.matches(p))
+  //   } else {
+  //     throw new Error(`Invalid route path ${JSON.stringify(path)}`)
+  //   }
+  //   if (pathMatch) {
+  //     // @ts-ignore
+  //     const element = React.cloneElement<CloneElementProps>(child.props.children, { send, context: state.context })
+  //     return debuggerWrapper(element, state)
+  //   }
+  // }
+  // const message = `No Route matches for ${JSON.stringify(state)}`
+  // onError(new Error(message))
+  // console.warn(message)
   return null
 }
 

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

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import * as T from 'typings'
 import * as G from 'typings/graphql'
 import { css, jsx } from '@emotion/core'
 import TutorialList from './TutorialList'
@@ -23,6 +24,7 @@ const styles = {
 }
 
 interface Props {
+  send(action: T.Action): void
   tutorialList: G.Tutorial[]
 }
 
@@ -34,7 +36,7 @@ const NewPage = (props: Props) => (
     <div css={styles.banner}>
       <span>Select a Tutorial to Start</span>
     </div>
-    <TutorialList tutorialList={props.tutorialList} />
+    <TutorialList tutorialList={props.tutorialList} send={props.send} />
   </div>
 )
 

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

@@ -1,15 +1,16 @@
 import * as React from 'react'
+import * as T from 'typings'
 import * as G from 'typings/graphql'
-import channel from '../../../services/channel'
 import TutorialItem from './TutorialItem'
 
 interface Props {
+  send(action: T.Action): void
   tutorialList: G.Tutorial[]
 }
 
 const TutorialList = (props: Props) => {
   const onSelect = (tutorial: G.Tutorial) => {
-    channel.machineSend({
+    props.send({
       type: 'TUTORIAL_START',
       payload: {
         tutorial,

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

@@ -31,7 +31,7 @@ const NewPageContainer = (props: ContainerProps) => {
     return null
   }
 
-  return <NewPage tutorialList={data.tutorials} />
+  return <NewPage tutorialList={data.tutorials} send={props.send} />
 }
 
 export default NewPageContainer