setup state/data

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',
+    SEND_DATA: 'coderoad.send_data',
     RECEIVE_ACTION: 'coderoad.receive_action',
     OPEN_FILE: 'coderoad.open_file',
     RUN_TEST: 'coderoad.test_run',
@@ -70,15 +71,14 @@ export const createCommands = ({ context, machine, storage, git }: CreateCommand
         }
     },
     // send messages to webview
-    [COMMANDS.SEND_STATE]: (payload: any) => {
-        console.log(`SEND ${JSON.stringify(payload)}`)
-        // console.log(webview.currentPanel)
-        // if (!webview || !webview.currentPanel) {
-        //     throw new Error('No valid panel available')
-        // }
+    [COMMANDS.SEND_STATE]: (payload: { data: any, state: any }) => {
         webview.postMessage({ type: 'SET_STATE', payload })
     },
+    [COMMANDS.SEND_DATA]: (payload: { data: any }) => {
+        webview.postMessage({ type: 'SET_DATA', payload })
+    },
     [COMMANDS.RECEIVE_ACTION]: (action: string | CR.Action) => {
+        console.log('onReceiveAction', action)
         machine.onReceive(action)
     }
 })

src/state/index.ts

@@ -18,11 +18,13 @@ class StateMachine {
         this.service = interpret(machine, this.machineOptions)
             // logging
             .onTransition(state => {
-                console.log('onTransition', state.changed)
+                console.log('onTransition', state)
                 if (state.changed) {
                     console.log('next state')
                     console.log(state.value)
-                    vscode.commands.executeCommand('coderoad.send_state', state.value)
+                    vscode.commands.executeCommand('coderoad.send_state', { state: state.value, data: state.context })
+                } else {
+                    vscode.commands.executeCommand('coderoad.send_data', { data: state.context })
                 }
             })
     }

web-app/src/Routes.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
 import * as CR from 'typings'
+import { send } from './utils/vscode'
+
 import NewPage from './components/New'
 import ContinuePage from './components/Continue'
 import Cond from './components/Cond'
@@ -8,23 +10,21 @@ 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 [data, setData] = React.useState({})
+
+
     const handleEvent = (event: ReceivedEvent): void => {
         const message = event.data
-        console.log(`RECEIVED: ${JSON.stringify(message)}`)
+        console.log('RECEIVED')
+        console.log(message)
         // messages from core
         if (message.type === 'SET_STATE') {
-            setState(message.payload)
+            setState(message.payload.state)
+            setData(message.payload.data)
+        } else if (message.type === 'SET_DATA') {
+          setData(message.payload.data)
         }
     }
 
@@ -37,8 +37,11 @@ const Routes = () => {
         }
     })
 
+    // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
     return (
       <div>
+        <h5>state: {JSON.stringify(state)}</h5>
+        <p>data:{JSON.stringify(data)}</p>
         <Cond state={state} path="SelectTutorial.NewTutorial">
           <NewPage onNew={() => send('TUTORIAL_START')} />
         </Cond>

web-app/src/utils/vscode.ts

@@ -0,0 +1,9 @@
+import { Action } from 'typings'
+
+declare var acquireVsCodeApi: any
+
+const vscode = acquireVsCodeApi()
+
+export function send(event: string | Action) {
+    return vscode.postMessage(event)
+}