Skip to content

Commit 70119ed

Browse files
ShMcKShMcK
committed
refactor level & step file structure
1 parent d0b8ee6 commit 70119ed

File tree

5 files changed

+187
-187
lines changed

5 files changed

+187
-187
lines changed

‎web-app/src/containers/Tutorial/LevelPage/Level/index.tsx‎ renamed to ‎web-app/src/containers/Tutorial/LevelPage/Level.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import * as G from 'typings/graphql'
33
import * as T from 'typings'
44

55
import Step from './Step'
6-
import Button from '../../../../components/Button'
7-
import Markdown from '../../../../components/Markdown'
6+
import Button from '../../../components/Button'
7+
import Markdown from '../../../components/Markdown'
88

99
const styles = {
1010
card: {

‎web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎web-app/src/containers/Tutorial/LevelPage/Step.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import * as React from 'react'
2+
import * as T from 'typings'
3+
import Checkbox from '../../../components/Checkbox'
4+
import Markdown from '../../../components/Markdown'
5+
import StepHelp from '../../../components/StepHelp'
6+
7+
interface Props {
8+
order: number
9+
content: string
10+
status: T.ProgressStatus
11+
onLoadSolution(): void
12+
}
13+
14+
const styles = {
15+
card: {
16+
display: 'grid',
17+
gridTemplateColumns: '25px 1fr',
18+
padding: '1rem 1rem 1rem 0.2rem',
19+
},
20+
content: {
21+
margin: 0,
22+
},
23+
options: {
24+
display: 'flex' as 'flex',
25+
flexDirection: 'row' as 'row',
26+
justifyContent: 'flex-end',
27+
alignItems: 'center' as 'center',
28+
padding: '0.5rem',
29+
},
30+
}
31+
32+
const Step = (props: Props) => {
33+
const showStep = props.status !== 'INCOMPLETE'
34+
if (!showStep) {
35+
return null
36+
}
37+
const showLoadSolution = props.status === 'ACTIVE'
38+
return (
39+
<div>
40+
<div style={styles.card}>
41+
<div>
42+
<Checkbox status={props.status} />
43+
</div>
44+
<div>
45+
<Markdown>{props.content || ''}</Markdown>
46+
</div>
47+
</div>
48+
{showLoadSolution && (
49+
<div style={styles.options}>
50+
<StepHelp onLoadSolution={props.onLoadSolution} />
51+
</div>
52+
)}
53+
</div>
54+
)
55+
}
56+
57+
export default Step

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

Lines changed: 108 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -7,116 +7,116 @@ import { withKnobs } from '@storybook/addon-knobs'
77
import { storiesOf } from '@storybook/react'
88

99
import SideBarDecorator from './utils/SideBarDecorator'
10-
import Level from '../src/containers/Tutorial/LevelPage/Level/index'
10+
import Level from '../src/containers/Tutorial/LevelPage/Level'
1111

1212
type ModifiedLevel = G.Level & {
13-
status: T.ProgressStatus
14-
index: number
15-
steps: Array<G.Step & { status: T.ProgressStatus }>
13+
status: T.ProgressStatus
14+
index: number
15+
steps: Array<G.Step & { status: T.ProgressStatus }>
1616
}
1717

1818
storiesOf('Level', module)
19-
.addDecorator(SideBarDecorator)
20-
.addDecorator(withKnobs)
21-
.add('Level', () => {
22-
const level = {
23-
id: 'L1',
24-
index: 2,
25-
title: 'A Title',
26-
description: 'A summary of the level',
27-
content: 'Some content here in markdown',
28-
setup: null,
29-
status: 'ACTIVE',
30-
steps: [
31-
{
32-
id: 'L1:S1',
33-
title: 'First Step',
34-
content: 'First step description',
35-
setup: {
36-
id: 'L1:S1:SETUP',
37-
commits: ['abcdefg'],
38-
},
39-
solution: {
40-
id: 'L1:S1:SOLUTION',
41-
commits: ['hijklmn'],
42-
},
43-
status: 'COMPLETE',
44-
},
45-
{
46-
id: 'L1:S2',
47-
title: 'Second Step',
48-
content: 'Second step description',
49-
setup: {
50-
id: 'L1:S2:SETUP',
51-
commits: ['abcdefg'],
52-
},
53-
solution: {
54-
id: 'L1:S2:SOLUTION',
55-
commits: ['hijklmn'],
56-
},
57-
status: 'ACTIVE',
58-
},
59-
{
60-
id: 'L1:S3',
61-
title: 'Third Step',
62-
content: 'Third step description',
63-
setup: {
64-
id: 'L1:S3:SETUP',
65-
commits: ['abcdefg'],
66-
},
67-
solution: {
68-
id: 'L1:S3:SOLUTION',
69-
commits: ['hijklmn'],
70-
},
71-
status: 'INCOMPLETE',
72-
},
73-
],
74-
}
75-
return <Level level={level} onContinue={action('onContinue')} onLoadSolution={action('onLoadSolution')} />
76-
})
77-
.add('Level 2', () => {
78-
const level = {
79-
id: 'L1',
80-
title: 'A Title',
81-
description: 'A description',
82-
content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
83-
setup: { commits: ['77e57cd'], commands: ['npm install'], files: [] },
84-
steps: [
85-
{
86-
id: 'L1:S1',
87-
content: 'Should support markdown test\n ```shell\nnpn install some-packagen```\nwhew it works!',
88-
setup: { commits: ['a4679b1'], commands: [], files: ['package.json'] },
89-
solution: {
90-
commits: ['7c64508'],
91-
commands: ['npm install'],
92-
files: ['package.json'],
93-
},
94-
status: 'ACTIVE',
95-
},
96-
{
97-
id: 'L1:S2',
98-
content: 'Should support markdown test\n ```ts\nvar a = 1\n```\nwhew it works!',
99-
setup: { commits: ['8a8a5cb'], commands: [], files: ['src/main.ts'] },
100-
solution: { commits: ['c2f7973'], commands: [], files: ['src/main.ts'] },
101-
status: 'INCOMPLETE',
102-
},
103-
{
104-
id: 'L1:S3',
105-
content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
106-
setup: { commits: ['992bcb1'], commands: [], files: ['src/main.ts'] },
107-
solution: { commits: ['1b92779'], commands: [], files: ['src/main.ts'] },
108-
status: 'INCOMPLETE',
109-
},
110-
{
111-
id: 'L1:S4',
112-
content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
113-
setup: { commits: ['be32adb'], commands: [], files: ['src/main.ts'] },
114-
solution: { commits: ['7fe26cb'], commands: [], files: ['src/main.ts'] },
115-
status: 'INCOMPLETE',
116-
},
117-
],
118-
index: 0,
119-
status: 'ACTIVE',
120-
}
121-
return <Level level={level} onContinue={action('onContinue')} onLoadSolution={action('onLoadSolution')} />
122-
})
19+
.addDecorator(SideBarDecorator)
20+
.addDecorator(withKnobs)
21+
.add('Level', () => {
22+
const level = {
23+
id: 'L1',
24+
index: 2,
25+
title: 'A Title',
26+
description: 'A summary of the level',
27+
content: 'Some content here in markdown',
28+
setup: null,
29+
status: 'ACTIVE',
30+
steps: [
31+
{
32+
id: 'L1:S1',
33+
title: 'First Step',
34+
content: 'First step description',
35+
setup: {
36+
id: 'L1:S1:SETUP',
37+
commits: ['abcdefg'],
38+
},
39+
solution: {
40+
id: 'L1:S1:SOLUTION',
41+
commits: ['hijklmn'],
42+
},
43+
status: 'COMPLETE',
44+
},
45+
{
46+
id: 'L1:S2',
47+
title: 'Second Step',
48+
content: 'Second step description',
49+
setup: {
50+
id: 'L1:S2:SETUP',
51+
commits: ['abcdefg'],
52+
},
53+
solution: {
54+
id: 'L1:S2:SOLUTION',
55+
commits: ['hijklmn'],
56+
},
57+
status: 'ACTIVE',
58+
},
59+
{
60+
id: 'L1:S3',
61+
title: 'Third Step',
62+
content: 'Third step description',
63+
setup: {
64+
id: 'L1:S3:SETUP',
65+
commits: ['abcdefg'],
66+
},
67+
solution: {
68+
id: 'L1:S3:SOLUTION',
69+
commits: ['hijklmn'],
70+
},
71+
status: 'INCOMPLETE',
72+
},
73+
],
74+
}
75+
return <Level level={level} onContinue={action('onContinue')} onLoadSolution={action('onLoadSolution')} />
76+
})
77+
.add('Level 2', () => {
78+
const level = {
79+
id: 'L1',
80+
title: 'A Title',
81+
description: 'A description',
82+
content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
83+
setup: { commits: ['77e57cd'], commands: ['npm install'], files: [] },
84+
steps: [
85+
{
86+
id: 'L1:S1',
87+
content: 'Should support markdown test\n ```shell\nnpn install some-packagen```\nwhew it works!',
88+
setup: { commits: ['a4679b1'], commands: [], files: ['package.json'] },
89+
solution: {
90+
commits: ['7c64508'],
91+
commands: ['npm install'],
92+
files: ['package.json'],
93+
},
94+
status: 'ACTIVE',
95+
},
96+
{
97+
id: 'L1:S2',
98+
content: 'Should support markdown test\n ```ts\nvar a = 1\n```\nwhew it works!',
99+
setup: { commits: ['8a8a5cb'], commands: [], files: ['src/main.ts'] },
100+
solution: { commits: ['c2f7973'], commands: [], files: ['src/main.ts'] },
101+
status: 'INCOMPLETE',
102+
},
103+
{
104+
id: 'L1:S3',
105+
content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
106+
setup: { commits: ['992bcb1'], commands: [], files: ['src/main.ts'] },
107+
solution: { commits: ['1b92779'], commands: [], files: ['src/main.ts'] },
108+
status: 'INCOMPLETE',
109+
},
110+
{
111+
id: 'L1:S4',
112+
content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
113+
setup: { commits: ['be32adb'], commands: [], files: ['src/main.ts'] },
114+
solution: { commits: ['7fe26cb'], commands: [], files: ['src/main.ts'] },
115+
status: 'INCOMPLETE',
116+
},
117+
],
118+
index: 0,
119+
status: 'ACTIVE',
120+
}
121+
return <Level level={level} onContinue={action('onContinue')} onLoadSolution={action('onLoadSolution')} />
122+
})

0 commit comments

Comments
 (0)