coderoad · ShMcK · Jun 24, 2019 · Jun 24, 2019
diff --git a/src/editor/commands/index.ts b/src/editor/commands/index.ts
@@ -16,6 +16,9 @@ const COMMANDS = {
     RECEIVE_ACTION: 'coderoad.receive_action',
     OPEN_FILE: 'coderoad.open_file',
     RUN_TEST: 'coderoad.run_test',
+    TEST_PASS: 'coderoad.test_pass',
+    TEST_FAIL: 'coderoad.test_fail',
+    SET_LAYOUT: 'coderoad.set_layout',
 }
 
 interface CreateCommandProps {
@@ -41,8 +44,12 @@ export const createCommands = ({ context, machine, storage, git, position }: Cre
         machine.activate()
     },
     // open React webview
-    [COMMANDS.OPEN_WEBVIEW]: (column: number = vscode.ViewColumn.One) => {
+    [COMMANDS.OPEN_WEBVIEW]: (column: number = vscode.ViewColumn.Two) => {
+        // setup 1x1 horizontal layout
+        vscode.commands.executeCommand('vscode.setEditorLayout', { orientation: 0, groups: [{ groups: [{}], size: 0.6 }, { groups: [{}], size: 0.4 }] })
         webview.createOrShow(column);
+        // NOTE: createOrShow and layout command cannot be async
+        // this creates an async issue where the webview cannot detect when it has been initialized
         setTimeout(() => {
             machine.send('WEBVIEW_INITIALIZED')
         }, 2000)
@@ -112,5 +119,15 @@ export const createCommands = ({ context, machine, storage, git, position }: Cre
             onSuccess: () => machine.send('TEST_PASS'),
             onFail: () => machine.send('TEST_FAIL')
         })
-    }
+    },
+    [COMMANDS.TEST_PASS]: () => {
+        vscode.window.showInformationMessage('PASS')
+    },
+    [COMMANDS.TEST_FAIL]: () => {
+        vscode.window.showWarningMessage('FAIL')
+    },
+    [COMMANDS.SET_LAYOUT]: () => {
+        console.log('setLayout')
+        vscode.commands.executeCommand('vscode.setEditorLayout', { orientation: 0, groups: [{ groups: [{}], size: 0.6 }, { groups: [{}], size: 0.4 }] })
+    },
 })
diff --git a/src/editor/commands/loadSolution.ts b/src/editor/commands/loadSolution.ts
@@ -2,7 +2,7 @@ import * as CR from 'typings'
 import * as storage from '../../services/storage'
 import { gitLoadCommits, gitClear } from '../../services/git'
 
-export default async function loadSolution(): Promise<void> {
+export default async function loadSolution(dispatch: CR.EditorDispatch): Promise<void> {
   const [position, tutorial]: [CR.Position, CR.Tutorial | undefined] = await Promise.all([
     storage.getPosition(),
     storage.getTutorial(),
@@ -17,5 +17,5 @@ export default async function loadSolution(): Promise<void> {
   const { solution } = tutorial.data.steps[position.stepId].actions
 
   await gitClear()
-  await gitLoadCommits(solution)
+  await gitLoadCommits(solution, dispatch)
 }
diff --git a/src/editor/index.ts b/src/editor/index.ts
@@ -61,7 +61,7 @@ class Editor {
     }
 
     // execute vscode command
-    public dispatch = (type: string, payload: any) => {
+    public dispatch = (type: string, payload?: any) => {
         vscode.commands.executeCommand(type, payload)
     }
 }

diff --git a/src/extension.ts b/src/extension.ts
@@ -1,16 +1,20 @@
+import * as vscode from 'vscode'
 import { setWorkspaceRoot } from './services/node'
 import StateMachine from './state'
 import Editor from './editor'
 
 
 // state machine that governs application logic
-export const machine = new StateMachine()
+export const machine = new StateMachine({ dispatch: vscode.commands.executeCommand })
 
 // vscode editor
 export const editor = new Editor({
     machine,
     setWorkspaceRoot,
 })
 
+// activate run on vscode extension initialization
 export const activate = editor.activate
+
+// deactive run on vscode extension shut down
 export const deactivate = editor.deactivate
diff --git a/src/services/git/index.ts b/src/services/git/index.ts
@@ -1,4 +1,3 @@
-import * as vscode from 'vscode'
 import * as CR from 'typings'
 import { exec, exists } from '../node'
 
@@ -9,7 +8,7 @@ const gitOrigin = 'coderoad'
     MULTIPLE git cherry-pick %COMMIT_START%..%COMMIT_END%
     if shell, run shell
 */
-export async function gitLoadCommits(actions: CR.TutorialAction): Promise<void> {
+export async function gitLoadCommits(actions: CR.TutorialAction, dispatch: CR.EditorDispatch): Promise<void> {
   const { commits, commands, files } = actions
 
   console.log('commits to load', commits)
@@ -41,7 +40,7 @@ export async function gitLoadCommits(actions: CR.TutorialAction): Promise<void>
 
   if (files) {
     for (const filePath of files) {
-      vscode.commands.executeCommand('coderoad.open_file', filePath)
+      dispatch('coderoad.open_file', filePath)
     }
   }
 }

diff --git a/src/services/testResult.ts b/src/services/testResult.ts
diff --git a/src/services/tutorialSetup.ts b/src/services/tutorialSetup.ts
diff --git a/src/state/actions/index.ts b/src/state/actions/index.ts
@@ -3,7 +3,6 @@ import { assign } from 'xstate'
 import { machine } from '../../extension'
 import api from '../../services/api'
 import * as CR from 'typings'
-import * as vscode from 'vscode'
 import * as storage from '../../services/storage'
 import * as git from '../../services/git'
 
@@ -15,10 +14,10 @@ let currentProgress: CR.Progress = {
     complete: false,
 }
 
-export default {
+export default (dispatch: CR.EditorDispatch) => ({
     createWebview() {
         console.log('execute coderoad.open_webview')
-        vscode.commands.executeCommand('coderoad.open_webview')
+        dispatch('coderoad.open_webview')
     },
     async newOrContinue() {
         // verify that the user has a tutorial & progress
@@ -45,11 +44,11 @@ export default {
         currentTutorial = tutorial
         console.log('api')
         console.log(tutorial)
-        vscode.commands.executeCommand('coderoad.tutorial_launch', tutorial)
+        dispatch('coderoad.tutorial_launch', tutorial)
     },
     tutorialSetup() {
-        vscode.commands.executeCommand('coderoad.tutorial_setup', currentTutorial)
-        vscode.commands.executeCommand('coderoad.open_webview', vscode.ViewColumn.Two)
+        dispatch('coderoad.tutorial_setup', currentTutorial)
+        dispatch('coderoad.open_webview', 2)
     },
     initializeNewTutorial: assign({
         position: (context: any): CR.Position => {
@@ -104,13 +103,13 @@ export default {
         }
     }),
     testStart() {
-        vscode.commands.executeCommand('coderoad.run_test')
+        dispatch('coderoad.run_test')
     },
     testPass() {
-        vscode.window.showInformationMessage('PASS')
+        dispatch('coderoad.test_pass')
     },
     testFail() {
-        vscode.window.showWarningMessage('FAIL')
+        dispatch('coderoad.test_fail')
     },
     // @ts-ignore
     progressUpdate: assign({
@@ -166,6 +165,6 @@ export default {
     stepLoadCommits(context: CR.MachineContext): void {
         const { data, position } = context
         const { setup } = data.steps[position.stepId].actions
-        git.gitLoadCommits(setup)
+        git.gitLoadCommits(setup, dispatch)
     }
-}
+})
diff --git a/src/state/index.ts b/src/state/index.ts
@@ -1,11 +1,14 @@
 import { interpret, Interpreter } from 'xstate'
 import * as CR from 'typings'
-import machine from './machine'
-import * as vscode from 'vscode'
+import createMachine from './machine'
 
 // machine interpreter
 // https://xstate.js.org/docs/guides/interpretation.html
 
+interface Props {
+    dispatch: CR.EditorDispatch
+}
+
 class StateMachine {
     private machineOptions = {
         logger: console.log,
@@ -14,17 +17,18 @@ class StateMachine {
         execute: true
     }
     private service: Interpreter<CR.MachineContext, CR.MachineStateSchema, CR.MachineEvent>
-    constructor() {
+    constructor({ dispatch }: Props) {
+        const machine = createMachine(dispatch)
         this.service = interpret(machine, this.machineOptions)
             // logging
             .onTransition(state => {
                 console.log('onTransition', state)
                 if (state.changed) {
                     console.log('next state')
                     console.log(state.value)
-                    vscode.commands.executeCommand('coderoad.send_state', { state: state.value, data: state.context })
+                    dispatch('coderoad.send_state', { state: state.value, data: state.context })
                 } else {
-                    vscode.commands.executeCommand('coderoad.send_data', { data: state.context })
+                    dispatch('coderoad.send_data', { data: state.context })
                 }
             })
     }

diff --git a/src/state/machine.ts b/src/state/machine.ts
@@ -1,11 +1,11 @@
 import { Machine } from 'xstate'
 import * as CR from 'typings'
 
-import actions from './actions'
+import createActions from './actions'
 import guards from './guards'
 import initialContext from './context'
 
-export const machine = Machine<
+export const machine = (dispatch: CR.EditorDispatch) => Machine<
     CR.MachineContext,
     CR.MachineStateSchema,
     CR.MachineEvent
@@ -164,7 +164,7 @@ export const machine = Machine<
         }
     },
     {
-        actions,
+        actions: createActions(dispatch),
         guards,
         activities: {},
     },

diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -172,3 +172,5 @@ export interface StateMachine {
     deactivate(): void
     send(action: string | Action): void
 }
+
+export type EditorDispatch = (type: string, payload?: any) => void