8000 working LevelStage container · coderoad/coderoad-vscode@2b16a0b · GitHub
[go: up one dir, main page]
Skip to content

Commit 2b16a0b

Browse files
ShMcKShMcK
committed
working LevelStage container
1 parent f57b367 commit 2b16a0b

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
export type Mutation = {
@@ -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
export type Step = {
@@ -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
export type StepActions = {

‎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 * as React from 'react'
3-
import CC from '../../../../typings/context'
3+
import * as T from '../../../../typings/graphql'
44

55
import Markdown from '../Markdown'
66

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

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

3131
const LevelStageSummary = (props: Props) => {
3232
const { stage, onNext } = props
33-
const { active } = stage.status
33+
const active = stage.status === 'ACTIVE'
3434
return (
3535
<div style={styles.card} className={active ? 'hover-select' : ''} onClick={onNext}>
3636
<div style={styles.left}>
37-
<Markdown>{stage.content.text}</Markdown>
37+
<Markdown>{stage.text || ''}</Markdown>
3838
</div>
3939
<div style={styles.right}>{active && <Icon type="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 * as React from 'react'
3-
import CR from 'typings'
4-
import CC from '../../../../typings/context'
3+
import * as T from '../../../../typings/graphql'
54

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

2726
interface Props {
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-
const Level = ({ level, stages, onNext, onBack }: Props) => {
37-
const { content, stageList } = level
38-
const { title, text } = content
39-
const activeIndex = stageList.findIndex((stageId: string) => {
40-
return stages[stageId].status.active
41-
})
42-
32+
const Level = ({ level, onNext, onBack }: Props) => {
33+
if (!level || !level.stages) {
34+
throw new Error('No level stages found')
35+
}
36+
const activeIndex = level.stages.findIndex((stage: T.Stage | null) => stage && stage.status === 'ACTIVE') || 0
4337
return (
4438
<div style={styles.card}>
4539
<div style={styles.content}>
46-
<h2 style={styles.title}>{title}</h2>
47-
<Markdown>{text}</Markdown>
40+
<h2 style={styles.title}>{level.title}</h2>
41+
<Markdown>{level.text || ''}</Markdown>
4842
</div>
4943
<div style={styles.steps}>
5044
<Step current={activeIndex} direction="ver" animation={false}>
51-
{stageList.map((stageId: string, index: number) => {
52-
const stage: CC.StageWithStatus = stages[stageId]
53-
const { active } = stage.status
54-
const clickHandler = active ? onNext : () => {}
45+
{level.stages.map((stage: T.Stage | null, index: number) => {
46+
if (!stage) {
47+
return null
48+
}
49+
const active = stage.status === 'ACTIVE'
50+
const clickHandler = 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
<span className={active ? 'hover-select' : ''} onClick={clickHandler}>
63-
{stage.content.title || `Stage ${index + 1}`}
63+
{stage.title || `Stage ${index + 1}`}
6464
</span>
6565
}
66-
content={<LevelStageSummary key={stageId} stage={stage} onNext={clickHandler} />}
66+
content={<LevelStageSummary key={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
import ErrorView from '../../../components/Error'
5-
// import Level from '../../../components/Level'
5+
import Level from '../../../components/Level'
66
import * as T from '../../../../../typings/graphql'
7-
import queryLevels from './queryLevels'
7+
import queryLevel from './queryLevel'
88

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

1414
export const LevelSummaryPage = (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+
const onNext = (): void => {
16+
props.send('NEXT')
17+
}
18+
const onBack = (): void => {
10000 19+
props.send('BACK')
20+
}
21+
console.log('props', props)
22+
return <Level level={props.level} onNext={onNext} onBack={onBack} />
3823
}
3924

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

4429
const LevelSummaryPageContainer = (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 <ErrorView error={error} />
5944
}
6045

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

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

6651
export default LevelSummaryPageContainer

‎web-app/src/containers/Tutorial/LevelSummaryPage/queryLevels.ts renamed 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
return null
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)
0