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

Commit4db9809

Browse files
committed
format levelUI in tutorial index
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent7bac418 commit4db9809

File tree

3 files changed

+38
-11
lines changed

3 files changed

+38
-11
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import*asReactfrom'react'
2-
import*asTTfrom'typings/tutorial'
2+
import*asTfrom'typings'
33
importStepsfrom'../components/Steps'
44
importContentfrom'../components/Content'
55

66
interfaceProps{
7-
levels:TT.Level[]
7+
levels:T.LevelUI[]
88
}
99

1010
conststyles={
@@ -31,7 +31,7 @@ const ReviewPage = (props: Props) => {
3131
return(
3232
<divcss={styles.container}>
3333
<divcss={styles.header}>Review</div>
34-
{props.levels.map((level:TT.Level,index:number)=>(
34+
{props.levels.map((level:T.LevelUI,index:number)=>(
3535
<divkey={level.id}>
3636
<div>
3737
<Contenttitle={level.title}content={level.content}/>

‎web-app/src/containers/Tutorial/formatLevels.ts‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface Input {
1010

1111
typeOutput={
1212
level:T.LevelUI
13+
levels:T.LevelUI[]
1314
stepIndex:number
1415
}
1516

@@ -22,16 +23,18 @@ type Output = {
2223
constformatLevels=({ progress, position, levels, testStatus}:Input):Output=>{
2324
// clone levels
2425

25-
constlevel:TT.Level|undefined=levels.find((l:TT.Level)=>l.id===position.levelId)
26+
constlevelIndex:number=levels.findIndex((l:TT.Level)=>l.id===position.levelId)
2627

27-
if(!level){
28+
if(levelIndex===-1){
2829
thrownewError(`Level${position.levelId} not found`)
2930
}
3031

32+
constcurrentLevel=levels[levelIndex]
33+
3134
constlevelUI:T.LevelUI={
32-
...level,
35+
...currentLevel,
3336
status:progress.levels[position.levelId] ?'COMPLETE' :'ACTIVE',
34-
steps:level.steps.map((step:TT.Step)=>{
37+
steps:currentLevel.steps.map((step:TT.Step)=>{
3538
// label step status for step component
3639
letstatus:T.ProgressStatus='INCOMPLETE'
3740
letsubtasks
@@ -59,11 +62,34 @@ const formatLevels = ({ progress, position, levels, testStatus }: Input): Output
5962
return{ ...step, status, subtasks}
6063
}),
6164
}
65+
66+
constcompleted:T.LevelUI[]=levels.slice(0,levelIndex).map((level:TT.Level)=>({
67+
...level,
68+
status:'COMPLETE',
69+
steps:level.steps.map((step:TT.Step)=>({
70+
...step,
71+
status:'COMPLETE',
72+
subtasks:step.subtasks ?step.subtasks.map((st)=>({name:st,status:'COMPLETE'})) :undefined,
73+
})),
74+
}))
75+
76+
constincompleted:T.LevelUI[]=levels.slice(levelIndex+1,levels.length).map((level:TT.Level)=>({
77+
...level,
78+
status:'INCOMPLETE',
79+
steps:level.steps.map((step:TT.Step)=>({
80+
...step,
81+
status:'INCOMPLETE',
82+
subtasks:step.subtasks ?step.subtasks.map((st)=>({name:st,status:'INCOMPLETE'})) :undefined,
83+
})),
84+
}))
85+
86+
constlevelsUI:T.LevelUI[]=[...completed,levelUI, ...incompleted]
87+
6288
letstepIndex=levelUI.steps.findIndex((s:T.StepUI)=>s.status==='ACTIVE')
6389
if(stepIndex===-1){
64-
stepIndex=level.steps.length
90+
stepIndex=levels[levelIndex].steps.length
6591
}
66-
return{level:levelUI, stepIndex}
92+
return{level:levelUI,levels:levelsUI,stepIndex}
6793
}
6894

6995
exportdefaultformatLevels

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,8 @@ const TutorialPage = (props: PageProps) => {
105105

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

108-
const{ level, stepIndex}=formatLevels({
108+
// format level code with status for easy rendering
109+
const{ level, levels, stepIndex}=formatLevels({
109110
progress,
110111
position,
111112
levels:tutorial.levels,
@@ -123,7 +124,7 @@ const TutorialPage = (props: PageProps) => {
123124
</div>
124125

125126
{page==='level'&&<Levellevel={level}/>}
126-
{page==='review'&&<ReviewPagelevels={tutorial.levels}/>}
127+
{page==='review'&&<ReviewPagelevels={levels}/>}
127128
{/* {page === 'settings' && <SettingsPage />} */}
128129
</div>
129130
<divcss={styles.footer}>

0 commit comments

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