setup initial start/loaded actions

src/editor/ReactWebView.ts

@@ -1,6 +1,7 @@
 import * as path from 'path'
 import * as CR from 'typings'
 import * as vscode from 'vscode'
+import {tutorialModel} from '../extension'
 
 const getNonce = (): string => {
 	let text = ''
@@ -44,6 +45,10 @@ class ReactWebView {
 				case 'TUTORIAL_START':
 					console.log('TUTORIAL_START called')
 					console.log(action)
+					if (typeof action === 'string' || !action.payload || !action.payload.id) {
+						throw new Error('No tutorial id on tutorial start action')
+					}
+					tutorialModel.launch(action.payload.id)
 					break
 				// add other cases
 				default:

src/services/tutorial/index.ts

@@ -1,6 +1,7 @@
 import * as G from 'typings/graphql'
 import * as CR from 'typings'
 import * as git from '../../services/git'
+import {machine} from '../../extension'
 import * as storage from '../storage'
 import api from '../api'
 import tutorialQuery from '../../services/api/gql/getTutorial'
@@ -60,13 +61,16 @@ class Tutorial implements TutorialModel {
 		// })
 
 	}
-	public async launch(tutorialId: string) {
+	public launch = async (tutorialId: string) => {
 		console.log('launch tutorial')
+		machine.send('TUTORIAL_START')
 
 		const {tutorial}: {tutorial: G.Tutorial | null} = await api.request(tutorialQuery, {
 			tutorialId, // TODO: add selection of tutorial id
 		})
 
+		console.log('tutorial', tutorial)
+
 		if (!tutorial) {
 			throw new Error(`Tutorial ${tutorialId} not found`)
 		}
@@ -83,6 +87,8 @@ class Tutorial implements TutorialModel {
 		}
 		// version containing level data
 		this.version = tutorial.version
+		console.log('version', this.version)
+
 		// set initial position
 		this.position = {
 			levelId: this.version.levels[0].id,
@@ -112,7 +118,9 @@ class Tutorial implements TutorialModel {
 			storage.setPosition(this.position),
 			storage.setProgress(this.progress)
 		])
-		// machine.send('TUTORIAL_LOADED')
+
+		console.log('tutorial loaded')
+		machine.send('TUTORIAL_LOADED')
 	}
 
 	public async hasExisting(): Promise<boolean> {

web-app/src/App.tsx

@@ -4,6 +4,7 @@ import * as CR from 'typings'
 
 import client from './services/apollo'
 import { SET_STATUS } from './services/apollo/mutations'
+import currentTutorial from './services/current'
 import Debugger from './components/Debugger'
 import Routes from './Routes'
 import { send } from './utils/vscode'
@@ -39,11 +40,15 @@ const App = () => {
 
 			} else if (message.type === 'SET_DATA') {
 				// SET_DATA - set state machine context
-				const { progress, position } = message.payload.data
+				console.log('DATA')
+				const { progress, position } = message.payload
 				if (process.env.REACT_APP_DEBUG) {
 					console.log(`Position: ${position.levelId}/${position.stageId}/${position.stepId}`)
 					setDebuggerInfo({ progress, position })
 				}
+				console.log('set currentTutorial')
+				currentTutorial.set({ position })
+				console.log('setStatus')
 				setStatus({ variables: { progress, position } })
 			}
 		}

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

@@ -1,5 +1,6 @@
 import * as React from 'react'
 
+import currentTutorial from '../../../services/current'
 import * as CR from 'typings'
 import * as T from 'typings/graphql'
 import TutorialItem from './TutorialItem'
@@ -10,25 +11,31 @@ interface Props {
 }
 
 const TutorialList = (props: Props) => {
-	const onSelect = (tutorial: T.Tutorial) => props.onNew({
-		type: 'TUTORIAL_START',
-		payload: {
-			id: tutorial.id,
-			version: tutorial.version,
-		}
-	})
+	const onSelect = (tutorial: T.Tutorial) => {
+		currentTutorial.set({
+			tutorialId: tutorial.id,
+			version: tutorial.version.version,
+		})
+		props.onNew({
+			type: 'TUTORIAL_START',
+			payload: {
+				id: tutorial.id,
+				version: tutorial.version.version,
+			}
+		})
+	}
 	return (
-  <div>
-    {props.tutorialList.map((tutorial: T.Tutorial) => (
-      <TutorialItem
-        key={tutorial.id}
-        onSelect={() => onSelect(tutorial)}
-        title={tutorial.title || ''}
-        text={tutorial.text || ''}
-      />
-    ))}
-  </div>
-)
-		}
+		<div>
+			{props.tutorialList.map((tutorial: T.Tutorial) => (
+				<TutorialItem
+					key={tutorial.id}
+					onSelect={() => onSelect(tutorial)}
+					title={tutorial.title || ''}
+					text={tutorial.text || ''}
+				/>
+			))}
+		</div>
+	)
+}
 
 export default TutorialList

web-app/src/containers/Tutorial/LevelPage/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { useQuery } from '@apollo/react-hooks'
 import * as T from 'typings/graphql'
 
+import currentTutorial from '../../../services/current'
 import ErrorView from '../../../components/Error'
 import Level from './Level'
 import queryLevel from './queryLevel'
@@ -26,11 +27,12 @@ interface ContainerProps {
 }
 
 const LevelSummaryPageContainer = (props: ContainerProps) => {
+	const { tutorialId, version, position: { levelId } } = currentTutorial.get()
   const { loading, error, data } = useQuery(queryLevel, {
     variables: {
-      tutorialId: '1',
-      version: '0.1.0',
-      levelId: '1',
+      tutorialId,
+      version,
+      levelId,
     },
   })
 

web-app/src/containers/Tutorial/StagePage/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { useQuery } from '@apollo/react-hooks'
 
+import currentTutorial from '../../../services/current'
 import ErrorView from '../../../components/Error'
 import Stage from './Stage'
 import queryStage from './queryStage'
@@ -10,11 +11,12 @@ interface PageProps {
 }
 
 const StageSummaryPageContainer = (props: PageProps) => {
+	const { tutorialId, version, position: { stageId } } = currentTutorial.get()
   const { loading, error, data } = useQuery(queryStage, {
     variables: {
-      tutorialId: '1',
-      version: '0.1.0',
-      stageId: '1',
+      tutorialId,
+      version,
+      stageId,
     },
   })
   if (loading) {

web-app/src/containers/Tutorial/SummaryPage/index.tsx

@@ -3,16 +3,18 @@ import { useQuery } from '@apollo/react-hooks'
 
 import querySummary from './querySummary'
 import Summary from './Summary'
+import currentTutorial from '../../../services/current'
 import ErrorView from '../../../components/Error'
 
 interface PageProps {
   send(action: string): void
 }
 
 const SummaryPage = (props: PageProps) => {
+	const { tutorialId } = currentTutorial.get()
   const { loading, error, data } = useQuery(querySummary, {
     variables: {
-      tutorialId: '1',
+      tutorialId,
     },
   })
 

web-app/src/services/current/index.ts

@@ -0,0 +1,38 @@
+import * as CR from 'typings'
+
+interface CurrentTutorialParams {
+	tutorialId: string
+	version: string
+	position: CR.Position
+}
+
+interface SetCurrentTutorialParams {
+	tutorialId?: string
+	version?: string
+	position?: CR.Position
+}
+
+class CurrentTutorial {
+	private tutorialId = ''
+	private version = ''
+	private position: CR.Position = {levelId: '', stageId: '', stepId: ''}
+	public set({tutorialId, version, position}: SetCurrentTutorialParams) {
+		this.tutorialId = tutorialId || this.tutorialId
+		this.version = version || this.version
+		this.position = position || this.position
+	}
+	public get(): CurrentTutorialParams {
+		return {
+			tutorialId: this.tutorialId,
+			version: this.version,
+			position: this.position,
+		}
+	}
+	public clear() {
+		this.tutorialId = ''
+		this.version = ''
+		this.position = {levelId: '', stageId: '', stepId: ''}
+	}
+}
+
+export default new CurrentTutorial()