progress setting up client app

Author: ShMcK

web-app/src/Routes.tsx

@@ -44,13 +44,13 @@ const Routes = () => {
       <Router>
         <Route path="Start.Startup">
           <LoadingPage text="Launching..." />
+        </Route>
+				<Route path="Start.NewTutorial.SelectTutorial">
+          <NewPage />
         </Route>
         <Route path="Start.NewTutorial.InitializeTutorial">
           <LoadingPage text="Launching Tutorial..." />
         </Route>
-        <Route path="Start.NewTutorial.SelectTutorial">
-          <NewPage />
-        </Route>
         <Route path="Start.ContinueTutorial">
           <ContinuePage />
         </Route>

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

@@ -1,6 +1,6 @@
 interface Props {
   children: any
-  path: string
+	path: string
 }
 
 const Route = ({ children }: Props) => children

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

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import * as CR from 'typings'
 import { useMachine } from '@xstate/react'
 import machine from '../../services/state/machine'
 import Debugger from '../Debugger'
@@ -9,8 +10,6 @@ interface Props {
   children: any
 }
 
-{/* {process.env.REACT_APP_DEBUG && <Debugger {...debuggerInfo} />} */}
-
 const wrapDebugger = (element: React.ReactElement, state: any) => {
 	if (process.env.REACT_APP_DEBUG) {
 		return (
@@ -22,19 +21,18 @@ const wrapDebugger = (element: React.ReactElement, state: any) => {
 	return element
 }
 
+interface CloneElementProps {
+	send(action: CR.Action): void
+}
+
 // router finds first state match of <Route path='' />
-const Router = ({ children }: Props) => {
+const Router = ({ children }: Props): React.ReactElement<CloneElementProps>|null => {
 	const [state, send] = useMachine(machine)
 
   const childArray = React.Children.toArray(children)
   for (const child of childArray) {
     if (state.matches(child.props.path)) {
-			let element
-			if (child.props.send) {
-				element = React.cloneElement(child.props.children, { send })
-			} else {
-				element = child.props.children
-			}
+			const element = React.cloneElement<CloneElementProps>(child.props.children, { send })
       return wrapDebugger(element, state)
     }
   }

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

@@ -4,7 +4,6 @@ import * as T from 'typings/graphql'
 import * as CR from 'typings'
 
 import queryTutorials from './queryTutorials'
-import { editorDispatch } from '../../services/vscode'
 import LoadingPage from '../LoadingPage'
 import ErrorView from '../../components/Error'
 import TutorialList from './TutorialList'
@@ -16,26 +15,35 @@ interface Props {
 
 export const NewPage = (props: Props) => (
   <div>
-    <h2>Start a new Project</h2>
+    <h2>Start a New Tutorial</h2>
     <TutorialList tutorialList={props.tutorialList} onNew={props.onNew} />
   </div>
 )
 
 const Loading = () => <LoadingPage text="Loading tutorials" />
 
-const NewPageContainer = () => {
+interface ContainerProps {
+	send?(action: CR.Action): void
+}
+
+const NewPageContainer = (props: ContainerProps) => {
+	console.log('props', props)
   const { data, loading, error } = useQuery(queryTutorials)
   if (loading) {
     return <Loading />
   }
 
   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={editorDispatch} tutorialList={data.tutorials} />
+    	<NewPage onNew={send} tutorialList={data.tutorials} />
     </React.Suspense>
   )
 }

web-app/src/services/state/actions/index.ts

@@ -8,14 +8,16 @@ import {send} from 'xstate'
 
 
 export default {
-	async newOrContinue() {
+	newOrContinue: send((context): 'NEW' | 'CONTINUE' => {
 		console.log('new or continue')
-		// verify that the user has an existing tutorial to continue
 
-		// TODO: verify continue or new
+		// TODO: verify that the user has an existing tutorial to continue
 		const hasExistingTutorial: boolean = false
-		send(hasExistingTutorial ? 'CONTINUE' : 'NEW')
-	},
+		return hasExistingTutorial ? 'CONTINUE' : 'NEW'
+	}),
+	tutorialStart() {
+		console.log('start')
+	}
 }
 
 // export default {
@@ -30,9 +32,19 @@ export default {
 // 		// const codingLanguage: G.EnumCodingLanguage = result.data.codingLanguage
 // 		// editorDispatch('coderoad.test_runner_setup', codingLanguage)
 // 	},
-// 	initializeNewTutorial: () => {
-// 		console.log('initializeNewTutorial')
+// initializeNewTutorial: assign({
+// 	position: (context: any): CR.Position => {
+// 		const { tutorial } = context
+// 		const levelId = data.summary.levelList[0]
+// 		const stageId = data.levels[levelId].stageList[0]
+// 		const stepId = data.stages[stageId].stepList[0]
+// 		return {
+// 			levelId,
+// 			stageId,
+// 			stepId,
+// 		}
 // 	},
+// })
 // 	tutorialContinue() {
 // 		console.log('tutorial continue')
 // 	},

web-app/src/services/state/machine.ts

@@ -28,6 +28,7 @@ export const machine = Machine<{}, CR.MachineStateSchema, CR.MachineEvent>(
 								},
 							},
 							InitializeTutorial: {
+								onEntry: ['tutorialStart'],
 								on: {
 									TUTORIAL_LOADED: '#tutorial',
 								},