Skip to content

Commit 6e28b2c

Browse files
ShMcKShMcK
committed
split state machines
1 parent 9c95528 commit 6e28b2c

File tree

17 files changed

+464
-271
lines changed

17 files changed

+464
-271
lines changed

‎typings/index.d.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ export interface MachineContext {
4646
env: Environment
4747
error: ErrorMessage | null
4848
tutorial: G.Tutorial | null
49+
}
50+
51+
export interface PlayMachineContext extends MachineContext {
4952
position: Position
5053
progress: Progress
5154
processes: ProcessEvent[]
@@ -57,7 +60,7 @@ export interface MachineEvent {
5760
data?: any
5861
}
5962

60-
export interface MachineStateSchema {
63+
export interface SelectTutorialMachineStateSchema {
6164
states: {
6265
Start: {
6366
states: {
@@ -68,6 +71,11 @@ export interface MachineStateSchema {
6871
ContinueTutorial: {}
6972
}
7073
}
74+
}
75+
}
76+
77+
export interface PlayTutorialMachineStateSchema {
78+
states: {
7179
Tutorial: {
7280
states: {
7381
Initialize: {}
@@ -91,6 +99,13 @@ export interface MachineStateSchema {
9199
}
92100
}
93101

102+
export interface MachineStateSchema {
103+
states: {
104+
SelectTutorial: {}
105+
PlayTutorial: {}
106+
}
107+
}
108+
94109
export interface StateMachine {
95110
activate(): void
96111
deactivate(): void

‎web-app/src/Routes.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@ const Routes = () => {
3737
<OverviewPage send={tempSend} context={{} as CR.MachineContext} />
3838
</Route>
3939
<Route path="Tutorial.Level">
40-
<LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />
40+
<LevelSummaryPage send={tempSend} context={{} as CR.PlayMachineContext} />
4141
</Route>
4242
<Route path="Tutorial.Completed">
43-
<CompletedPage send={tempSend} context={{} as CR.MachineContext} />
43+
<CompletedPage send={tempSend} context={{} as CR.PlayMachineContext} />
4444
</Route>
4545
</Router>
4646
</Workspace>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react'
22
import * as T from 'typings'
33
import { css, jsx } from '@emotion/core'
44

5-
interface Props extends T.MachineContext {
5+
interface Props extends T.PlayMachineContext {
66
state: string
77
children: React.ReactElement
88
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import * as selectors from '../../../services/selectors'
55
import Level from './Level'
66

77
interface PageProps {
8-
context: T.MachineContext
8+
context: T.PlayMachineContext
99
send(action: T.Action): void
1010
}
1111

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { createSelector } from 'reselect'
2-
import { MachineContext } from 'typings'
2+
import * as CR from 'typings'
33
import * as G from 'typings/graphql'
44
import onError from '../../services/sentry/onError'
55

6-
export const currentTutorial = ({ tutorial }: MachineContext): G.Tutorial => {
6+
export const currentTutorial = ({ tutorial }: CR.MachineContext): G.Tutorial => {
77
if (!tutorial) {
88
const error = new Error('Tutorial not found')
99
onError(error)
@@ -21,7 +21,7 @@ export const currentVersion = createSelector(currentTutorial, (tutorial: G.Tutor
2121
return tutorial.version
2222
})
2323

24-
export const currentLevel = (context: MachineContext): G.Level =>
24+
export const currentLevel = (context: CR.PlayMachineContext): G.Level =>
2525
createSelector(
2626
currentVersion,
2727
(version: G.TutorialVersion): G.Level => {
@@ -41,7 +41,7 @@ export const currentLevel = (context: MachineContext): G.Level =>
4141
},
4242
)(context)
4343

44-
export const currentStep = (context: MachineContext): G.Step =>
44+
export const currentStep = (context: CR.PlayMachineContext): G.Step =>
4545
createSelector(
4646
currentLevel,
4747
(level: G.Level): G.Step => {

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

Lines changed: 36 additions & 205 deletions
Original file line numberDiff line numberDiff line change
@@ -1,215 +1,46 @@
11
import * as CR from 'typings'
2-
import { Machine, MachineOptions } from 'xstate'
3-
import actions from './actions'
2+
import { Machine } from 'xstate'
3+
import { selectTutorialMachine } from './selectTutorial'
4+
import { playTutorialMachine } from './playTutorial'
45

5-
const options: MachineOptions<CR.MachineContext, CR.MachineEvent> = {
6-
// @ts-ignore
7-
actions,
8-
}
9-
10-
export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.MachineEvent>(
11-
{
12-
id: 'root',
13-
initial: 'Start',
14-
context: {
15-
error: null,
16-
env: { machineId: '', sessionId: '', token: '' },
17-
tutorial: null,
18-
position: { levelId: '', stepId: '' },
19-
progress: {
20-
levels: {},
21-
steps: {},
22-
complete: false,
23-
},
24-
processes: [],
25-
},
26-
states: {
27-
Start: {
28-
initial: 'Startup',
29-
states: {
30-
Startup: {
31-
onEntry: ['loadEnv'],
32-
on: {
33-
ENV_LOAD: {
34-
target: 'Authenticate',
35-
actions: ['setEnv'],
36-
},
37-
},
38-
},
39-
Authenticate: {
40-
onEntry: ['authenticate'],
41-
on: {
42-
AUTHENTICATED: 'NewOrContinue',
43-
ERROR: {
44-
actions: ['setError'],
45-
},
46-
},
47-
},
48-
NewOrContinue: {
49-
onEntry: ['loadStoredTutorial'],
50-
on: {
51-
CONTINUE_TUTORIAL: {
52-
target: 'ContinueTutorial',
53-
actions: ['continueTutorial'],
54-
},
55-
NEW_TUTORIAL: {
56-
target: 'SelectTutorial',
57-
},
58-
},
59-
},
60-
SelectTutorial: {
61-
onEntry: ['clearStorage'],
62-
id: 'start-new-tutorial',
63-
on: {
64-
TUTORIAL_START: {
65-
target: '#tutorial',
66-
actions: ['newTutorial'],
67-
},
68-
},
69-
},
70-
ContinueTutorial: {
71-
on: {
72-
TUTORIAL_START: {
73-
target: '#tutorial-level',
74-
actions: ['continueConfig'],
75-
},
76-
TUTORIAL_SELECT: 'SelectTutorial',
77-
},
78-
},
6+
export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.MachineEvent>({
7+
id: 'root',
8+
initial: 'SelectTutorial',
9+
context: {
10+
error: null,
11+
env: { machineId: '', sessionId: '', token: '' },
12+
tutorial: null,
13+
},
14+
states: {
15+
// start/continue a tutorial
16+
// select tutorial
17+
// view tutorial summary
18+
SelectTutorial: {
19+
invoke: {
20+
src: selectTutorialMachine,
21+
onDone: 'PlayTutorial',
22+
data: {
23+
env: (context: CR.MachineContext) => context.env,
24+
tutorial: (context: CR.MachineContext) => context.tutorial,
25+
error: null,
7926
},
8027
},
81-
Tutorial: {
82-
id: 'tutorial',
83-
initial: 'Initialize',
84-
on: {
85-
// track commands
86-
COMMAND_START: {
87-
actions: ['commandStart'],
88-
},
89-
COMMAND_SUCCESS: {
90-
actions: ['commandSuccess'],
91-
},
92-
COMMAND_FAIL: {
93-
actions: ['commandFail'],
94-
},
95-
ERROR: {
96-
actions: ['setError'],
97-
},
98-
},
99-
states: {
100-
// TODO move Initialize into New Tutorial setup
101-
Initialize: {
102-
onEntry: ['initializeTutorial'],
103-
on: {
104-
TUTORIAL_CONFIGURED: 'Summary',
105-
// TUTORIAL_CONFIG_ERROR: 'Start' // TODO should handle error
106-
},
107-
},
108-
Summary: {
109-
on: {
110-
LOAD_TUTORIAL: {
111-
target: 'Level',
112-
actions: ['initPosition', 'initTutorial'],
113-
},
114-
},
115-
},
116-
LoadNext: {
117-
id: 'tutorial-load-next',
118-
onEntry: ['loadNext'],
119-
on: {
120-
NEXT_STEP: {
121-
target: 'Level',
122-
actions: ['updatePosition'],
123-
},
124-
NEXT_LEVEL: {
125-
target: 'Level', // TODO should return to levels summary page
126-
actions: ['updatePosition'],
127-
},
128-
COMPLETED: '#completed-tutorial',
129-
},
130-
},
131-
Level: {
132-
initial: 'Load',
133-
states: {
134-
Load: {
135-
onEntry: ['loadLevel', 'loadStep'],
136-
after: {
137-
0: 'Normal',
138-
},
139-
},
140-
Normal: {
141-
id: 'tutorial-level',
142-
on: {
143-
TEST_RUNNING: 'TestRunning',
144-
STEP_SOLUTION_LOAD: {
145-
actions: ['editorLoadSolution'],
146-
},
147-
},
148-
},
149-
TestRunning: {
150-
onEntry: ['testStart'],
151-
on: {
152-
TEST_PASS: {
153-
target: 'TestPass',
154-
actions: ['updateStepProgress'],
155-
},
156-
TEST_FAIL: 'TestFail',
157-
TEST_ERROR: 'TestError',
158-
},
159-
},
160-
TestError: {
161-
onEntry: ['testFail'],
162-
after: {
163-
0: 'Normal',
164-
},
165-
},
166-
TestPass: {
167-
onExit: ['updateStepPosition'],
168-
after: {
169-
1000: 'StepNext',
170-
},
171-
},
172-
TestFail: {
173-
onEntry: ['testFail'],
174-
after: {
175-
0: 'Normal',
176-
},
177-
},
178-
StepNext: {
179-
onEntry: ['stepNext'],
180-
on: {
181-
LOAD_NEXT_STEP: {
182-
target: 'Normal',
183-
actions: ['loadStep'],
184-
},
185-
LEVEL_COMPLETE: {
186-
target: 'LevelComplete',
187-
actions: ['updateLevelProgress'],
188-
},
189-
},
190-
},
191-
LevelComplete: {
192-
on: {
193-
LEVEL_NEXT: '#tutorial-load-next',
194-
},
195-
},
196-
},
197-
},
198-
Completed: {
199-
id: 'completed-tutorial',
200-
onEntry: ['userTutorialComplete'],
201-
on: {
202-
SELECT_TUTORIAL: {
203-
target: '#start-new-tutorial',
204-
actions: ['reset'],
205-
},
206-
},
207-
},
28+
},
29+
// initialize a selected tutorial
30+
// progress through tutorial level/steps
31+
// complete tutorial
32+
PlayTutorial: {
33+
invoke: {
34+
src: playTutorialMachine,
35+
onDone: 'SelectTutorial',
36+
data: {
37+
context: (context: CR.MachineContext) => context.env,
38+
tutorial: (context: CR.MachineContext) => context.tutorial,
39+
error: null,
20840
},
20941
},
21042
},
21143
},
212-
options,
213-
)
44+
})
21445

21546
export default machine

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as CR from 'typings'
2+
3+
export default {
4+
userTutorialComplete(context: CR.PlayMachineContext) {
5+
console.log('should update user tutorial as complete')
6+
},
7+
}

‎web-app/src/services/state/actions/command.ts‎ renamed to ‎web-app/src/services/state/playTutorial/actions/command.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { assign } from 'xstate'
44
export default {
55
// @ts-ignore
66
commandStart: assign({
7-
processes: ({ processes }: T.MachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
7+
processes: ({ processes }: T.PlayMachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
88
const { process } = event.payload
99
const isRunning = processes.find(p => p.title === process.title)
1010
if (!isRunning) {
@@ -15,14 +15,14 @@ export default {
1515
}),
1616
// @ts-ignore
1717
commandSuccess: assign({
18-
processes: ({ processes }: T.MachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
18+
processes: ({ processes }: T.PlayMachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
1919
const { process } = event.payload
2020
return processes.filter(p => p.title !== process.title)
2121
},
2222
}),
2323
// @ts-ignore
2424
commandFail: assign({
25-
processes: ({ processes }: T.MachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
25+
processes: ({ processes }: T.PlayMachineContext, event: T.MachineEvent): T.ProcessEvent[] => {
2626
const { process } = event.payload
2727
return processes.filter(p => p.title !== process.title)
2828
},

0 commit comments

Comments
 (0)