Skip to content

Commit 6cdcc6a

Browse files
ShMcKShMcK
committed
refactor level
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent ef4e4aa commit 6cdcc6a

File tree

8 files changed

+193
-191
lines changed

8 files changed

+193
-191
lines changed

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

Lines changed: 7 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@ import * as React from 'react'
22
import * as T from 'typings'
33
import * as TT from 'typings/tutorial'
44
import { css, jsx } from '@emotion/core'
5-
import Button from '../../../components/Button'
65
import Markdown from '../../../components/Markdown'
7-
import ProcessMessages from '../../../components/ProcessMessages'
8-
import TestMessage from '../../../components/TestMessage'
96
import Step from './Step'
10-
import { DISPLAY_RUN_TEST_BUTTON } from '../../../environment'
117

128
const styles = {
139
page: {
@@ -40,46 +36,11 @@ const styles = {
4036
fontWeight: 'bold' as 'bold',
4137
lineHeight: '1.2rem',
4238
},
43-
processes: {
44-
padding: '0 1rem',
45-
position: 'fixed' as 'fixed',
46-
bottom: '2rem',
47-
left: 0,
48-
right: 0,
49-
top: 'auto',
50-
},
51-
testMessage: {
52-
position: 'absolute' as 'absolute',
53-
top: 'auto',
54-
bottom: '2rem',
55-
left: '5px',
56-
right: '5px',
57-
},
58-
footer: {
59-
display: 'flex' as 'flex',
60-
flexDirection: 'row' as 'row',
61-
justifyContent: 'space-between',
62-
alignItems: 'center',
63-
height: '2rem',
64-
backgroundColor: 'black',
65-
fontSize: '1rem',
66-
lineHeight: '1rem',
67-
padding: '10px 1rem',
68-
position: 'fixed' as 'fixed',
69-
bottom: 0,
70-
left: 0,
71-
right: 0,
72-
color: 'white',
73-
},
74-
taskCount: {
75-
fontSize: '0.8rem',
76-
opacity: 0.9,
77-
},
7839
}
7940

8041
interface Props {
81-
tutorial: Exclude<TT.Tutorial, 'config'>
82-
index: number
42+
level: TT.Level
43+
currentStep: number
8344
status: 'COMPLETE' | 'ACTIVE' | 'INCOMPLETE'
8445
progress: T.Progress
8546
position: T.Position
@@ -91,21 +52,7 @@ interface Props {
9152
onOpenLogs(channel: string): void
9253
}
9354

94-
const Level = ({
95-
tutorial,
96-
index,
97-
status,
98-
progress,
99-
position,
100-
onContinue,
101-
onRunTest,
102-
onLoadSolution,
103-
onOpenLogs,
104-
processes,
105-
testStatus,
106-
}: Props) => {
107-
const level: TT.Level = tutorial.levels[index]
108-
55+
const Level = ({ level, progress, position, onLoadSolution, currentStep, testStatus }: Props) => {
10956
// hold state for hints for the level
11057
const [displayHintsIndex, setDisplayHintsIndex] = React.useState<number[]>([])
11158
const setHintsIndex = (index: number, value: number) => {
@@ -117,10 +64,10 @@ const Level = ({
11764
}
11865
React.useEffect(() => {
11966
// set the hints to empty on level starts
120-
setDisplayHintsIndex(steps.map((s) => -1))
67+
setDisplayHintsIndex(level.steps.map((s: TT.Step) => -1))
12168
}, [position.levelId])
12269

123-
const steps: Array<TT.Step & { status: T.ProgressStatus }> = level.steps.map((step: TT.Step) => {
70+
const steps: TT.Step[] = level.steps.map((step: TT.Step) => {
12471
// label step status for step component
12572
let status: T.ProgressStatus = 'INCOMPLETE'
12673
if (progress.steps[step.id]) {
@@ -132,10 +79,6 @@ const Level = ({
13279
})
13380

13481
// current
135-
let currentStep = steps.findIndex((s) => s.status === 'ACTIVE')
136-
if (currentStep === -1) {
137-
currentStep = steps.length
138-
}
13982

14083
const pageBottomRef = React.useRef(null)
14184
const scrollToBottom = () => {
@@ -159,7 +102,7 @@ const Level = ({
159102
{steps.length ? (
160103
<div css={styles.tasks}>
161104
<div css={styles.steps}>
162-
{steps.map((step: (TT.Step & { status: T.ProgressStatus }) | null, stepIndex: number) => {
105+
{steps.map((step: TT.Step | null, stepIndex: number) => {
163106
if (!step) {
164107
return null
165108
}
@@ -173,8 +116,7 @@ const Level = ({
173116
return (
174117
<Step
175118
key={step.id}
176-
index={index}
177-
status={step.status}
119+
status={step.status || 'INCOMPLETE'}
178120
content={step.content}
179121
onLoadSolution={onLoadSolution}
180122
subtasks={subtasks}
@@ -189,38 +131,6 @@ const Level = ({
189131
) : null}
190132

191133
<div ref={pageBottomRef} />
192-
193-
<div css={styles.footer}>
194-
{/* Process Modal */}
195-
{processes.length > 0 && (
196-
<div css={styles.processes}>
197-
<ProcessMessages processes={processes} />
198-
</div>
199-
)}
200-
{/* Test Fail Modal */}
201-
{testStatus && testStatus.type === 'warning' && (
202-
<div css={styles.testMessage}>
203-
<TestMessage message={testStatus.title} />
204-
</div>
205-
)}
206-
207-
{DISPLAY_RUN_TEST_BUTTON && status !== 'COMPLETE' ? (
208-
<Button type="primary" onClick={onRunTest} disabled={processes.length > 0}>
209-
Run
210-
</Button>
211-
) : null}
212-
<span>
213-
{status === 'COMPLETE' || !steps.length ? (
214-
<Button type="primary" onClick={onContinue}>
215-
Continue
216-
</Button>
217-
) : (
218-
<span css={styles.taskCount}>
219-
{currentStep} of {steps.length} tasks
220-
</span>
221-
)}
222-
</span>
223-
</div>
224134
</div>
225135
</div>
226136
)

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ const styles = {
1919
interface Props {
2020
visible: boolean
2121
toggleVisible(visible: boolean): void
22+
page: 'level' | 'settings' | 'review'
23+
setPage(page: 'level' | 'settings' | 'review'): void
2224
}
2325

2426
const SideMenu = (props: Props) => {
@@ -35,17 +37,16 @@ const SideMenu = (props: Props) => {
3537
onClose={onMenuClose}
3638
>
3739
<Menu style={styles.menu} defaultOpenKeys="sub-menu">
38-
<Item disabled key="1">
40+
<Item key="level" disabled={props.page === 'level'} onClick={() => props.setPage('level')}>
41+
<Icon type="detail" size="small" color="#EBEBEB" />
42+
<span style={styles.itemText}>Level</span>
43+
</Item>
44+
<Item key="review" disabled={props.page === 'review'} onClick={() => props.setPage('review')}>
3945
<Icon type="list" size="small" color="#EBEBEB" />
4046
<span style={styles.itemText}>Review</span>
4147
</Item>
42-
{/* <Divider key="divider" />
43-
<Item disabled key="2">
44-
<Icon type="help" size="small" color="#EBEBEB" />
45-
<span style={styles.itemText}>Help</span>
46-
</Item> */}
4748
<Divider key="divider" />
48-
<Item disabled key="3">
49+
<Item key="settings" disabled={props.page === 'settings'} onClick={() => props.setPage('review')}>
4950
<Icon type="set" size="small" color="#EBEBEB" />
5051
<span style={styles.itemText}>Settings</span>
5152
</Item>

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@ 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 Icon from '../../../components/Icon'
65
import Hints from './Hints'
76
import Markdown from '../../../components/Markdown'
87

98
interface Props {
10-
index: number
119
content: string
1210
status: T.ProgressStatus
1311
subtasks: { name: string; pass: boolean }[] | null
@@ -76,7 +74,6 @@ const Step = (props: Props) => {
7674
return (
7775
<li key={subtask.name} css={styles.subtask}>
7876
<TestStatusIcon size="xs" status={subtaskStatus} />
79-
8077
<span style={{ marginLeft: '0.5rem' }}>{subtask.name}</span>
8178
</li>
8279
)

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react'
2+
3+
const styles = {
4+
container: {
5+
padding: '1rem',
6+
},
7+
}
8+
9+
const ReviewPage = () => {
10+
return <div css={styles.container}>Review Coming soon...</div>
11+
}
12+
13+
export default ReviewPage

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react'
2+
3+
const styles = {
4+
container: {
5+
padding: '1rem',
6+
},
7+
}
8+
9+
const SettingsPage = () => {
10+
return <div css={styles.container}>Settings coming soon...</div>
11+
}
12+
13+
export default SettingsPage

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

Lines changed: 106 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ import * as selectors from '../../services/selectors'
55
import SideMenu from './components/SideMenu'
66
import Level from './components/Level'
77
import Icon from '../../components/Icon'
8+
import SettingsPage from './containers/Settings'
9+
import ReviewPage from './containers/Review'
10+
import Button from '../../components/Button'
11+
import ProcessMessages from '../../components/ProcessMessages'
12+
import TestMessage from '../../components/TestMessage'
13+
import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
814

915
const styles = {
1016
header: {
@@ -24,6 +30,41 @@ const styles = {
2430
textDecoration: 'none',
2531
color: 'inherit',
2632
},
33+
footer: {
34+
display: 'flex' as 'flex',
35+
flexDirection: 'row' as 'row',
36+
justifyContent: 'space-between',
37+
alignItems: 'center',
38+
height: '2rem',
39+
backgroundColor: 'black',
40+
fontSize: '1rem',
41+
lineHeight: '1rem',
42+
padding: '10px 1rem',
43+
position: 'fixed' as 'fixed',
44+
bottom: 0,
45+
left: 0,
46+
right: 0,
47+
color: 'white',
48+
},
49+
taskCount: {
50+
fontSize: '0.8rem',
51+
opacity: 0.9,
52+
},
53+
processes: {
54+
padding: '0 1rem',
55+
position: 'fixed' as 'fixed',
56+
bottom: '2rem',
57+
left: 0,
58+
right: 0,
59+
top: 'auto',
60+
},
61+
testMessage: {
62+
position: 'absolute' as 'absolute',
63+
top: 'auto',
64+
bottom: '2rem',
65+
left: '5px',
66+
right: '5px',
67+
},
2768
}
2869

2970
interface PageProps {
@@ -59,30 +100,76 @@ const TutorialPage = (props: PageProps) => {
59100

60101
const levelIndex = tutorial.levels.findIndex((l: TT.Level) => l.id === position.levelId)
61102
const levelStatus = progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'
103+
const level: TT.Level = tutorial.levels[levelIndex]
62104
const [menuVisible, setMenuVisible] = React.useState(false)
63105

106+
const [page, setPage] = React.useState<'level' | 'settings' | 'review'>('level')
107+
108+
let currentStep = level.steps.findIndex((s: TT.Step) => s.status === 'ACTIVE')
109+
if (currentStep === -1) {
110+
currentStep = level.steps.length
111+
}
112+
64113
return (
65114
<div>
66-
<div css={styles.header}>
67-
<a onClick={() => setMenuVisible(!menuVisible)}>
68-
<Icon type="toggle-left" size="small" />
69-
</a>
70-
<span css={styles.title}>{tutorial.summary.title}</span>
115+
<div>
116+
<div css={styles.header}>
117+
<a onClick={() => setMenuVisible(!menuVisible)}>
118+
<Icon type="toggle-left" size="small" />
119+
</a>
120+
<span css={styles.title}>{tutorial.summary.title}</span>
121+
</div>
122+
123+
{page === 'level' && (
124+
<Level
125+
level={level}
126+
currentStep={currentStep}
127+
status={levelStatus}
128+
progress={progress}
129+
position={position}
130+
onContinue={onContinue}
131+
onRunTest={onRunTest}
132+
onLoadSolution={onLoadSolution}
133+
onOpenLogs={onOpenLogs}
134+
processes={processes}
135+
testStatus={testStatus}
136+
/>
137+
)}
138+
{page === 'settings' && <SettingsPage />}
139+
{page === 'review' && <ReviewPage />}
140+
</div>
141+
<div css={styles.footer}>
142+
{/* Process Modal */}
143+
{processes.length > 0 && (
144+
<div css={styles.processes}>
145+
<ProcessMessages processes={processes} />
146+
</div>
147+
)}
148+
{/* Test Fail Modal */}
149+
{testStatus && testStatus.type === 'warning' && (
150+
<div css={styles.testMessage}>
151+
<TestMessage message={testStatus.title} />
152+
</div>
153+
)}
154+
155+
{DISPLAY_RUN_TEST_BUTTON && levelStatus !== 'COMPLETE' ? (
156+
<Button type="primary" onClick={onRunTest} disabled={processes.length > 0}>
157+
Run
158+
</Button>
159+
) : null}
160+
<span>
161+
{levelStatus === 'COMPLETE' || !level.steps.length ? (
162+
<Button type="primary" onClick={onContinue}>
163+
Continue
164+
</Button>
165+
) : (
166+
<span css={styles.taskCount}>
167+
{currentStep} of {level.steps.length} tasks
168+
</span>
169+
)}
170+
</span>
71171
</div>
72-
<Level
73-
tutorial={tutorial}
74-
index={levelIndex}
75-
status={levelStatus}
76-
progress={progress}
77-
position={position}
78-
onContinue={onContinue}
79-
onRunTest={onRunTest}
80-
onLoadSolution={onLoadSolution}
81-
onOpenLogs={onOpenLogs}
82-
processes={processes}
83-
testStatus={testStatus}
84-
/>
85-
<SideMenu visible={menuVisible} toggleVisible={setMenuVisible} />
172+
<SideMenu visible={menuVisible} toggleVisible={setMenuVisible} page={page} setPage={setPage} />
86173
</div>
87174
)
88175
}

0 commit comments

Comments
 (0)