Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3a0575e

Browse files
committed
format levels/steps/subtasks in fn
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent041a760 commit3a0575e

File tree

5 files changed

+88
-78
lines changed

5 files changed

+88
-78
lines changed

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

Lines changed: 5 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,9 @@ const styles = {
3737

3838
interfaceProps{
3939
level:TT.Level
40-
currentStep:number
41-
status:'COMPLETE'|'ACTIVE'|'INCOMPLETE'
42-
progress:T.Progress
43-
position:T.Position
44-
processes:T.ProcessEvent[]
45-
testStatus:T.TestStatus|null
4640
}
4741

48-
constLevel=({ level, progress, position, currentStep, testStatus}:Props)=>{
42+
constLevel=({ level}:Props)=>{
4943
// hold state for hints for the level
5044
const[displayHintsIndex,setDisplayHintsIndex]=React.useState<number[]>([])
5145
constsetHintsIndex=(index:number,value:number)=>{
@@ -58,41 +52,23 @@ const Level = ({ level, progress, position, currentStep, testStatus }: Props) =>
5852
React.useEffect(()=>{
5953
// set the hints to empty on level starts
6054
setDisplayHintsIndex(level.steps.map((s:TT.Step)=>-1))
61-
},[position.levelId])
62-
63-
conststeps:TT.Step[]=level.steps.map((step:TT.Step)=>{
64-
// label step status for step component
65-
letstatus:T.ProgressStatus='INCOMPLETE'
66-
if(progress.steps[step.id]){
67-
status='COMPLETE'
68-
}elseif(step.id===position.stepId){
69-
status='ACTIVE'
70-
}
71-
return{ ...step, status}
72-
})
73-
74-
// current
55+
},[level.id])
7556

7657
constpageBottomRef=React.useRef(null)
7758
constscrollToBottom=()=>{
7859
//@ts-ignore
7960
pageBottomRef.current.scrollIntoView({behavior:'smooth'})
8061
}
81-
React.useEffect(scrollToBottom,[currentStep])
62+
React.useEffect(scrollToBottom,[level.id])
8263

8364
return(
8465
<divcss={styles.page}>
8566
<divcss={styles.content}>
8667
<Contenttitle={level.title}content={level.content}/>
8768

88-
{level.content.length&&steps.length ?<divcss={styles.separator}/> :null}
69+
{level.content.length&&level.steps.length ?<divcss={styles.separator}/> :null}
8970

90-
<Steps
91-
steps={steps}
92-
testStatus={testStatus}
93-
setHintsIndex={setHintsIndex}
94-
displayHintsIndex={displayHintsIndex}
95-
/>
71+
<Stepssteps={level.steps}setHintsIndex={setHintsIndex}displayHintsIndex={displayHintsIndex}/>
9672

9773
<divref={pageBottomRef}/>
9874
</div>

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Hints from './Hints'
66

77
interfaceProps{
88
steps:TT.Step[]
9-
testStatus:T.TestStatus|null
109
displayHintsIndex:number[]
1110
setHintsIndex(stepIndex:number,value:number):void
1211
}
@@ -23,20 +22,14 @@ const Steps = (props: Props) => {
2322
}
2423
return(
2524
<divcss={styles.steps}>
26-
{props.steps.map((step:TT.Step|null,stepIndex:number)=>{
25+
{/*@ts-ignore typings are different between UI & data */}
26+
{props.steps.map((step:TT.Step&{subtasks:null|{name:string;pass:boolean}[]},stepIndex:number)=>{
2727
if(!step){
2828
returnnull
2929
}
30-
letsubtasks=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-
}
3730
return(
3831
<>
39-
<Stepkey={step.id}status={step.status||'INCOMPLETE'}content={step.content}subtasks={subtasks}/>
32+
<Stepkey={step.id}status={step.status||'INCOMPLETE'}content={step.content}subtasks={step.subtasks}/>
4033
<Hints
4134
hints={step.hints||[]}
4235
hintIndex={props.displayHintsIndex[stepIndex]}

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import Content from '../components/Content'
66

77
interfaceProps{
88
levels:TT.Level[]
9-
progress:T.Progress
10-
testStatus:T.TestStatus
119
}
1210

1311
conststyles={
@@ -25,12 +23,7 @@ const ReviewPage = (props: Props) => {
2523
<>
2624
<div>
2725
<Contenttitle={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-
/>
26+
<Stepssteps={level.steps}displayHintsIndex={level.steps.map((s)=>-1)}setHintsIndex={()=>{}}/>
3427
</div>
3528
{index<props.levels.length-1 ?<hr/> :null}
3629
</>
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import*asTfrom'typings'
2+
import*asTTfrom'typings/tutorial'
3+
4+
interfaceProps{
5+
progress:T.Progress
6+
position:T.Position
7+
levels:TT.Level[]
8+
testStatus:T.TestStatus|null
9+
}
10+
11+
/*
12+
* Format levels to include:
13+
* - level.status = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE'
14+
* - step.status = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE' | 'FAIL'
15+
* - step.subtasks as { name: string, pass: boolean }[]
16+
*/
17+
constformatLevels=({
18+
progress,
19+
position,
20+
levels,
21+
testStatus,
22+
}:Props):{levels:TT.Level[];level:TT.Level;stepIndex:number}=>{
23+
// clone levels
24+
constformattedLevels=[...levels]
25+
26+
constlevel=formattedLevels.find((l:TT.Level)=>l.id===position.levelId)
27+
28+
if(!level){
29+
thrownewError(`Level "${position.levelId}" not found`)
30+
}
31+
32+
// add level status
33+
level.status=progress.levels[position.levelId] ?'COMPLETE' :'ACTIVE'
34+
35+
// add step status
36+
level.steps=level.steps.map((step:TT.Step)=>{
37+
// label step status for step component
38+
letstatus:T.ProgressStatus='INCOMPLETE'
39+
if(progress.steps[step.id]){
40+
status='COMPLETE'
41+
}elseif(step.id===position.stepId){
42+
status='ACTIVE'
43+
if(step.subtasks&&step.subtasks){
44+
step.subtasks.map((subtask:string,subtaskIndex:number)=>({
45+
name:subtask,
46+
pass:!!(testStatus?.summary ?testStatus.summary[subtaskIndex] :false),
47+
}))
48+
}
49+
}
50+
return{ ...step, status}
51+
})
52+
53+
letstepIndex=level.steps.findIndex((s:TT.Step)=>s.status==='ACTIVE')
54+
if(stepIndex===-1){
55+
stepIndex=level.steps.length
56+
}
57+
return{levels:formattedLevels, level, stepIndex}
58+
}
59+
60+
exportdefaultformatLevels

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

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import ProcessMessages from '../../components/ProcessMessages'
1212
importTestMessagefrom'../../components/TestMessage'
1313
import{Progress}from'@alifd/next'
1414
import{DISPLAY_RUN_TEST_BUTTON}from'../../environment'
15+
importformatLevelsfrom'./formatLevels'
1516

1617
conststyles={
1718
header:{
@@ -76,6 +77,12 @@ interface PageProps {
7677
send(action:T.Action):void
7778
}
7879

80+
/**
81+
* NOTE: Unused commands
82+
* { type: 'STEP_SOLUTION_LOAD' }
83+
* { type: 'OPEN_LOGS', payload: { channel }}
84+
*/
85+
7986
constTutorialPage=(props:PageProps)=>{
8087
const{ position, progress, processes, testStatus}=props.context
8188

@@ -90,29 +97,20 @@ const TutorialPage = (props: PageProps) => {
9097
})
9198
}
9299

93-
// const onLoadSolution = (): void => {
94-
// props.send({ type: 'STEP_SOLUTION_LOAD' })
95-
// }
96-
97100
constonRunTest=():void=>{
98101
props.send({type:'RUN_TEST'})
99102
}
100103

101-
// const onOpenLogs = (channel: string): void => {
102-
// props.send({ type: 'OPEN_LOGS', payload: { channel }})
103-
// }
104-
105-
constlevelIndex=tutorial.levels.findIndex((l:TT.Level)=>l.id===position.levelId)
106-
constlevelStatus=progress.levels[position.levelId] ?'COMPLETE' :'ACTIVE'
107-
constlevel:TT.Level=tutorial.levels[levelIndex]
108104
const[menuVisible,setMenuVisible]=React.useState(false)
109105

110106
const[page,setPage]=React.useState<'level'|'settings'|'review'>('level')
111107

112-
letcurrentStep=level.steps.findIndex((s:TT.Step)=>s.status==='ACTIVE')
113-
if(currentStep===-1){
114-
currentStep=level.steps.length
115-
}
108+
const{ level, levels, stepIndex}=formatLevels({
109+
progress,
110+
position,
111+
levels:tutorial.levels,
112+
testStatus,
113+
})
116114

117115
return(
118116
<div>
@@ -124,19 +122,9 @@ const TutorialPage = (props: PageProps) => {
124122
<spancss={styles.title}>{tutorial.summary.title}</span>
125123
</div>
126124

127-
{page==='level'&&(
128-
<Level
129-
level={level}
130-
currentStep={currentStep}
131-
status={levelStatus}
132-
progress={progress}
133-
position={position}
134-
processes={processes}
135-
testStatus={testStatus}
136-
/>
137-
)}
125+
{page==='level'&&<Levellevel={level}/>}
138126
{page==='settings'&&<SettingsPage/>}
139-
{page==='review'&&<ReviewPagelevels={tutorial.levels}progress={progress}testStatus={testStatus}/>}
127+
{page==='review'&&<ReviewPagelevels={levels}/>}
140128
</div>
141129
<divcss={styles.footer}>
142130
{/* Process Modal */}
@@ -152,7 +140,7 @@ const TutorialPage = (props: PageProps) => {
152140
</div>
153141
)}
154142
{/* Left */}
155-
{DISPLAY_RUN_TEST_BUTTON&&levelStatus!=='COMPLETE' ?(
143+
{DISPLAY_RUN_TEST_BUTTON&&level.status!=='COMPLETE' ?(
156144
<Buttonstyle={{marginLeft:'1rem'}}type="primary"onClick={onRunTest}disabled={processes.length>0}>
157145
Run
158146
</Button>
@@ -165,22 +153,22 @@ const TutorialPage = (props: PageProps) => {
165153

166154
{/* Right */}
167155
<div>
168-
{levelStatus==='COMPLETE'||!level.steps.length ?(
156+
{level.status==='COMPLETE'||!level.steps.length ?(
169157
<Buttontype="primary"onClick={onContinue}>
170158
Continue
171159
</Button>
172160
) :(
173161
<Progress
174162
state="success"
175163
progressive
176-
percent={(currentStep/level.steps.length)*100}
164+
percent={(stepIndex/level.steps.length)*100}
177165
shape="line"
178166
color="rgb(85, 132, 255)"
179167
css={styles.taskProgress}
180168
textRender={(percent:number)=>{
181169
return(
182170
<spanstyle={{color:'white'}}>
183-
{currentStep} of{level.steps.length}
171+
{stepIndex} of{level.steps.length}
184172
</span>
185173
)
186174
}}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp