diff --git a/src/channel/index.ts b/src/channel/index.ts index 8ec5d285..dd27cc37 100644 --- a/src/channel/index.ts +++ b/src/channel/index.ts @@ -41,6 +41,17 @@ class Channel implements Channel { // console.log('EDITOR RECEIVED:', actionType) switch (actionType) { + case 'ENV_GET': + this.send({ + type: 'ENV_LOAD', + payload: { + env: { + machineId: vscode.env.machineId, + sessionId: vscode.env.sessionId, + } + } + }) + return // continue from tutorial from local storage case 'EDITOR_TUTORIAL_LOAD': const tutorial: G.Tutorial | null = this.context.tutorial.get() @@ -113,8 +124,10 @@ class Channel implements Channel { } // send to webview public send = async (action: CR.Action) => { - - switch (action.type) { + console.log(`EDITOR SEND ${action.type}`) + // action may be an object.type or plain string + const actionType: string = typeof action === 'string' ? action : action.type + switch (actionType) { case 'TEST_PASS': // update local storage stepProgress const progress = this.context.progress.setStepComplete(action.payload.stepId) diff --git a/typings/index.d.ts b/typings/index.d.ts index 0af160bf..6796f3cb 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -119,7 +119,13 @@ export interface Action { meta?: any } +export interface Environment { + machineId: string + sessionId: string +} + export interface MachineContext { + env: Environment, tutorial: G.Tutorial | null, position: Position, progress: Progress, @@ -136,10 +142,11 @@ export interface MachineStateSchema { Start: { states: { Startup: {} + NewOrContinue: {} SelectTutorial: {} ContinueTutorial: {} - } - } + }, + }, Tutorial: { states: { Initialize: {} diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx index f9aa1882..cb3c1184 100644 --- a/web-app/src/Routes.tsx +++ b/web-app/src/Routes.tsx @@ -19,7 +19,7 @@ const Routes = () => { return ( - + diff --git a/web-app/src/components/Debugger/index.tsx b/web-app/src/components/Debugger/index.tsx index d6442786..0becacf8 100644 --- a/web-app/src/components/Debugger/index.tsx +++ b/web-app/src/components/Debugger/index.tsx @@ -3,20 +3,23 @@ import * as G from 'typings/graphql' import * as CR from 'typings' interface Props { - state: string - tutorial: G.Tutorial - position: CR.Position - progress: CR.Progress - children: React.ReactElement + state: string + tutorial: G.Tutorial + env: CR.Environment + position: CR.Position + progress: CR.Progress + children: React.ReactElement } -const Debugger = ({ state, children, position, progress, tutorial }: Props) => ( +const Debugger = ({ state, children, env, position, progress, tutorial }: Props) => (

state: {state}

-

tutorial: {tutorial ? tutorial.id : 'none'}

+

MachineId: {env.machineId}

+

SessionId: {env.sessionId}

+

tutorial: {tutorial ? tutorial.id : 'none'}

position: {JSON.stringify(position)}

-

progress: {JSON.stringify(progress)}

- {children} +

progress: {JSON.stringify(progress)}

+ {children}
) diff --git a/web-app/src/components/Router/Route.tsx b/web-app/src/components/Router/Route.tsx index 33b1abe8..d73001df 100644 --- a/web-app/src/components/Router/Route.tsx +++ b/web-app/src/components/Router/Route.tsx @@ -1,6 +1,6 @@ interface Props { children: any - path: string + path: string | string[] } const Route = ({ children }: Props) => children diff --git a/web-app/src/components/Router/index.tsx b/web-app/src/components/Router/index.tsx index 41fadf36..3aa1d84f 100644 --- a/web-app/src/components/Router/index.tsx +++ b/web-app/src/components/Router/index.tsx @@ -32,7 +32,16 @@ const Router = ({ children }: Props): React.ReactElement | nu const childArray = React.Children.toArray(children) for (const child of childArray) { - if (state.matches(child.props.path)) { + const { path } = child.props + let pathMatch + if (typeof path === 'string') { + pathMatch = state.matches(path) + } else if (Array.isArray(path)) { + pathMatch = path.some(p => state.matches(p)) + } else { + throw new Error(`Invalid route path ${JSON.stringify(path)}`) + } + if (pathMatch) { const element = React.cloneElement(child.props.children, { send, context: state.context }) return debuggerWrapper(element, state) } diff --git a/web-app/src/services/channel/index.ts b/web-app/src/services/channel/index.ts index 50f8db94..b51272b1 100644 --- a/web-app/src/services/channel/index.ts +++ b/web-app/src/services/channel/index.ts @@ -15,7 +15,9 @@ class Channel { require('./mock') } + // Loads VSCode webview connection with editor const editor = acquireVsCodeApi() + this.editorSend = editor.postMessage } public machineSend = (action: Action | string) => { /* */} @@ -25,13 +27,19 @@ class Channel { this.machineSend = send } public receive = (event: ReceivedEvent) => { + // NOTE: must call event.data, cannot destructure. VSCode acts odd const action = event.data // @ts-ignore // ignore browser events from plugins if (action.source) {return } + console.log(`CLIENT RECEIVE: ${action.type}`, action) + // messages from core switch (action.type) { + case 'ENV_LOAD': + this.machineSend(action) + return case 'TUTORIAL_LOADED': // send action to state machine this.machineSend('TUTORIAL_LOADED') diff --git a/web-app/src/services/state/actions/context.ts b/web-app/src/services/state/actions/context.ts index 6873e954..2a910cd7 100644 --- a/web-app/src/services/state/actions/context.ts +++ b/web-app/src/services/state/actions/context.ts @@ -4,6 +4,11 @@ import * as CR from 'typings' import * as selectors from '../../selectors' export default { + setEnv: assign({ + env: (context: CR.MachineContext, event: CR.MachineEvent) => { + return event.payload.env + } + }), continueTutorial: assign({ tutorial: (context: CR.MachineContext, event: CR.MachineEvent) => { return event.payload.tutorial diff --git a/web-app/src/services/state/actions/editor.ts b/web-app/src/services/state/actions/editor.ts index 9c5adf84..8b5b8d0b 100644 --- a/web-app/src/services/state/actions/editor.ts +++ b/web-app/src/services/state/actions/editor.ts @@ -6,6 +6,11 @@ import client from '../../apollo' import tutorialQuery from '../../apollo/queries/tutorial' export default { + loadEnv() { + channel.editorSend({ + type: 'ENV_GET' + }) + }, loadStoredTutorial() { // send message to editor to see if there is existing tutorial progress // in local storage on the editor diff --git a/web-app/src/services/state/machine.ts b/web-app/src/services/state/machine.ts index 41c4e0ac..70aa4ece 100644 --- a/web-app/src/services/state/machine.ts +++ b/web-app/src/services/state/machine.ts @@ -12,6 +12,7 @@ export const machine = Machine