split state machines

typings/index.d.ts

@@ -46,6 +46,9 @@ export interface MachineContext {
   env: Environment
   error: ErrorMessage | null
   tutorial: G.Tutorial | null
+}
+
+export interface PlayMachineContext extends MachineContext {
   position: Position
   progress: Progress
   processes: ProcessEvent[]
@@ -57,7 +60,7 @@ export interface MachineEvent {
   data?: any
 }
 
-export interface MachineStateSchema {
+export interface SelectTutorialMachineStateSchema {
   states: {
     Start: {
       states: {
@@ -68,6 +71,11 @@ export interface MachineStateSchema {
         ContinueTutorial: {}
       }
     }
+  }
+}
+
+export interface PlayTutorialMachineStateSchema {
+  states: {
     Tutorial: {
       states: {
         Initialize: {}
@@ -91,6 +99,13 @@ export interface MachineStateSchema {
   }
 }
 
+export interface MachineStateSchema {
+  states: {
+    SelectTutorial: {}
+    PlayTutorial: {}
+  }
+}
+
 export interface StateMachine {
   activate(): void
   deactivate(): void

web-app/src/Routes.tsx

@@ -37,10 +37,10 @@ const Routes = () => {
           <OverviewPage send={tempSend} context={{} as CR.MachineContext} />
         </Route>
         <Route path="Tutorial.Level">
-          <LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />
+          <LevelSummaryPage send={tempSend} context={{} as CR.PlayMachineContext} />
         </Route>
         <Route path="Tutorial.Completed">
-          <CompletedPage send={tempSend} context={{} as CR.MachineContext} />
+          <CompletedPage send={tempSend} context={{} as CR.PlayMachineContext} />
         </Route>
       </Router>
     </Workspace>

web-app/src/components/Debugger/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
 
-interface Props extends T.MachineContext {
+interface Props extends T.PlayMachineContext {
   state: string
   children: React.ReactElement
 }

web-app/src/containers/Tutorial/LevelPage/index.tsx

@@ -5,7 +5,7 @@ import * as selectors from '../../../services/selectors'
 import Level from './Level'
 
 interface PageProps {
-  context: T.MachineContext
+  context: T.PlayMachineContext
   send(action: T.Action): void
 }
 

web-app/src/services/selectors/tutorial.ts

@@ -1,9 +1,9 @@
 import { createSelector } from 'reselect'
-import { MachineContext } from 'typings'
+import * as CR from 'typings'
 import * as G from 'typings/graphql'
 import onError from '../../services/sentry/onError'
 
-export const currentTutorial = ({ tutorial }: MachineContext): G.Tutorial => {
+export const currentTutorial = ({ tutorial }: CR.MachineContext): G.Tutorial => {
   if (!tutorial) {
     const error = new Error('Tutorial not found')
     onError(error)
@@ -21,7 +21,7 @@ export const currentVersion = createSelector(currentTutorial, (tutorial: G.Tutor
   return tutorial.version
 })
 
-export const currentLevel = (context: MachineContext): G.Level =>
+export const currentLevel = (context: CR.PlayMachineContext): G.Level =>
   createSelector(
     currentVersion,
     (version: G.TutorialVersion): G.Level => {
@@ -41,7 +41,7 @@ export const currentLevel = (context: MachineContext): G.Level =>
     },
   )(context)
 
-export const currentStep = (context: MachineContext): G.Step =>
+export const currentStep = (context: CR.PlayMachineContext): G.Step =>
   createSelector(
     currentLevel,
     (level: G.Level): G.Step => {

web-app/src/services/state/machine.ts

@@ -1,215 +1,46 @@
 import * as CR from 'typings'
-import { Machine, MachineOptions } from 'xstate'
-import actions from './actions'
+import { Machine } from 'xstate'
+import { selectTutorialMachine } from './selectTutorial'
+import { playTutorialMachine } from './playTutorial'
 
-const options: MachineOptions<CR.MachineContext, CR.MachineEvent> = {
-  // @ts-ignore
-  actions,
-}
-
-export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.MachineEvent>(
-  {
-    id: 'root',
-    initial: 'Start',
-    context: {
-      error: null,
-      env: { machineId: '', sessionId: '', token: '' },
-      tutorial: null,
-      position: { levelId: '', stepId: '' },
-      progress: {
-        levels: {},
-        steps: {},
-        complete: false,
-      },
-      processes: [],
-    },
-    states: {
-      Start: {
-        initial: 'Startup',
-        states: {
-          Startup: {
-            onEntry: ['loadEnv'],
-            on: {
-              ENV_LOAD: {
-                target: 'Authenticate',
-                actions: ['setEnv'],
-              },
-            },
-          },
-          Authenticate: {
-            onEntry: ['authenticate'],
-            on: {
-              AUTHENTICATED: 'NewOrContinue',
-              ERROR: {
-                actions: ['setError'],
-              },
-            },
-          },
-          NewOrContinue: {
-            onEntry: ['loadStoredTutorial'],
-            on: {
-              CONTINUE_TUTORIAL: {
-                target: 'ContinueTutorial',
-                actions: ['continueTutorial'],
-              },
-              NEW_TUTORIAL: {
-                target: 'SelectTutorial',
-              },
-            },
-          },
-          SelectTutorial: {
-            onEntry: ['clearStorage'],
-            id: 'start-new-tutorial',
-            on: {
-              TUTORIAL_START: {
-                target: '#tutorial',
-                actions: ['newTutorial'],
-              },
-            },
-          },
-          ContinueTutorial: {
-            on: {
-              TUTORIAL_START: {
-                target: '#tutorial-level',
-                actions: ['continueConfig'],
-              },
-              TUTORIAL_SELECT: 'SelectTutorial',
-            },
-          },
+export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.MachineEvent>({
+  id: 'root',
+  initial: 'SelectTutorial',
+  context: {
+    error: null,
+    env: { machineId: '', sessionId: '', token: '' },
+    tutorial: null,
+  },
+  states: {
+    // start/continue a tutorial
+    // select tutorial
+    // view tutorial summary
+    SelectTutorial: {
+      invoke: {
+        src: selectTutorialMachine,
+        onDone: 'PlayTutorial',
+        data: {
+          env: (context: CR.MachineContext) => context.env,
+          tutorial: (context: CR.MachineContext) => context.tutorial,
+          error: null,
         },
       },
-      Tutorial: {
-        id: 'tutorial',
-        initial: 'Initialize',
-        on: {
-          // track commands
-          COMMAND_START: {
-            actions: ['commandStart'],
-          },
-          COMMAND_SUCCESS: {
-            actions: ['commandSuccess'],
-          },
-          COMMAND_FAIL: {
-            actions: ['commandFail'],
-          },
-          ERROR: {
-            actions: ['setError'],
-          },
-        },
-        states: {
-          // TODO move Initialize into New Tutorial setup
-          Initialize: {
-            onEntry: ['initializeTutorial'],
-            on: {
-              TUTORIAL_CONFIGURED: 'Summary',
-              // TUTORIAL_CONFIG_ERROR: 'Start' // TODO should handle error
-            },
-          },
-          Summary: {
-            on: {
-              LOAD_TUTORIAL: {
-                target: 'Level',
-                actions: ['initPosition', 'initTutorial'],
-              },
-            },
-          },
-          LoadNext: {
-            id: 'tutorial-load-next',
-            onEntry: ['loadNext'],
-            on: {
-              NEXT_STEP: {
-                target: 'Level',
-                actions: ['updatePosition'],
-              },
-              NEXT_LEVEL: {
-                target: 'Level', // TODO should return to levels summary page
-                actions: ['updatePosition'],
-              },
-              COMPLETED: '#completed-tutorial',
-            },
-          },
-          Level: {
-            initial: 'Load',
-            states: {
-              Load: {
-                onEntry: ['loadLevel', 'loadStep'],
-                after: {
-                  0: 'Normal',
-                },
-              },
-              Normal: {
-                id: 'tutorial-level',
-                on: {
-                  TEST_RUNNING: 'TestRunning',
-                  STEP_SOLUTION_LOAD: {
-                    actions: ['editorLoadSolution'],
-                  },
-                },
-              },
-              TestRunning: {
-                onEntry: ['testStart'],
-                on: {
-                  TEST_PASS: {
-                    target: 'TestPass',
-                    actions: ['updateStepProgress'],
-                  },
-                  TEST_FAIL: 'TestFail',
-                  TEST_ERROR: 'TestError',
-                },
-              },
-              TestError: {
-                onEntry: ['testFail'],
-                after: {
-                  0: 'Normal',
-                },
-              },
-              TestPass: {
-                onExit: ['updateStepPosition'],
-                after: {
-                  1000: 'StepNext',
-                },
-              },
-              TestFail: {
-                onEntry: ['testFail'],
-                after: {
-                  0: 'Normal',
-                },
-              },
-              StepNext: {
-                onEntry: ['stepNext'],
-                on: {
-                  LOAD_NEXT_STEP: {
-                    target: 'Normal',
-                    actions: ['loadStep'],
-                  },
-                  LEVEL_COMPLETE: {
-                    target: 'LevelComplete',
-                    actions: ['updateLevelProgress'],
-                  },
-                },
-              },
-              LevelComplete: {
-                on: {
-                  LEVEL_NEXT: '#tutorial-load-next',
-                },
-              },
-            },
-          },
-          Completed: {
-            id: 'completed-tutorial',
-            onEntry: ['userTutorialComplete'],
-            on: {
-              SELECT_TUTORIAL: {
-                target: '#start-new-tutorial',
-                actions: ['reset'],
-              },
-            },
-          },
+    },
+    // initialize a selected tutorial
+    // progress through tutorial level/steps
+    // complete tutorial
+    PlayTutorial: {
+      invoke: {
+        src: playTutorialMachine,
+        onDone: 'SelectTutorial',
+        data: {
+          context: (context: CR.MachineContext) => context.env,
+          tutorial: (context: CR.MachineContext) => context.tutorial,
+          error: null,
         },
       },
     },
   },
-  options,
-)
+})
 
 export default machine

web-app/src/services/state/playTutorial/actions/api.ts

@@ -0,0 +1,7 @@
+import * as CR from 'typings'
+
+export default {
+  userTutorialComplete(context: CR.PlayMachineContext) {
+    console.log('should update user tutorial as complete')
+  },
+}

web-app/src/services/state/actions/command.ts → web-app/src/services/state/playTutorial/actions/command.ts

@@ -4,7 +4,7 @@ import { assign } from 'xstate'
 export default {
   // @ts-ignore
   commandStart: assign({
-    processes: ({ processes }: T.MachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
+    processes: ({ processes }: T.PlayMachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
       const { process } = event.payload
       const isRunning = processes.find(p => p.title === process.title)
       if (!isRunning) {
@@ -15,14 +15,14 @@ export default {
   }),
   // @ts-ignore
   commandSuccess: assign({
-    processes: ({ processes }: T.MachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
+    processes: ({ processes }: T.PlayMachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
       const { process } = event.payload
       return processes.filter(p => p.title !== process.title)
     },
   }),
   // @ts-ignore
   commandFail: assign({
-    processes: ({ processes }: T.MachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
+    processes: ({ processes }: T.PlayMachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
       const { process } = event.payload
       return processes.filter(p => p.title !== process.title)
     },