Skip to content

Commit 7869186

Browse files
ShMcKShMcK
committed
show content in review
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent d247114 commit 7869186

File tree

9 files changed

+255
-125
lines changed

9 files changed

+255
-125
lines changed

‎web-app/src/containers/Tutorial/components/Hints.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ interface Props {
2525
}
2626

2727
const Hints = (props: Props) => {
28+
if (!props.hints || !props.hints.length) {
29+
return null
30+
}
2831
const isFinalHint = props.hints.length - 1 === props.hintIndex
2932
const nextHint = () => {
3033
if (isFinalHint) {

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

Lines changed: 9 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as T from 'typings'
33
import * as TT from 'typings/tutorial'
44
import { css, jsx } from '@emotion/core'
55
import Content from './Content'
6-
import Step from './Step'
6+
import Steps from './Steps'
77

88
const styles = {
99
page: {
@@ -27,10 +27,7 @@ const styles = {
2727
height: 0,
2828
borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
2929
},
30-
tasks: {},
31-
steps: {
32-
padding: '1rem 1rem',
33-
},
30+
3431
title: {
3532
fontSize: '1.2rem',
3633
fontWeight: 'bold' as 'bold',
@@ -46,13 +43,9 @@ interface Props {
4643
position: T.Position
4744
processes: T.ProcessEvent[]
4845
testStatus: T.TestStatus | null
49-
onContinue(): void
50-
onRunTest(): void
51-
onLoadSolution(): void
52-
onOpenLogs(channel: string): void
5346
}
5447

55-
const Level = ({ level, progress, position, onLoadSolution, currentStep, testStatus }: Props) => {
48+
const Level = ({ level, progress, position, currentStep, testStatus }: Props) => {
5649
// hold state for hints for the level
5750
const [displayHintsIndex, setDisplayHintsIndex] = React.useState<number[]>([])
5851
const setHintsIndex = (index: number, value: number) => {
@@ -94,36 +87,12 @@ const Level = ({ level, progress, position, onLoadSolution, currentStep, testSta
9487

9588
{level.content.length && steps.length ? <div css={styles.separator} /> : null}
9689

97-
{steps.length ? (
98-
<div css={styles.tasks}>
99-
<div css={styles.steps}>
100-
{steps.map((step: TT.Step | null, stepIndex: number) => {
101-
if (!step) {
102-
return null
103-
}
104-
let subtasks = null
105-
if (step?.subtasks) {
106-
subtasks = step.subtasks.map((subtask: string, subtaskIndex: number) => ({
107-
name: subtask,
108-
pass: !!(testStatus?.summary ? testStatus.summary[subtaskIndex] : false),
109-
}))
110-
}
111-
return (
112-
<Step
113-
key={step.id}
114-
status={step.status || 'INCOMPLETE'}
115-
content={step.content}
116-
onLoadSolution={onLoadSolution}
117-
subtasks={subtasks}
118-
hints={step.hints}
119-
hintIndex={displayHintsIndex[stepIndex]}
120-
setHintIndex={(value) => setHintsIndex(stepIndex, value)}
121-
/>
122-
)
123-
})}
124-
</div>
125-
</div>
126-
) : null}
90+
<Steps
91+
steps={steps}
92+
testStatus={testStatus}
93+
setHintsIndex={setHintsIndex}
94+
displayHintsIndex={displayHintsIndex}
95+
/>
12796

12897
<div ref={pageBottomRef} />
12998
</div>

‎web-app/src/containers/Tutorial/components/Step.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,12 @@ import * as React from 'react'
22
import * as T from 'typings'
33
import { css, jsx } from '@emotion/core'
44
import TestStatusIcon from './TestStatusIcon'
5-
import Hints from './Hints'
65
import Markdown from '../../../components/Markdown'
76

87
interface Props {
98
content: string
109
status: T.ProgressStatus
1110
subtasks: { name: string; pass: boolean }[] | null
12-
hints?: string[]
13-
hintIndex: number
14-
setHintIndex(value: number): void
15-
onLoadSolution(): void
1611
}
1712

1813
const styles = {
@@ -80,10 +75,6 @@ const Step = (props: Props) => {
8075
})}
8176
</ul>
8277
) : null}
83-
{/* hints */}
84-
{props.hints && props.hints.length ? (
85-
<Hints hints={props.hints} hintIndex={props.hintIndex} setHintIndex={props.setHintIndex} />
86-
) : null}
8778
</div>
8879
</div>
8980
</div>

‎web-app/src/containers/Tutorial/components/Steps.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as React from 'react'
2+
import * as T from 'typings'
3+
import * as TT from 'typings/tutorial'
4+
import Step from './Step'
5+
import Hints from './Hints'
6+
7+
interface Props {
8+
steps: TT.Step[]
9+
testStatus: T.TestStatus | null
10+
displayHintsIndex: number[]
11+
setHintsIndex(stepIndex: number, value: number): void
12+
}
13+
14+
const styles = {
15+
steps: {
16+
padding: '1rem 1rem',
17+
},
18+
}
19+
20+
const Steps = (props: Props) => {
21+
if (!props.steps.length) {
22+
return null
23+
}
24+
return (
25+
<div css={styles.steps}>
26+
{props.steps.map((step: TT.Step | null, stepIndex: number) => {
27+
if (!step) {
28+
return null
29+
}
30+
let subtasks = null
31+
if (step?.subtasks) {
32+
subtasks = step.subtasks.map((subtask: string, subtaskIndex: number) => ({
33+
name: subtask,
34+
pass: !!(props.testStatus?.summary ? props.testStatus.summary[subtaskIndex] : false),
35+
}))
36+
}
37+
return (
38+
<>
39+
<Step key={step.id} status={step.status || 'INCOMPLETE'} content={step.content} subtasks={subtasks} />
40+
<Hints
41+
hints={step.hints || []}
42+
hintIndex={props.displayHintsIndex[stepIndex]}
43+
setHintIndex={(value) => props.setHintsIndex(stepIndex, value)}
44+
/>
45+
</>
46+
)
47+
})}
48+
</div>
49+
)
50+
}
51+
52+
export default Steps

‎web-app/src/containers/Tutorial/containers/Review.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import * as React from 'react'
2+
import * as T from 'typings'
23
import * as TT from 'typings/tutorial'
4+
import Steps from '../components/Steps'
35
import Content from '../components/Content'
46

57
interface Props {
68
levels: TT.Level[]
9+
progress: T.Progress
10+
testStatus: T.TestStatus
711
}
812

913
const styles = {
1014
container: {
11-
padding: '1rem',
1215
display: 'flex' as 'flex',
1316
flexDirection: 'column' as 'column',
1417
},
@@ -17,11 +20,22 @@ const styles = {
1720
const ReviewPage = (props: Props) => {
1821
return (
1922
<div css={styles.container}>
20-
{props.levels.map((level: TT.Level) => (
21-
<div>
22-
<Content title={level.title} content={level.content} />
23-
</div>
24-
))}
23+
{props.levels.map((level: TT.Level, index: number) => {
24+
return (
25+
<>
26+
<div>
27+
<Content title={level.title} content={level.content} />
28+
<Steps
29+
steps={level.steps}
30+
testStatus={props.testStatus}
31+
displayHintsIndex={level.steps.map((s) => -1)}
32+
setHintsIndex={() => {}}
33+
/>
34+
</div>
35+
{index < props.levels.length - 1 ? <hr /> : null}
36+
</>
37+
)
38+
})}
2539
</div>
2640
)
2741
}

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

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -86,17 +86,17 @@ const TutorialPage = (props: PageProps) => {
8686
})
8787
}
8888

89-
const onLoadSolution = (): void => {
90-
props.send({ type: 'STEP_SOLUTION_LOAD' })
91-
}
89+
// const onLoadSolution = (): void => {
90+
// props.send({ type: 'STEP_SOLUTION_LOAD' })
91+
// }
9292

9393
const onRunTest = (): void => {
9494
props.send({ type: 'RUN_TEST' })
9595
}
9696

97-
const onOpenLogs = (channel: string): void => {
98-
props.send({ type: 'OPEN_LOGS', payload: { channel } })
99-
}
97+
// const onOpenLogs = (channel: string): void => {
98+
// props.send({ type: 'OPEN_LOGS', payload: { channel } })
99+
// }
100100

101101
const levelIndex = tutorial.levels.findIndex((l: TT.Level) => l.id === position.levelId)
102102
const levelStatus = progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'
@@ -127,16 +127,12 @@ const TutorialPage = (props: PageProps) => {
127127
status={levelStatus}
128128
progress={progress}
129129
position={position}
130-
onContinue={onContinue}
131-
onRunTest={onRunTest}
132-
onLoadSolution={onLoadSolution}
133-
onOpenLogs={onOpenLogs}
134130
processes={processes}
135131
testStatus={testStatus}
136132
/>
137133
)}
138134
{page === 'settings' && <SettingsPage />}
139-
{page === 'review' && <ReviewPage levels={tutorial.levels} />}
135+
{page === 'review' && <ReviewPage levels={tutorial.levels} progress={progress} testStatus={testStatus} />}
140136
</div>
141137
<div css={styles.footer}>
142138
{/* Process Modal */}

‎web-app/stories/Level.stories.tsx‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,9 @@ import { action } from '@storybook/addon-actions'
22
import { withKnobs } from '@storybook/addon-knobs'
33
import { storiesOf } from '@storybook/react'
44
import React from 'react'
5-
import * as T from '../../typings'
6-
import * as TT from '../../typings/tutorial'
75
import Level from '../src/containers/Tutorial/components/Level'
86
import SideBarDecorator from './utils/SideBarDecorator'
97

10-
type ModifiedLevel = TT.Level & {
11-
status: T.ProgressStatus
12-
index: number
13-
steps: Array<TT.Step & { status: T.ProgressStatus }>
14-
}
15-
168
const level = {
179
id: '1',
1810
title: 'A Title',
@@ -69,10 +61,6 @@ storiesOf('Level', module)
6961
progress={{ levels: {}, steps: {} }}
7062
processes={[]}
7163
testStatus={null}
72-
onRunTest={action('onRunTest')}
73-
onOpenLogs={action('onOpenLogs')}
74-
onContinue={action('onContinue')}
75-
onLoadSolution={action('onLoadSolution')}
7664
/>
7765
))
7866
.add('Level 2', () => (
@@ -84,10 +72,6 @@ storiesOf('Level', module)
8472
progress={{ levels: {}, steps: { '1.1': true } }}
8573
processes={[]}
8674
testStatus={null}
87-
onRunTest={action('onRunTest')}
88-
onOpenLogs={action('onOpenLogs')}
89-
onContinue={action('onContinue')}
90-
onLoadSolution={action('onLoadSolution')}
9175
/>
9276
))
9377
.add('No steps', () => (
@@ -99,10 +83,6 @@ storiesOf('Level', module)
9983
progress={{ levels: {}, steps: {} }}
10084
processes={[]}
10185
testStatus={null}
102-
onRunTest={action('onRunTest')}
103-
onOpenLogs={action('onOpenLogs')}
104-
onContinue={action('onContinue')}
105-
onLoadSolution={action('onLoadSolution')}
10686
/>
10787
))
10888
.add('No lesson', () => (
@@ -114,9 +94,5 @@ storiesOf('Level', module)
11494
progress={{ levels: {}, steps: {} }}
11595
processes={[]}
11696
testStatus={null}
117-
onRunTest={action('onRunTest')}
118-
onOpenLogs={action('onOpenLogs')}
119-
onContinue={action('onContinue')}
120-
onLoadSolution={action('onLoadSolution')}
12197
/>
12298
))

0 commit comments

Comments
 (0)