Skip to content

Commit 41dca9b

Browse files
ShMcKShMcK
authored
Merge pull request #167 from ShMcK/fix/no-steps
Fix/no steps
2 parents 1b8f290 + 72cf55c commit 41dca9b

File tree

12 files changed

+176
-137
lines changed

12 files changed

+176
-137
lines changed

‎src/channel/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ class Channel implements Channel {
7070
this.send({ type: 'START_NEW_TUTORIAL' })
7171
return
7272
}
73-
console.log('send LOAD_STORED_TUTORIAL')
7473
// communicate to client the tutorial & stepProgress state
7574
this.send({ type: 'LOAD_STORED_TUTORIAL', payload: { tutorial, progress, position } })
7675

‎src/channel/state/Position.ts‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as G from 'typings/graphql'
33

44
const defaultValue: CR.Position = {
55
levelId: '',
6-
stepId: '',
6+
stepId: null,
77
}
88

99
// position
@@ -42,18 +42,25 @@ class Position {
4242

4343
// get step
4444
const currentLevel: G.Level = levels[lastLevelIndex]
45-
const { steps } = currentLevel
46-
const lastStepIndex: number | undefined = steps.findIndex((s: G.Step) => !progress.steps[s.id])
47-
if (lastStepIndex >= steps.length) {
48-
throw new Error('Error setting progress step')
45+
let currentStepId: string | null
46+
if (!currentLevel.steps.length) {
47+
// no steps available for level
48+
currentStepId = null
49+
} else {
50+
// find current step id
51+
const { steps } = currentLevel
52+
const lastStepIndex: number | undefined = steps.findIndex((s: G.Step) => !progress.steps[s.id])
53+
if (lastStepIndex >= steps.length) {
54+
throw new Error('Error setting progress step')
55+
}
56+
// handle position when last step is complete but "continue" not yet selected
57+
const adjustedLastStepIndex = lastStepIndex === -1 ? steps.length - 1 : lastStepIndex
58+
currentStepId = steps[adjustedLastStepIndex].id
4959
}
50-
// handle position when last step is complete but "continue" not yet selected
51-
const adjustedLastStepIndex = lastStepIndex === -1 ? steps.length - 1 : lastStepIndex
52-
const currentStep: G.Step = steps[adjustedLastStepIndex]
5360

5461
this.value = {
5562
levelId: currentLevel.id,
56-
stepId: currentStep.id,
63+
stepId: currentStepId,
5764
}
5865

5966
return this.value

‎typings/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export interface StepProgress {
1919
// current tutorial position
2020
export interface Position {
2121
levelId: string
22-
stepId: string
22+
stepId: string | null
2323
complete?: boolean
2424
}
2525

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { createMachine } from '../../services/state/machine'
44
import { useMachine } from '../../services/xstate-react'
55
import Route from './Route'
66
import onError from '../../services/sentry/onError'
7+
import { LOG_STATE } from '../../environment'
78

89
interface Output {
910
context: T.MachineContext
@@ -20,6 +21,10 @@ const editor = acquireVsCodeApi()
2021
const useRouter = (): Output => {
2122
const [state, send] = useMachine<T.MachineContext, any>(createMachine({ editorSend: editor.postMessage }))
2223

24+
if (LOG_STATE) {
25+
console.log(JSON.stringify(state.value))
26+
}
27+
2328
// event bus listener
2429
React.useEffect(() => {
2530
const listener = 'message'

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

Lines changed: 64 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@ const styles = {
1212
page: {
1313
backgroundColor: 'white',
1414
position: 'relative' as 'relative',
15+
height: 'auto',
16+
width: '100%',
17+
},
18+
content: {
1519
display: 'flex' as 'flex',
1620
flexDirection: 'column' as 'column',
1721
padding: 0,
1822
paddingBottom: '5rem',
19-
height: 'auto',
20-
width: '100%',
2123
},
2224
header: {
2325
height: '2rem',
@@ -26,13 +28,11 @@ const styles = {
2628
lineHeight: '1rem',
2729
padding: '10px 1rem',
2830
},
29-
content: {
31+
text: {
3032
padding: '0rem 1rem',
3133
paddingBottom: '1rem',
3234
},
33-
tasks: {
34-
paddingBottom: '5rem',
35-
},
35+
tasks: {},
3636
steps: {
3737
padding: '1rem 1rem',
3838
},
@@ -85,8 +85,10 @@ interface Props {
8585
}
8686

8787
const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Props) => {
88-
if (!level.steps) {
89-
throw new Error('No Stage steps found')
88+
// @ts-ignore
89+
let currentStep = level.steps.findIndex(s => s.status === 'ACTIVE')
90+
if (currentStep === -1) {
91+
currentStep = level.steps.length
9092
}
9193

9294
const pageBottomRef = React.useRef(null)
@@ -95,70 +97,70 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
9597
// @ts-ignore
9698
pageBottomRef.current.scrollIntoView({ behavior: 'smooth' })
9799
}
98-
// @ts-ignore
99-
let currentStep = level.steps.findIndex(s => s.status === 'ACTIVE')
100-
if (currentStep === -1) {
101-
currentStep = level.steps.length
102-
}
103100
React.useEffect(scrollToBottom, [currentStep])
104101

105102
return (
106103
<div css={styles.page}>
107-
<div css={styles.header}>
108-
<span>Learn</span>
109-
</div>
110104
<div css={styles.content}>
111-
<h2 css={styles.title}>{level.title}</h2>
112-
<Markdown>{level.content || ''}</Markdown>
113-
</div>
114-
115-
<div css={styles.tasks}>
116-
<div css={styles.header}>Tasks</div>
117-
<div css={styles.steps}>
118-
{level.steps.map((step: (G.Step & { status: T.ProgressStatus }) | null, index: number) => {
119-
if (!step) {
120-
return null
121-
}
122-
return (
123-
<Step
124-
key={step.id}
125-
order={index + 1}
126-
status={step.status}
127-
content={step.content}
128-
onLoadSolution={onLoadSolution}
129-
/>
130-
)
131-
})}
105+
<div css={styles.header}>
106+
<span>Learn</span>
107+
</div>
108+
<div css={styles.text}>
109+
<h2 css={styles.title}>{level.title}</h2>
110+
<Markdown>{level.content || ''}</Markdown>
132111
</div>
112+
113+
{level.steps.length ? (
114+
<div css={styles.tasks}>
115+
<div css={styles.header}>Tasks</div>
116+
<div css={styles.steps}>
117+
{level.steps.map((step: (G.Step & { status: T.ProgressStatus }) | null, index: number) => {
118+
if (!step) {
119+
return null
120+
}
121+
return (
122+
<Step
123+
key={step.id}
124+
order={index + 1}
125+
status={step.status}
126+
content={step.content}
127+
onLoadSolution={onLoadSolution}
128+
/>
129+
)
130+
})}
131+
</div>
132+
</div>
133+
) : null}
134+
133135
<div ref={pageBottomRef} />
134-
</div>
135136

136-
{(testStatus || processes.length > 0) && (
137-
<div css={styles.processes}>
138-
<ProcessMessages processes={processes} testStatus={testStatus} />
139-
</div>
140-
)}
137+
{(testStatus || processes.length > 0) && (
138+
<div css={styles.processes}>
139+
<ProcessMessages processes={processes} testStatus={testStatus} />
140+
</div>
141+
)}
141142

142-
<div css={styles.nux}>
143-
<NuxTutorial onLoadSolution={onLoadSolution} />
144-
</div>
143+
<div css={styles.nux}>
144+
<NuxTutorial onLoadSolution={onLoadSolution} />
145+
</div>
145146

146-
<div css={styles.footer}>
147-
<span>
148-
{typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
149-
{level.title}
150-
</span>
151-
<span>
152-
{level.status === 'COMPLETE' ? (
153-
<Button type="primary" onClick={onContinue}>
154-
Continue
155-
</Button>
156-
) : (
157-
<span css={styles.taskCount}>
158-
{currentStep} of {level.steps.length} tasks
159-
</span>
160-
)}
161-
</span>
147+
<div css={styles.footer}>
148+
<span>
149+
{typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
150+
{level.title}
151+
</span>
152+
<span>
153+
{level.status === 'COMPLETE' || !level.steps.length ? (
154+
<Button type="primary" onClick={onContinue}>
155+
Continue
156+
</Button>
157+
) : (
158+
<span css={styles.taskCount}>
159+
{currentStep} of {level.steps.length} tasks
160+
</span>
161+
)}
162+
</span>
163+
</div>
162164
</div>
163165
</div>
164166
)

‎web-app/src/environment.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ export const DEBUG: boolean = (process.env.REACT_APP_DEBUG || '').toLowerCase()
1212
export const VERSION: string = process.env.VERSION || 'unknown'
1313
export const NODE_ENV: string = process.env.NODE_ENV || 'production'
1414
export const AUTH_TOKEN: string | null = process.env.AUTH_TOKEN || null
15+
export const LOG_STATE: boolean = (process.env.LOG_STATE || '').toLowerCase() === 'true'

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import * as tutorial from './tutorial'
55

66
export const defaultPosition = () => ({
77
levelId: '',
8-
stepId: '',
8+
stepId: null,
99
})
1010

1111
export const initialPosition = createSelector(tutorial.currentVersion, (version: G.TutorialVersion) => {
1212
const level = version.data.levels[0]
1313
const position: CR.Position = {
1414
levelId: level.id,
15-
stepId: level.steps[0].id,
15+
stepId: level.steps.length ? level.steps[0].id : null,
1616
}
1717
return position
1818
})

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

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,9 @@ export const currentLevel = (context: MachineContext): G.Level =>
4141
},
4242
)(context)
4343

44-
export const currentStep = (context: MachineContext): G.Step =>
45-
createSelector(
46-
currentLevel,
47-
(level: G.Level): G.Step => {
48-
const steps: G.Step[] = level.steps
49-
const step: G.Step | undefined = steps.find((s: G.Step) => s.id === context.position.stepId)
50-
if (!step) {
51-
const error = new Error(`No Step found for Level ${level.id}. Expected step ${context.position.stepId}`)
52-
onError(error)
53-
throw error
54-
}
55-
return step
56-
},
57-
)(context)
44+
export const currentStep = (context: MachineContext): G.Step | null =>
45+
createSelector(currentLevel, (level: G.Level): G.Step | null => {
46+
const steps: G.Step[] = level.steps
47+
const step: G.Step | null = steps.find((s: G.Step) => s.id === context.position.stepId) || null
48+
return step
49+
})(context)

0 commit comments

Comments
 (0)