Error
diff --git a/web-app/src/components/Router/index.tsx b/web-app/src/components/Router/index.tsx
index 3d7023d9..0e06bb0e 100644
--- a/web-app/src/components/Router/index.tsx
+++ b/web-app/src/components/Router/index.tsx
@@ -1,10 +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'
import onError from '../../services/sentry/onError'
@@ -12,46 +8,63 @@ interface Props {
children: any
}
-interface CloneElementProps {
- context: CR.MachineContext
- send(action: CR.Action): void
-}
+declare let acquireVsCodeApi: any
-// router finds first state match of
-const Router = ({ children }: Props): React.ReactElement
| null => {
- const [state, send] = useMachine(machine, {
- interpreterOptions: {
- logger: console.log.bind('XSTATE:'),
- },
- })
+const editor = acquireVsCodeApi()
- channel.setMachineSend(send)
+// router finds first state match of
+const useRouter = () => {
+ const [state, send] = useMachine(createMachine({ editorSend: editor.postMessage }))
// 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)}`)
+ React.useEffect(() => {
+ const listener = 'message'
+ // propograte channel event to state machine
+ const handler = (action: any) => {
+ // NOTE: must call event.data, cannot destructure. VSCode acts odd
+ const event = action.data
+ // ignore browser events from plugins
+ if (event.source) {
+ return
+ }
+ send(event)
+ }
+ window.addEventListener(listener, handler)
+ return () => {
+ window.removeEventListener(listener, handler)
}
- if (pathMatch) {
- const element = React.cloneElement(child.props.children, { send, context: state.context })
- return debuggerWrapper(element, state)
+ }, [])
+
+ const Router = ({ children }: Props): React.ReactElement | null => {
+ const childArray = React.Children.toArray(children)
+ for (const child of childArray) {
+ // match path
+ 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
+ return child.props.children
+ }
}
+ const message = `No Route matches for ${JSON.stringify(state)}`
+ onError(new Error(message))
+ console.warn(message)
+ return null
}
- const message = `No Route matches for ${JSON.stringify(state)}`
- onError(new Error(message))
- console.warn(message)
- return null
-}
-Router.Route = Route
+ return {
+ context: state.context,
+ send,
+ Router,
+ Route,
+ }
+}
-export default Router
+export default useRouter
diff --git a/web-app/src/containers/New/NewPage.tsx b/web-app/src/containers/New/NewPage.tsx
index b2eb55a1..73bbc444 100644
--- a/web-app/src/containers/New/NewPage.tsx
+++ b/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) => (
Select a Tutorial to Start
-
+
)
diff --git a/web-app/src/containers/New/TutorialList/index.tsx b/web-app/src/containers/New/TutorialList/index.tsx
index f337d5ca..78223e66 100644
--- a/web-app/src/containers/New/TutorialList/index.tsx
+++ b/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,
diff --git a/web-app/src/containers/New/index.tsx b/web-app/src/containers/New/index.tsx
index 74472c8a..40385fd5 100644
--- a/web-app/src/containers/New/index.tsx
+++ b/web-app/src/containers/New/index.tsx
@@ -31,7 +31,7 @@ const NewPageContainer = (props: ContainerProps) => {
return null
}
- return