File tree Expand file tree Collapse file tree 3 files changed +50
-0
lines changed
src/containers/Tutorial/components Expand file tree Collapse file tree 3 files changed +50
-0
lines changed Original file line number Diff line number Diff line change
1
+ import * as React from 'react'
2
+ import Button from '../../../components/Button'
3
+
4
+ interface Props {
5
+ hints: string[]
6
+ }
7
+
8
+ const Hints = (props: Props) => {
9
+ const [hintIndex, setHintIndex] = React.useState(0)
10
+ const isFinalHint = props.hints.length - 1 === hintIndex
11
+ console.log(hintIndex)
12
+ const nextHint = () => {
13
+ console.log(hintIndex)
14
+ if (!isFinalHint) {
15
+ setHintIndex((currentHintIndex) => currentHintIndex + 1)
16
+ }
17
+ }
18
+ return (
19
+ <div>
20
+ {props.hints.map((h, i) => {
21
+ return i <= hintIndex ? (
22
+ <div key={i} style={{ backgroundColor: 'red' }}>
23
+ {h}
24
+ </div>
25
+ ) : null
26
+ })}
27
+ <Button onClick={nextHint} disabled={isFinalHint}>
28
+ Next Hint
29
+ </Button>
30
+ </div>
31
+ )
32
+ }
33
+
34
+ export default Hints
Original file line number Diff line number Diff line change @@ -2,13 +2,15 @@ import * as React from 'react'
2
2
import * as T from 'typings'
3
3
import { css, jsx } from '@emotion/core'
4
4
import TestStatusIcon from './TestStatusIcon'
5
+ import Hints from './Hints'
5
6
import Markdown from '../../../components/Markdown'
6
7
7
8
interface Props {
8
9
order: number
9
10
content: string
10
11
status: T.ProgressStatus
11
12
subtasks: { name: string; pass: boolean }[] | null
13
+ hints?: string[]
12
14
onLoadSolution(): void
13
15
}
14
16
@@ -54,9 +56,11 @@ const Step = (props: Props) => {
54
56
{props.status === 'COMPLETE' && <TestStatusIcon size="small" checked />}
55
57
</div>
56
58
<div>
59
+ {/* content */}
57
60
<div css={styles.content}>
58
61
<Markdown>{props.content || ''}</Markdown>
59
62
</div>
63
+ {/* subtasks */}
60
64
{props.subtasks ? (
61
65
<ul css={styles.subtasks}>
62
66
{props.subtasks.map((subtask) => (
@@ -68,6 +72,8 @@ const Step = (props: Props) => {
68
72
))}
69
73
</ul>
70
74
) : null}
75
+ {/* hints */}
76
+ {props.hints && props.hints.length ? <Hints hints={props.hints} /> : null}
71
77
</div>
72
78
</div>
73
79
</div>
Original file line number Diff line number Diff line change @@ -98,3 +98,13 @@ storiesOf('Step', module)
98
98
]}
99
99
/>
100
100
))
101
+ .add('Hints', () => (
102
+ <Step
103
+ order={1}
104
+ content={text('text', stepText)}
105
+ status="ACTIVE"
106
+ onLoadSolution={action('onLoadSolution')}
107
+ subtasks={null}
108
+ hints={['First hint!', 'Second hint!']}
109
+ />
110
+ ))
You can’t perform that action at this time.
0 commit comments