cleanup router code

web-app/src/Routes.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as CR from 'typings'
-import Router from './components/Router'
+import useRouter from './components/Router'
 import Workspace from './components/Workspace'
 import ContinuePage from './containers/Continue'
 import LoadingPage from './containers/LoadingPage'
@@ -9,44 +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>

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

@@ -2,7 +2,6 @@ import * as React from 'react'
 import * as CR from 'typings'
 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'
 
@@ -20,7 +19,7 @@ declare let acquireVsCodeApi: any
 const editor = acquireVsCodeApi()
 
 // router finds first state match of <Route path='' />
-const Router = ({ children }: Props): React.ReactElement<CloneElementProps> | null => {
+const useRouter = () => {
   const [state, send] = useMachine(createMachine({ editorSend: editor.postMessage }))
 
   // event bus listener
@@ -42,29 +41,36 @@ const Router = ({ children }: Props): React.ReactElement<CloneElementProps> | nu
     }
   }, [])
 
-  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 Router = ({ children }: Props): React.ReactElement<CloneElementProps> | 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