Refactor editor dispatch uses

Author: ShMcK

src/extension.ts

@@ -4,22 +4,18 @@ import Tutorial, {TutorialModel} from './services/tutorial'
 import StateMachine from './state'
 import Editor from './editor'
 
-export const tutorial: TutorialModel = new Tutorial()
+export const tutorialModel: TutorialModel = new Tutorial(vscode.commands.executeCommand)
 // state machine that governs application logic
-export const machine = new StateMachine({dispatch: vscode.commands.executeCommand, tutorial})
+export const machine = new StateMachine(tutorialModel, vscode.commands.executeCommand)
 
 // vscode editor
 export const editor = new Editor({
 	machine,
 	setWorkspaceRoot,
 })
 
-// TODO: refactor tutorial & editor relationships
-// code here is a bit smelly
-tutorial.setClientDispatch(editor.dispatch)
-
 // activate run on vscode extension initialization
 export const activate = editor.activate
 
-// deactive run on vscode extension shut down
+// deactivate run on vscode extension shut down
 export const deactivate = editor.deactivate

src/services/git/index.ts

@@ -58,7 +58,7 @@ export async function gitLoadCommits(actions: G.StepActions, editorDispatch: CR.
 			const {stdout, stderr} = await exec(command)
 			if (stderr) {
 				console.error(stderr)
-				// langauge specific error messages from running commands
+				// language specific error messages from running commands
 				for (const message of Object.keys(errorMessages.js)) {
 					if (stderr.match(message)) {
 						// ignored error

src/services/tutorial/index.ts

@@ -9,12 +9,6 @@ interface TutorialConfig {
 	testRunner: G.EnumTestRunner
 }
 
-interface MessageData {
-	tutorial?: {id: string}
-	position: CR.Position
-	progress: CR.Progress
-}
-
 export interface TutorialModel {
 	repo: G.TutorialRepo
 	config: TutorialConfig
@@ -28,7 +22,7 @@ export interface TutorialModel {
 	updateProgress(): void
 	nextPosition(): CR.Position
 	hasExisting(): Promise<boolean>
-	setClientDispatch(editorDispatch: CR.EditorDispatch): void
+	syncClient(): void
 }
 
 class Tutorial implements TutorialModel {
@@ -37,19 +31,21 @@ class Tutorial implements TutorialModel {
 	public version: G.TutorialVersion
 	public position: CR.Position
 	public progress: CR.Progress
-	private clientDispatch: (props: MessageData) => void
+	public syncClient: () => void
 
-	constructor() {
+	constructor(editorDispatch: CR.EditorDispatch) {
 		// initialize types, will be assigned when tutorial is selected
-		this.clientDispatch = (props: MessageData) => {
-			throw new Error('Tutorial client dispatch yet initialized')
-		}
+
 		this.repo = {} as G.TutorialRepo
 		this.config = {} as TutorialConfig
 		this.version = {} as G.TutorialVersion
 		this.position = {} as CR.Position
 		this.progress = {} as CR.Progress
-
+		this.syncClient = () => editorDispatch('coderoad.send_data', {
+			tutorial: {id: this.version.tutorialId},
+			progress: this.progress,
+			position: this.position,
+		})
 		// Promise.all([
 		// 	storage.getTutorial(),
 		// 	storage.getProgress(),
@@ -61,10 +57,6 @@ class Tutorial implements TutorialModel {
 
 	}
 
-	public setClientDispatch(editorDispatch: CR.EditorDispatch) {
-		this.clientDispatch = ({progress, position}: MessageData) => editorDispatch('coderoad.send_data', {progress, position})
-	}
-
 	public async launch(tutorialId: string) {
 		const {tutorial}: {tutorial: G.Tutorial | null} = await api.request(tutorialQuery, {
 			tutorialId, // TODO: add selection of tutorial id
@@ -97,11 +89,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
-		})
+		this.syncClient()
 
 		// set tutorial, position, progress locally
 		// TODO: base position off of progress
@@ -149,10 +137,7 @@ class Tutorial implements TutorialModel {
 		this.progress.stages[stageId] = true
 		this.progress.steps[stepId] = true
 
-		this.clientDispatch({
-			progress: this.progress,
-			position: this.position, // TODO: calculate next position
-		})
+		this.syncClient()
 	}
 	public nextPosition = (): CR.Position => {
 		const {levelId, stageId, stepId} = this.position

src/state/actions/index.ts

@@ -1,12 +1,11 @@
-// NOTE: codesmell - importing machine
 import {machine} from '../../extension'
 import {TutorialModel} from '../../services/tutorial'
 import * as CR from 'typings'
 import * as G from 'typings/graphql'
 import * as git from '../../services/git'
 
 
-export default (editorDispatch: CR.EditorDispatch, tutorialModel: TutorialModel) => ({
+export default (tutorialModel: TutorialModel, editorDispatch: CR.EditorDispatch) => ({
 	createWebview() {
 		editorDispatch('coderoad.open_webview')
 	},

src/state/index.ts

@@ -21,28 +21,31 @@ const stateToString = (state: string | object, str: string = ''): string => {
 	return ''
 }
 
-interface Props {
-	dispatch: CR.EditorDispatch
-	tutorial: TutorialModel
-}
 
 class StateMachine {
-	private dispatch: CR.EditorDispatch
 	private machineOptions = {
 		devTools: true,
 		deferEvents: true,
 		execute: true,
 	}
 	private service: Interpreter<{}, CR.MachineStateSchema, CR.MachineEvent>
-	constructor({dispatch, tutorial}: Props) {
-		this.dispatch = dispatch
-		const machine = createMachine(dispatch, tutorial)
+
+	constructor(tutorialModel: TutorialModel, editorDispatch: CR.EditorDispatch) {
+		const machine = createMachine(tutorialModel, editorDispatch)
+
+		// format state as a string and send it to the client
+		this.syncState = (state: any): void => {
+			const stateValue: CR.MessageState = stateToString(state.value)
+			console.log(`STATE: ${stateValue}`)
+			editorDispatch('send_data', stateValue)
+		}
+
+		// callback on all state changes
 		this.service = interpret(machine, this.machineOptions)
 			// logging
 			.onTransition(state => {
 				if (state.changed) {
-					console.log(`STATE: ${stateToString(state.value)}`)
-					dispatch('coderoad.send_state', {state: state.value})
+					this.syncState(state)
 				}
 			})
 	}
@@ -56,12 +59,14 @@ class StateMachine {
 	public refresh() {
 		console.log('service refresh')
 		console.log(this.service.state)
-		const {value} = this.service.state
-		this.dispatch('coderoad.send_state', {state: value})
+		this.syncState(this.service.state)
 	}
 	public send(action: string | CR.Action) {
 		this.service.send(action)
 	}
+	// @ts-ignore
+	private syncState(state: any): void
+
 }
 
 export default StateMachine

src/state/machine.ts

@@ -5,7 +5,7 @@ import {TutorialModel} from '../services/tutorial'
 import createActions from './actions'
 import createGuards from './guards'
 
-export const machine = (editorDispatch: CR.EditorDispatch, tutorialModel: TutorialModel) =>
+export const machine = (tutorialModel: TutorialModel, editorDispatch: CR.EditorDispatch) =>
 	Machine<{}, CR.MachineStateSchema, CR.MachineEvent>(
 		{
 			id: 'root',
@@ -164,7 +164,7 @@ export const machine = (editorDispatch: CR.EditorDispatch, tutorialModel: Tutori
 			},
 		},
 		{
-			actions: createActions(editorDispatch, tutorialModel),
+			actions: createActions(tutorialModel, editorDispatch),
 			guards: createGuards(tutorialModel),
 			activities: {},
 		},

typings/index.d.ts

@@ -164,4 +164,13 @@ export interface StateMachine {
 	send(action: string | Action): void
 }
 
-export type EditorDispatch = (type: string, payload?: any) => void
+interface MessageData {
+	tutorial?: {id: string}
+	position: Position
+	progress: Progress
+}
+
+type MessageState = string
+
+
+export type EditorDispatch = (type: string, payload?: MessageData | MessageState) => void

web-app/src/App.tsx

@@ -23,7 +23,7 @@ const App = () => {
 	})
 
 	// update level/stage/step status based on user progress & position
-		// TODO: model server more effeciently
+		// TODO: model server more efficiently
 		const [setStatus] = useMutation(SET_STATUS)
 
   // event bus listener