run received actions through state machine

Author: ShMcK

src/editor/ReactWebView.ts

@@ -12,9 +12,8 @@ class ReactWebView {
     private disposables: vscode.Disposable[] = []
     private onReceive: any // TODO: properly type
 
-    public constructor(extensionPath: string, onReceive: any) {
+    public constructor(extensionPath: string) {
         this.extensionPath = extensionPath
-        this.onReceive = onReceive
 
         // Create and show a new webview panel
         this.panel = this.createWebviewPanel(vscode.ViewColumn.One)
@@ -27,7 +26,8 @@ class ReactWebView {
         this.panel.onDidDispose(() => this.dispose(), null, this.disposables)
 
         // Handle messages from the webview
-        this.panel.webview.onDidReceiveMessage(this.onReceive, null, this.disposables)
+        const onReceive = (action: string | CR.Action) => vscode.commands.executeCommand('coderoad.receive_action', action)
+        this.panel.webview.onDidReceiveMessage(onReceive, null, this.disposables)
         console.log('webview loaded')
     }
 

src/editor/commands/index.ts

@@ -9,6 +9,7 @@ const COMMANDS = {
     NEW_OR_CONTINUE: 'coderoad.new_or_continue',
     OPEN_WEBVIEW: 'coderoad.open_webview',
     SEND_STATE: 'coderoad.send_state',
+    RECEIVE_ACTION: 'coderoad.receive_action',
     OPEN_FILE: 'coderoad.open_file',
     RUN_TEST: 'coderoad.test_run',
 }
@@ -22,13 +23,6 @@ interface CreateCommandProps {
 
 // React panel webview
 let webview: any;
-let initialTutorial: CR.Tutorial | undefined
-let initialProgress: CR.Progress = {
-    levels: {},
-    stages: {},
-    steps: {},
-    complete: false,
-}
 
 export const createCommands = ({ context, machine, storage, git }: CreateCommandProps) => ({
     // initialize
@@ -37,7 +31,7 @@ export const createCommands = ({ context, machine, storage, git }: CreateCommand
         setStorage(context.workspaceState)
 
         // activate machine
-        webview = new ReactWebView(context.extensionPath, machine.onReceive)
+        webview = new ReactWebView(context.extensionPath)
         console.log('webview', webview.panel.webview.postMessage)
         machine.activate()
     },
@@ -50,8 +44,6 @@ export const createCommands = ({ context, machine, storage, git }: CreateCommand
             git.gitVersion(),
             git.gitCheckRemoteExists(),
         ])
-        initialTutorial = tutorial
-        initialProgress = progress
         const canContinue = !!(tutorial && progress && hasGit && hasGitRemote)
         console.log('canContinue', canContinue)
         // if a tutorial exists, 'CONTINUE'
@@ -85,6 +77,8 @@ export const createCommands = ({ context, machine, storage, git }: CreateCommand
         //     throw new Error('No valid panel available')
         // }
         webview.postMessage({ type: 'SET_STATE', payload })
-
+    },
+    [COMMANDS.RECEIVE_ACTION]: (action: string | CR.Action) => {
+        machine.onReceive(action)
     }
 })

src/state/index.ts

@@ -38,9 +38,9 @@ class StateMachine {
         console.log(action)
         this.service.send(action)
     }
-    onReceive(action: CR.Action) {
-        console.log('RECEIVED ACTION')
+    onReceive(action: string | CR.Action) {
         console.log(action)
+        this.service.send(action)
     }
 }
 

typings/index.d.ts

@@ -168,5 +168,5 @@ export interface StateMachine {
     activate(): void
     deactivate(): void
     send(action: string | Action): void
-    onReceive(action: Action): void
+    onReceive(action: string | Action): void
 }

web-app/src/Routes.tsx

@@ -8,6 +8,15 @@ interface ReceivedEvent {
     data: CR.Action
 }
 
+declare var acquireVsCodeApi: any
+
+const vscode = acquireVsCodeApi()
+
+function send(event: string|CR.Action) {
+  return vscode.postMessage(event)
+}
+
+
 const Routes = () => {
     const [state, setState] = React.useState({ SelectTutorial: 'Initial' })
     const handleEvent = (event: ReceivedEvent): void => {
@@ -31,7 +40,7 @@ const Routes = () => {
     return (
       <div>
         <Cond state={state} path="SelectTutorial.NewTutorial">
-          <NewPage onNew={() => console.log('new!')} />
+          <NewPage onNew={() => send('TUTORIAL_START')} />
         </Cond>
         <Cond state={state} path="SelectTutorial.ContinueTutorial">
           <ContinuePage onContinue={() => console.log('continue!')} tutorials={[]} />