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

Commitae0c0b1

Browse files
committed
refactor hints
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent2e894ce commitae0c0b1

File tree

7 files changed

+25
-41
lines changed

7 files changed

+25
-41
lines changed

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,33 @@ const styles = {
2020

2121
interfaceProps{
2222
hints:string[]
23-
hintIndex:number
24-
setHintIndex(value:number):void
2523
}
2624

2725
constHints=(props:Props)=>{
26+
// hold state for hints for the level
27+
const[hintIndex,setHintIndex]=React.useState<number>(-1)
28+
2829
if(!props.hints||!props.hints.length){
2930
returnnull
3031
}
31-
constisFinalHint=props.hints.length-1===props.hintIndex
32+
33+
constisFinalHint=props.hints.length-1===hintIndex
34+
3235
constnextHint=()=>{
3336
if(isFinalHint){
3437
return
3538
}
36-
props.setHintIndex(props.hintIndex+1)
39+
setHintIndex(hintIndex+1)
3740
}
41+
3842
return(
3943
<divcss={styles.hints}>
4044
<divcss={styles.hintList}>
4145
{/* only show revealed hints */}
42-
{props.hints.map((h,i)=>{
43-
returni<=props.hintIndex ?(
44-
<divkey={i}css={styles.hint}>
45-
<Markdowncss={styles.hint}>{h}</Markdown>
46+
{props.hints.map((hint,index)=>{
47+
returnindex<=hintIndex ?(
48+
<divkey={index}css={styles.hint}>
49+
<Markdowncss={styles.hint}>{hint}</Markdown>
4650
</div>
4751
) :null
4852
})}

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,9 @@ const styles = {
3737

3838
interfaceProps{
3939
level:TT.Level
40-
setHintsIndex(stepIndex:number,value:number):void
41-
displayHintsIndex:number[]
4240
}
4341

44-
constLevel=({ level, setHintsIndex, displayHintsIndex}:Props)=>{
42+
constLevel=({ level}:Props)=>{
4543
constpageBottomRef=React.useRef(null)
4644
constscrollToBottom=()=>{
4745
//@ts-ignore
@@ -56,7 +54,7 @@ const Level = ({ level, setHintsIndex, displayHintsIndex }: Props) => {
5654

5755
{level.content.length&&level.steps.length ?<divcss={styles.separator}/> :null}
5856

59-
<Stepssteps={level.steps}setHintsIndex={setHintsIndex}displayHintsIndex={displayHintsIndex}/>
57+
<Stepssteps={level.steps}/>
6058

6159
<divref={pageBottomRef}/>
6260
</div>

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

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

77
interfaceProps{
88
steps:TT.Step[]
9-
displayHintsIndex:number[]
10-
setHintsIndex(stepIndex:number,value:number):void
119
}
1210

1311
conststyles={
@@ -23,19 +21,15 @@ const Steps = (props: Props) => {
2321
return(
2422
<divcss={styles.steps}>
2523
{/*@ts-ignore typings are different between UI & data */}
26-
{props.steps.map((step:TT.Step&{subtasks:null|{name:string;pass:boolean}[]},stepIndex:number)=>{
24+
{props.steps.map((step:TT.Step&{subtasks:null|{name:string;pass:boolean}[]})=>{
2725
if(!step){
2826
returnnull
2927
}
3028
return(
31-
<>
29+
<divkey={step.id}>
3230
<Stepkey={step.id}status={step.status||'INCOMPLETE'}content={step.content}subtasks={step.subtasks}/>
33-
<Hints
34-
hints={step.hints||[]}
35-
hintIndex={props.displayHintsIndex[stepIndex]}
36-
setHintIndex={(value)=>props.setHintsIndex(stepIndex,value)}
37-
/>
38-
</>
31+
<Hintshints={step.hints||[]}/>
32+
</div>
3933
)
4034
})}
4135
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const ReviewPage = (props: Props) => {
2323
<>
2424
<div>
2525
<Contenttitle={level.title}content={level.content}/>
26-
<Stepssteps={level.steps}displayHintsIndex={level.steps.map((s)=>-1)}setHintsIndex={()=>{}}/>
26+
<Stepssteps={level.steps}/>
2727
</div>
2828
{/* divider */}
2929
{index<props.levels.length-1 ?<hr/> :null}

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

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -85,15 +85,6 @@ interface PageProps {
8585

8686
constTutorialPage=(props:PageProps)=>{
8787
const{ position, progress, processes, testStatus}=props.context
88-
// hold state for hints for the level
89-
const[displayHintsIndex,setDisplayHintsIndex]=React.useState<number[]>([])
90-
constsetHintsIndex=(index:number,value:number)=>{
91-
returnsetDisplayHintsIndex((displayHintsIndex)=>{
92-
constnext=[...displayHintsIndex]
93-
next[index]=value
94-
returnnext
95-
})
96-
}
9788

9889
consttutorial=selectors.currentTutorial(props.context)
9990

@@ -121,11 +112,6 @@ const TutorialPage = (props: PageProps) => {
121112
testStatus,
122113
})
123114

124-
React.useEffect(()=>{
125-
// set the hints to empty on level starts
126-
setDisplayHintsIndex(level.steps.map((s:TT.Step)=>-1))
127-
},[level.id])
128-
129115
return(
130116
<div>
131117
<div>
@@ -136,9 +122,7 @@ const TutorialPage = (props: PageProps) => {
136122
<spancss={styles.title}>{tutorial.summary.title}</span>
137123
</div>
138124

139-
{page==='level'&&(
140-
<Levellevel={level}displayHintsIndex={displayHintsIndex}setHintsIndex={setHintsIndex}/>
141-
)}
125+
{page==='level'&&<Levellevel={level}/>}
142126
{page==='settings'&&<SettingsPage/>}
143127
{page==='review'&&<ReviewPagelevels={levels}/>}
144128
</div>
@@ -181,7 +165,7 @@ const TutorialPage = (props: PageProps) => {
181165
shape="line"
182166
color="rgb(85, 132, 255)"
183167
css={styles.taskProgress}
184-
textRender={(percent:number)=>{
168+
textRender={()=>{
185169
return(
186170
<spanstyle={{color:'white'}}>
187171
{stepIndex} of{level.steps.length}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const level = {
2323
commits:['hijklmn'],
2424
},
2525
status:'COMPLETE',
26+
hints:['first hint','second hint'],
2627
},
2728
{
2829
id:'1.2',
@@ -34,6 +35,7 @@ const level = {
3435
commits:['hijklmn'],
3536
},
3637
status:'ACTIVE',
38+
hints:['more hint action','another second hint'],
3739
},
3840
{
3941
id:'1.3',

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ const context: Partial<T.MachineContext> = {
101101
commits:['hijklmn'],
102102
},
103103
status:'COMPLETE',
104+
hints:['first hint','second hint'],
104105
},
105106
{
106107
id:'2.2',
@@ -112,6 +113,7 @@ const context: Partial<T.MachineContext> = {
112113
commits:['hijklmn'],
113114
},
114115
status:'ACTIVE',
116+
hints:['another hint','another other hint'],
115117
},
116118
{
117119
id:'2.3',

0 commit comments

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