Jan 31, 2020 · Jan 27, 2020 · Jan 27, 2020 · Jan 29, 2020 · Jan 29, 2020 · Jan 29, 2020
diff --git a/src/channel/index.ts b/src/channel/index.ts
    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: {
diff --git a/typings/index.d.ts b/typings/index.d.ts
      states: {
        Startup: {}
        Authenticate: {}
        Error: {}
        NewOrContinue: {}
        SelectTutorial: {}
        ContinueTutorial: {}
        Initialize: {}
        Summary: {}
        LoadNext: {}
        Error: {}
        Level: {
          states: {
            Load: {}
diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx
 import * as React from 'react'
 import * as CR from 'typings'
 importRouter from './components/Router'
 importuseRouter from './components/Router'
 import Workspace from './components/Workspace'
 import ContinuePage from './containers/Continue'
 import LoadingPage from './containers/LoadingPage'
 import CompletedPage from './containers/Tutorial/CompletedPage'
 import LevelSummaryPage from './containers/Tutorial/LevelPage'

 const { Route } = Router

 const tempSend = (action: any) => console.log('sent')

 const Routes = () => {
  const { context, send, Router, Route } = useRouter()
  // TODO refactor for typescript to understand send & context passed into React.cloneElement's
  return (
    <Workspace>
      <Router>
        <Route path={['Start.Startup', 'Start.Authenticate', 'Start.NewOrContinue']}>
          <LoadingPage text="Launching..." context={{} as CR.MachineContext} />
          <LoadingPage text="Launching..." context={context} />
        </Route>
        <Route path={'Start.Error'}>
          <div>Something went wrong wrong</div>
        </Route>
        <Route path="Start.SelectTutorial">
          <NewPage send={tempSend} context={{} as CR.MachineContext} />
          <NewPage send={send} context={context} />
        </Route>
        <Route path="Start.ContinueTutorial">
          <ContinuePage send={tempSend} context={{} as CR.MachineContext} />
          <ContinuePage send={send} context={context} />
        </Route>
        <Route path={'Tutorial.Error'}>
          <div>Something went wrong wrong</div>
        </Route>
        <Route path="Tutorial.Initialize">
          <LoadingPage text="Initializing..." context={{} as CR.MachineContext} />
          <LoadingPage text="Initializing..." context={context} />
        </Route>
        <Route path="Tutorial.LoadNext">
          <LoadingPage text="Loading..." context={{} as CR.MachineContext} />
          <LoadingPage text="Loading..." context={context} />
        </Route>
        <Route path="Tutorial.Summary">
          <OverviewPage send={tempSend} context={{} as CR.MachineContext} />
          <OverviewPage send={send} context={context} />
        </Route>
        <Route path="Tutorial.Level">
          <LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />
          <LevelSummaryPage send={send} context={context} />
        </Route>
        <Route path="Tutorial.Completed">
          <CompletedPage send={tempSend} context={{} as CR.MachineContext} />
          <CompletedPage send={send} context={context} />
        </Route>
      </Router>
    </Workspace>
diff --git a/web-app/src/components/Error/index.tsx b/web-app/src/components/Error/index.tsx
    color: '#D8000C',
    backgroundColor: '#FFBABA',
    padding: '1rem',
    width: '100%',
    height: '100%',
  },
 }

 interface Props {
  error: ApolloError
  error?: ApolloError
 }

 const ErrorView = ({ error }: Props) => {
  // log error
  React.useEffect(() => {
    console.log(error)
    onError(error)
    if (error) {
      console.log(error)
      onError(error)
    }
  }, [])

  if (!error) {
    return null
  }

  return (
    <div css={styles.container}>
      <h1>Error</h1>
diff --git a/web-app/src/components/Router/index.tsx b/web-app/src/components/Router/index.tsx
 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'

 interface Props {
  children: any
 }

 interface CloneElementProps {
  context: CR.MachineContext
  send(action: CR.Action): void
 }
 declare let acquireVsCodeApi: any

 // 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:'),
    },
  })
 const editor = acquireVsCodeApi()

  channel.setMachineSend(send)
 // router finds first state match of <Route path='' />
 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<CloneElementProps>(child.props.children, { send, context: state.context })
      return debuggerWrapper(element, state)
  }, [])

  const Router = ({ children }: Props): React.ReactElement<any> | 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 defaultRouter
 export defaultuseRouter
diff --git a/web-app/src/containers/New/NewPage.tsx b/web-app/src/containers/New/NewPage.tsx
 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'
 }

 interface Props {
  send(action: T.Action): void
  tutorialList: G.Tutorial[]
 }

    <div css={styles.banner}>
      <span>Select a Tutorial to Start</span>
    </div>
    <TutorialList tutorialList={props.tutorialList} />
    <TutorialList tutorialList={props.tutorialList}send={props.send}/>
  </div>
 )

diff --git a/web-app/src/containers/New/TutorialList/index.tsx b/web-app/src/containers/New/TutorialList/index.tsx
 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
    return null
  }

  return <NewPage tutorialList={data.tutorials} />
  return <NewPage tutorialList={data.tutorials}send={props.send}/>
 }

 export default NewPageContainer
diff --git a/web-app/src/services/channel/index.ts b/web-app/src/services/channel/index.ts
diff --git a/web-app/src/services/channel/mock.ts b/web-app/src/services/channel/mock.ts
diff --git a/web-app/src/services/channel/receiver.ts b/web-app/src/services/channel/receiver.ts
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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: {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -63,6 +63,7 @@ export interface MachineStateSchema {
		states: {
		Startup: {}
		Authenticate: {}
		Error: {}
		NewOrContinue: {}
		SelectTutorial: {}
		ContinueTutorial: {}
Expand All		@@ -73,6 +74,7 @@ export interface MachineStateSchema {
		Initialize: {}
		Summary: {}
		LoadNext: {}
		Error: {}
		Level: {
		states: {
		Load: {}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		import * as React from 'react'
		import * as CR from 'typings'
		importRouter from './components/Router'
		importuseRouter from './components/Router'
		import Workspace from './components/Workspace'
		import ContinuePage from './containers/Continue'
		import LoadingPage from './containers/LoadingPage'
Expand All		@@ -9,38 +9,41 @@ import OverviewPage from './containers/Overview'
		import CompletedPage from './containers/Tutorial/CompletedPage'
		import LevelSummaryPage from './containers/Tutorial/LevelPage'

		const { Route } = Router

		const tempSend = (action: any) => console.log('sent')

		const Routes = () => {
		const { context, send, Router, Route } = useRouter()
		// TODO refactor for typescript to understand send & context passed into React.cloneElement's
		return (
		<Workspace>
		<Router>
		<Route path={['Start.Startup', 'Start.Authenticate', 'Start.NewOrContinue']}>
		<LoadingPage text="Launching..." context={{} as CR.MachineContext} />
		<LoadingPage text="Launching..." context={context} />
		</Route>
		<Route path={'Start.Error'}>
		<div>Something went wrong wrong</div>
		</Route>
		<Route path="Start.SelectTutorial">
		<NewPage send={tempSend} context={{} as CR.MachineContext} />
		<NewPage send={send} context={context} />
		</Route>
		<Route path="Start.ContinueTutorial">
		<ContinuePage send={tempSend} context={{} as CR.MachineContext} />
		<ContinuePage send={send} context={context} />
		</Route>
		<Route path={'Tutorial.Error'}>
		<div>Something went wrong wrong</div>
		</Route>
		<Route path="Tutorial.Initialize">
		<LoadingPage text="Initializing..." context={{} as CR.MachineContext} />
		<LoadingPage text="Initializing..." context={context} />
		</Route>
		<Route path="Tutorial.LoadNext">
		<LoadingPage text="Loading..." context={{} as CR.MachineContext} />
		<LoadingPage text="Loading..." context={context} />
		</Route>
		<Route path="Tutorial.Summary">
		<OverviewPage send={tempSend} context={{} as CR.MachineContext} />
		<OverviewPage send={send} context={context} />
		</Route>
		<Route path="Tutorial.Level">
		<LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />
		<LevelSummaryPage send={send} context={context} />
		</Route>
		<Route path="Tutorial.Completed">
		<CompletedPage send={tempSend} context={{} as CR.MachineContext} />
		<CompletedPage send={send} context={context} />
		</Route>
		</Router>
		</Workspace>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,20 +9,28 @@ const styles = {
		color: '#D8000C',
		backgroundColor: '#FFBABA',
		padding: '1rem',
		width: '100%',
		height: '100%',
		},
		}

		interface Props {
		error: ApolloError
		error?: ApolloError
		}

		const ErrorView = ({ error }: Props) => {
		// log error
		React.useEffect(() => {
		console.log(error)
		onError(error)
		if (error) {
		console.log(error)
		onError(error)
		}
		}, [])

		if (!error) {
		return null
		}

		return (
		<div css={styles.container}>
		<h1>Error</h1>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,57 +1,70 @@
		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'

		interface Props {
		children: any
		}

		interface CloneElementProps {
		context: CR.MachineContext
		send(action: CR.Action): void
		}
		declare let acquireVsCodeApi: any

		// 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:'),
		},
		})
		const editor = acquireVsCodeApi()

		channel.setMachineSend(send)
		// router finds first state match of <Route path='' />
		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<CloneElementProps>(child.props.children, { send, context: state.context })
		return debuggerWrapper(element, state)
		}, [])

		const Router = ({ children }: Props): React.ReactElement<any> \| 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 defaultRouter
		export defaultuseRouter
Original file line number	Diff line number	Diff line change
		@@ -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'
Expand All		@@ -23,6 +24,7 @@ const styles = {
		}

		interface Props {
		send(action: T.Action): void
		tutorialList: G.Tutorial[]
		}

Expand All		@@ -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>
		)

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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