heavy refactor

Author: ShMcK

src/editor/commands/index.ts

@@ -4,13 +4,12 @@ import * as G from 'typings/graphql'
 import * as vscode from 'vscode'
 import ReactWebView from '../ReactWebView'
 import storage from '../storage'
-import {isEmptyWorkspace} from '../workspace'
 import runTest from './runTest'
+import {isEmptyWorkspace} from '../workspace'
 
 const COMMANDS = {
 	START: 'coderoad.start',
-	TUTORIAL_LAUNCH: 'coderoad.tutorial_launch',
-	TUTORIAL_SETUP: 'coderoad.tutorial_setup',
+	TEST_RUNNER_SETUP: 'coderoad.test_runner_setup',
 	OPEN_WEBVIEW: 'coderoad.open_webview',
 	SEND_STATE: 'coderoad.send_state',
 	SEND_DATA: 'coderoad.send_data',
@@ -24,7 +23,6 @@ const COMMANDS = {
 interface CreateCommandProps {
 	vscodeExt: vscode.ExtensionContext
 	machine: CR.StateMachine
-	git: any
 }
 
 const resetLayout = () => {
@@ -34,13 +32,15 @@ const resetLayout = () => {
 	})
 }
 
-export const createCommands = ({vscodeExt, machine, git}: CreateCommandProps) => {
+export const createCommands = ({vscodeExt, machine}: CreateCommandProps) => {
 	// React panel webview
 	let webview: any
 
 	return {
 		// initialize
-		[COMMANDS.START]: () => {
+		[COMMANDS.START]: async () => {
+
+			await isEmptyWorkspace()
 
 			let webviewState: 'INITIALIZING' | 'RESTARTING'
 			if (!webview) {
@@ -77,24 +77,7 @@ export const createCommands = ({vscodeExt, machine, git}: CreateCommandProps) =>
 			}
 			webview.createOrShow(column, callback)
 		},
-		// launch a new tutorial
-		// NOTE: may be better to move into action as logic is primarily non-vscode
-		[COMMANDS.TUTORIAL_LAUNCH]: async (repo: G.TutorialRepo) => {
-			console.log('launch tutorial')
-
-			await isEmptyWorkspace()
-
-			await git.gitInitIfNotExists()
-
-			if (!repo || !repo.uri) {
-				throw new Error('Tutorial repo uri not found')
-			}
-
-			await git.gitSetupRemote(repo.uri)
-
-			machine.send('TUTORIAL_LOADED')
-		},
-		[COMMANDS.TUTORIAL_SETUP]: async (codingLanguage: G.EnumCodingLanguage) => {
+		[COMMANDS.TEST_RUNNER_SETUP]: async (codingLanguage: G.EnumCodingLanguage) => {
 
 			// TODO: allow multiple coding languages in a tutorial
 

src/editor/index.ts

@@ -1,7 +1,6 @@
 import * as vscode from 'vscode'
 import * as CR from 'typings'
 import {createCommands} from './commands'
-import * as git from '../services/git'
 
 interface Props {
 	machine: CR.StateMachine
@@ -53,7 +52,6 @@ class Editor {
 		const commands = createCommands({
 			vscodeExt: this.vscodeExt,
 			machine: this.machine,
-			git,
 		})
 		for (const cmd in commands) {
 			const command: vscode.Disposable = vscode.commands.registerCommand(cmd, commands[cmd])

src/editor/storage.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode'
 
-class Storage {
+class EditorStorage {
 	private storage: vscode.Memento
 	constructor() {
 		this.storage = {} as vscode.Memento
@@ -19,4 +19,4 @@ class Storage {
 	}
 }
 
-export default new Storage()
+export default new EditorStorage()

src/services/tutorial/index.ts

@@ -9,7 +9,8 @@ interface TutorialConfig {
 	testRunner: G.EnumTestRunner
 }
 
-interface PositionProgress {
+interface MessageData {
+	tutorial?: {id: string}
 	position: CR.Position
 	progress: CR.Progress
 }
@@ -20,12 +21,11 @@ export interface TutorialModel {
 	version: G.TutorialVersion
 	position: CR.Position
 	progress: CR.Progress
-	init(tutorial: G.Tutorial): void
-	load(tutorialId: string): void
+	launch(tutorialId: string): void
 	level(levelId?: string): G.Level
 	stage(stageId?: string): G.Stage
 	step(stepId?: string): G.Step
-	updateProgress(): PositionProgress
+	updateProgress(): void
 	nextPosition(): CR.Position
 	hasExisting(): Promise<boolean>
 	setClientDispatch(editorDispatch: CR.EditorDispatch): void
@@ -37,11 +37,11 @@ class Tutorial implements TutorialModel {
 	public version: G.TutorialVersion
 	public position: CR.Position
 	public progress: CR.Progress
-	private clientDispatch: (props: PositionProgress) => void
+	private clientDispatch: (props: MessageData) => void
 
 	constructor() {
 		// initialize types, will be assigned when tutorial is selected
-		this.clientDispatch = (props: PositionProgress) => {
+		this.clientDispatch = (props: MessageData) => {
 			throw new Error('Tutorial client dispatch yet initialized')
 		}
 		this.repo = {} as G.TutorialRepo
@@ -62,10 +62,18 @@ class Tutorial implements TutorialModel {
 	}
 
 	public setClientDispatch(editorDispatch: CR.EditorDispatch) {
-		this.clientDispatch = ({progress, position}: PositionProgress) => editorDispatch('coderoad.send_data', {progress, position})
+		this.clientDispatch = ({progress, position}: MessageData) => editorDispatch('coderoad.send_data', {progress, position})
 	}
 
-	public init = (tutorial: G.Tutorial) => {
+	public async launch(tutorialId: string) {
+		const {tutorial}: {tutorial: G.Tutorial | null} = await api.request(tutorialQuery, {
+			tutorialId, // TODO: add selection of tutorial id
+		})
+
+		if (!tutorial) {
+			throw new Error(`Tutorial ${tutorialId} not found`)
+		}
+
 		this.repo = tutorial.repo
 		this.config = {
 			codingLanguage: tutorial.codingLanguage,
@@ -90,6 +98,7 @@ class Tutorial implements TutorialModel {
 		console.log('this.position', JSON.stringify(this.position))
 
 		this.clientDispatch({
+			tutorial: {id: tutorial.id},
 			position: this.position,
 			progress: this.progress
 		})
@@ -111,19 +120,6 @@ class Tutorial implements TutorialModel {
 
 		return !!(tutorial && progress)
 	}
-
-	public async load(tutorialId: string) {
-		// TODO: load from localStorage
-		const {tutorial}: {tutorial: G.Tutorial | null} = await api.request(tutorialQuery, {
-			tutorialId, // TODO: add selection of tutorial id
-		})
-
-		if (!tutorial) {
-			throw new Error(`Tutorial ${tutorialId} not found`)
-		}
-
-		await this.init(tutorial)
-	}
 	public level = (levelId: string): G.Level => {
 		const level: G.Level | undefined = this.version.levels.find((l: G.Level) => l.id === levelId || this.position.levelId)
 		if (!level) {
@@ -147,15 +143,16 @@ class Tutorial implements TutorialModel {
 		}
 		return step
 	}
-	public updateProgress = (): {position: CR.Position, progress: CR.Progress} => {
+	public updateProgress = () => {
 		const {levelId, stageId, stepId} = this.position
 		this.progress.levels[levelId] = true
 		this.progress.stages[stageId] = true
 		this.progress.steps[stepId] = true
-		return {
-			position: this.position,
+
+		this.clientDispatch({
 			progress: this.progress,
-		}
+			position: this.position, // TODO: calculate next position
+		})
 	}
 	public nextPosition = (): CR.Position => {
 		const {levelId, stageId, stepId} = this.position

src/state/actions/index.ts

@@ -1,4 +1,3 @@
-import {assign} from 'xstate'
 // NOTE: codesmell - importing machine
 import {machine} from '../../extension'
 import {TutorialModel} from '../../services/tutorial'
@@ -30,18 +29,33 @@ export default (editorDispatch: CR.EditorDispatch, tutorialModel: TutorialModel)
 	async tutorialLaunch() {
 		const tutorialId: string = '1'
 		// TODO: load tutorialId
-		await tutorialModel.load(tutorialId)
+		await tutorialModel.launch(tutorialId)
+
+		// git setup
 		const repo: G.TutorialRepo = tutorialModel.repo
 
-		editorDispatch('coderoad.tutorial_launch', repo)
+		console.log('launch tutorial')
+
+		await git.gitInitIfNotExists()
+
+		if (!repo || !repo.uri) {
+			throw new Error('Tutorial repo uri not found')
+		}
+
+		await git.gitSetupRemote(repo.uri)
+
+		machine.send('TUTORIAL_LOADED')
 	},
-	tutorialSetup() {
+	testRunnerSetup() {
 		const codingLanguage: G.EnumCodingLanguage = tutorialModel.config.codingLanguage
-		editorDispatch('coderoad.tutorial_setup', codingLanguage)
+		editorDispatch('coderoad.test_runner_setup', codingLanguage)
 	},
 	initializeNewTutorial: () => {
 		console.log('initializeNewTutorial')
 	},
+	tutorialContinue() {
+		console.log('tutorial continue')
+	},
 	// tutorialContinue: assign({
 	// 	// load initial data, progress & position
 	// 	data(): CR.TutorialData {

src/state/machine.ts

@@ -54,7 +54,7 @@ export const machine = (editorDispatch: CR.EditorDispatch, tutorialModel: Tutori
 				Tutorial: {
 					id: 'tutorial',
 					initial: 'Initialize',
-					onEntry: ['tutorialSetup'],
+					onEntry: ['testRunnerSetup'],
 					on: {
 						WEBVIEW_INITIALIZED: '#tutorial-load-next'
 					},

web-app/src/App.tsx

@@ -17,7 +17,10 @@ const App = () => {
 
   // set state machine state
 	const [state, setState] = React.useState(initialState)
-	const [debuggerInfo, setDebuggerInfo] = React.useState({})
+	const [debuggerInfo, setDebuggerInfo] = React.useState({
+		progress: { levels: {}, stages: {}, steps: {}, complete: false},
+		position: { levelId: '', stageId: '', stepId: ''},
+	})
 
 	// update level/stage/step status based on user progress & position
 		// TODO: model server more effeciently
@@ -38,6 +41,7 @@ const App = () => {
 				// SET_DATA - set state machine context
 				const { progress, position } = message.payload.data
 				if (process.env.REACT_APP_DEBUG) {
+					console.log(`Position: ${position.levelId}/${position.stageId}/${position.stepId}`)
 					setDebuggerInfo({ progress, position })
 				}
 				setStatus({ variables: { progress, position } })
@@ -56,15 +60,11 @@ const App = () => {
     send('WEBVIEW_LOADED')
   }, [])
 
-  const value = {
-    state,
-	}
-
   // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
   return (
     <ApolloProvider client={client}>
       <div>
-        {process.env.REACT_APP_DEBUG && <Debugger value={{ ...value, debuggerInfo }} />}
+        {process.env.REACT_APP_DEBUG && <Debugger state={state} {...debuggerInfo} />}
         <Routes state={state} />
       </div>
     </ApolloProvider>

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

@@ -1,15 +1,17 @@
 import * as React from 'react'
+import * as CR from 'typings'
 
 interface Props {
-  value: any
+	state: object
+	position: CR.Position
+	progress: CR.Progress
 }
 
-const Debugger = ({ value }: Props) => (
+const Debugger = ({ state, position, progress }: Props) => (
   <div style={{ backgroundColor: '#FFFF99', color: 'black', padding: '.5rem' }}>
-    <h4>state: {JSON.stringify(value.state)}</h4>
-    <p style={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(value.position)}</p>
-    <p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(value.progress)}</p>
-    <p style={{ backgroundColor: 'papayawhip', padding: '.5rem' }}>data: {JSON.stringify(value.data)}</p>
+    <h4>state: {JSON.stringify(state)}</h4>
+    <p style={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(position)}</p>
+    <p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p>
   </div>
 )