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

Commit2b16a0b

Browse files
committed
working LevelStage container
1 parentf57b367 commit2b16a0b

File tree

6 files changed

+60
-57
lines changed

6 files changed

+60
-57
lines changed

‎typings/graphql.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export type Level = {
6565
text?:Maybe<Scalars['String']>,
6666
stages?:Maybe<Array<Maybe<Stage>>>,
6767
setup?:Maybe<StepActions>,
68+
status?:'INCOMPLETE'|'COMPLETE'|'ACTIVE',
6869
};
6970

7071
exporttypeMutation={
@@ -125,6 +126,7 @@ export type Stage = {
125126
text?:Maybe<Scalars['String']>,
126127
steps?:Maybe<Array<Maybe<Step>>>,
127128
setup?:Maybe<StepActions>,
129+
status?:'INCOMPLETE'|'COMPLETE'|'ACTIVE',
128130
};
129131

130132
exporttypeStep={
@@ -134,6 +136,7 @@ export type Step = {
134136
text?:Maybe<Scalars['String']>,
135137
setup?:Maybe<StepActions>,
136138
solution?:Maybe<StepActions>,
139+
status?:'INCOMPLETE'|'COMPLETE'|'ACTIVE'
137140
};
138141

139142
exporttypeStepActions={

‎web-app/src/components/Level/LevelStageSummary.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import{Icon}from'@alifd/next'
22
import*asReactfrom'react'
3-
importCCfrom'../../../../typings/context'
3+
import*asTfrom'../../../../typings/graphql'
44

55
importMarkdownfrom'../Markdown'
66

@@ -24,17 +24,17 @@ const styles = {
2424
}
2525

2626
interfaceProps{
27-
stage:CC.StageWithStatus
27+
stage:T.Stage
2828
onNext():void
2929
}
3030

3131
constLevelStageSummary=(props:Props)=>{
3232
const{ stage, onNext}=props
33-
const{active}=stage.status
33+
constactive=stage.status==='ACTIVE'
3434
return(
3535
<divstyle={styles.card}className={active ?'hover-select' :''}onClick={onNext}>
3636
<divstyle={styles.left}>
37-
<Markdown>{stage.content.text}</Markdown>
37+
<Markdown>{stage.text||''}</Markdown>
3838
</div>
3939
<divstyle={styles.right}>{active&&<Icontype="arrow-right"style={styles.continueIcon}/>}</div>
4040
</div>

‎web-app/src/components/Level/index.tsx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import{Button,Step}from'@alifd/next'
22
import*asReactfrom'react'
3-
importCRfrom'typings'
4-
importCCfrom'../../../../typings/context'
3+
import*asTfrom'../../../../typings/graphql'
54

65
importMarkdownfrom'../Markdown'
76
importLevelStageSummaryfrom'./LevelStageSummary'
@@ -25,45 +24,46 @@ const styles = {
2524
}
2625

2726
interfaceProps{
28-
level:CR.TutorialLevel
29-
stages:{
30-
[stageId:string]:any// CC.StageWithStatus
31-
}
27+
level:T.Level
3228
onNext():void
3329
onBack():void
3430
}
3531

36-
constLevel=({ level, stages, onNext, onBack}:Props)=>{
37-
const{ content, stageList}=level
38-
const{ title, text}=content
39-
constactiveIndex=stageList.findIndex((stageId:string)=>{
40-
returnstages[stageId].status.active
41-
})
42-
32+
constLevel=({ level, onNext, onBack}:Props)=>{
33+
if(!level||!level.stages){
34+
thrownewError('No level stages found')
35+
}
36+
constactiveIndex=level.stages.findIndex((stage:T.Stage|null)=>stage&&stage.status==='ACTIVE')||0
4337
return(
4438
<divstyle={styles.card}>
4539
<divstyle={styles.content}>
46-
<h2style={styles.title}>{title}</h2>
47-
<Markdown>{text}</Markdown>
40+
<h2style={styles.title}>{level.title}</h2>
41+
<Markdown>{level.text||''}</Markdown>
4842
</div>
4943
<divstyle={styles.steps}>
5044
<Stepcurrent={activeIndex}direction="ver"animation={false}>
51-
{stageList.map((stageId:string,index:number)=>{
52-
conststage:CC.StageWithStatus=stages[stageId]
53-
const{ active}=stage.status
54-
constclickHandler=active ?onNext :()=>{}
45+
{level.stages.map((stage:T.Stage|null,index:number)=>{
46+
if(!stage){
47+
returnnull
48+
}
49+
constactive=stage.status==='ACTIVE'
50+
constclickHandler=active
51+
?onNext
52+
:()=>{
53+
/* empty */
54+
}
5555
// note - must add click handler to title, content & step.item
5656
// as all are separted components
5757
return(
5858
<Step.Item
59-
key={stageId}
59+
key={stage.id}
6060
style={{backgroundColor:'blue'}}
6161
title={
6262
<spanclassName={active ?'hover-select' :''}onClick={clickHandler}>
63-
{stage.content.title||`Stage${index+1}`}
63+
{stage.title||`Stage${index+1}`}
6464
</span>
6565
}
66-
content={<LevelStageSummarykey={stageId}stage={stage}onNext={clickHandler}/>}
66+
content={<LevelStageSummarykey={stage.id}stage={stage}onNext={clickHandler}/>}
6767
onClick={clickHandler}
6868
/>
6969
)

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

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,32 @@ import * as React from 'react'
22
import{useQuery}from'@apollo/react-hooks'
33

44
importErrorViewfrom'../../../components/Error'
5-
//import Level from '../../../components/Level'
5+
importLevelfrom'../../../components/Level'
66
import*asTfrom'../../../../../typings/graphql'
7-
importqueryLevelsfrom'./queryLevels'
7+
importqueryLevelfrom'./queryLevel'
88

99
interfaceLevelProps{
10-
levels:T.Level[]
10+
level:T.Level
1111
send(action:string):void
1212
}
1313

1414
exportconstLevelSummaryPage=(props:LevelProps)=>{
15-
// const { levelId } = position
16-
// const level = data.levels[levelId]
17-
// const onNext = (): void => {
18-
// props.send('NEXT')
19-
// }
20-
// const onBack = (): void => {
21-
// props.send('BACK')
22-
// }
23-
24-
// const stages: { [stageId: string]: any } = {}
25-
// for (const stageId of level.stageList) {
26-
// stages[stageId] = {
27-
// ...data.stages[stageId],
28-
// status: {
29-
// complete: progress.stages[stageId] || false,
30-
// active: position.stageId === stageId,
31-
// },
32-
// }
33-
// }
34-
35-
return<div>LevelSummaryPage</div>
36-
37-
// return <Level level={level} stages={stages} onNext={onNext} onBack={onBack} />
15+
constonNext=():void=>{
16+
props.send('NEXT')
17+
}
18+
constonBack=():void=>{
19+
props.send('BACK')
20+
}
21+
console.log('props',props)
22+
return<Levellevel={props.level}onNext={onNext}onBack={onBack}/>
3823
}
3924

4025
interfaceContainerProps{
4126
send(action:string):void
4227
}
4328

4429
constLevelSummaryPageContainer=(props:ContainerProps)=>{
45-
const{ loading, error, data}=useQuery(queryLevels,{
30+
const{ loading, error, data}=useQuery(queryLevel,{
4631
variables:{
4732
tutorialId:'1',
4833
version:'0.1.0',
@@ -58,9 +43,9 @@ const LevelSummaryPageContainer = (props: ContainerProps) => {
5843
return<ErrorViewerror={error}/>
5944
}
6045

61-
const{levels}=data.tutorial.version
46+
const{level}=data.tutorial.version
6247

63-
return<LevelSummaryPagelevels={levels}send={props.send}/>
48+
return<LevelSummaryPagelevel={level}send={props.send}/>
6449
}
6550

6651
exportdefaultLevelSummaryPageContainer

‎web-app/src/containers/Tutorial/LevelSummaryPage/queryLevels.tsrenamed to‎web-app/src/containers/Tutorial/LevelSummaryPage/queryLevel.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ export default gql`
1111
id
1212
title
1313
text
14-
14+
status @client
1515
stages {
1616
id
1717
title
1818
text
19-
19+
status @client
2020
}
2121
}
2222
}

‎web-app/src/services/apollo/index.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,21 @@ const client = new ApolloClient({
4141
returnnull
4242
},
4343
},
44+
Level:{
45+
status(){
46+
return'INCOMPLETE'
47+
}
48+
},
49+
Stage:{
50+
status(){
51+
return'INCOMPLETE'
52+
}
53+
},
54+
Step:{
55+
status(){
56+
return'INCOMPLETE'
57+
}
58+
}
4459
},
4560
})
4661

0 commit comments

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