Skip to content

Commit 9abdae4

Browse files
ShMcKShMcK
authored
Merge pull request #45 from ShMcK/feature/level-summary
Feature/level summary
2 parents 74feeab + 80a5edb commit 9abdae4

File tree

10 files changed

+144
-64
lines changed

10 files changed

+144
-64
lines changed

‎web-app/src/Routes.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Router from './components/Router'
66
import LoadingPage from './containers/LoadingPage'
77
import ContinuePage from './containers/Continue'
88
import NewPage from './containers/New'
9-
import SummaryPage from './containers/Tutorial/SummaryPage'
9+
import OverviewPage from './containers/Overview'
1010
import LevelSummaryPage from './containers/Tutorial/LevelPage'
1111
import CompletedPage from './containers/Tutorial/CompletedPage'
1212

@@ -34,7 +34,7 @@ const Routes = () => {
3434
<LoadingPage text="Loading..." />
3535
</Route>
3636
<Route path="Tutorial.Summary">
37-
<SummaryPage send={tempSend} context={{} as CR.MachineContext} />
37+
<OverviewPage send={tempSend} context={{} as CR.MachineContext} />
3838
</Route>
3939
<Route path="Tutorial.Level">
4040
<LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />

‎web-app/src/containers/Overview/OverviewPage.tsx

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import * as React from 'react'
2+
import { Button } from '@alifd/next'
3+
import * as G from 'typings/graphql'
4+
5+
const styles = {
6+
summary: {
7+
padding: '0rem 1rem 1rem 1rem',
8+
},
9+
title: {
10+
fontWeight: 'bold' as 'bold',
11+
},
12+
description: {
13+
fontSize: '1rem',
14+
},
15+
header: {
16+
height: '36px',
17+
backgroundColor: '#EBEBEB',
18+
fontSize: '16px',
19+
lineHeight: '16px',
20+
padding: '10px 1rem',
21+
},
22+
levelList: {
23+
padding: '0rem 1rem',
24+
},
25+
options: {
26+
display: 'flex' as 'flex',
27+
flexDirection: 'row' as 'row',
28+
alignItems: 'center' as 'center',
29+
justifyContent: 'flex-end' as 'flex-end',
30+
position: 'absolute' as 'absolute',
31+
bottom: 0,
32+
height: '50px',
33+
padding: '1rem',
34+
paddingRight: '2rem',
35+
backgroundColor: 'black',
36+
width: '100%',
37+
},
38+
startButton: {
39+
backgroundColor: 'gold',
40+
fontWeight: 'bold' as 'bold',
41+
},
42+
}
43+
44+
interface Props {
45+
title: string
46+
description: string
47+
levels: G.Level[]
48+
onNext(): void
49+
}
50+
51+
const Summary = ({ title, description, levels, onNext }: Props) => (
52+
<div>
53+
<div style={styles.header}>
54+
<span>CodeRoad</span>
55+
</div>
56+
<div style={styles.summary}>
57+
<h2 style={styles.title}>{title}</h2>
58+
<p style={styles.description}>{description}</p>
59+
</div>
60+
<div>
61+
<div style={styles.header}>
62+
<span>Levels</span>
63+
</div>
64+
<div style={styles.levelList}>
65+
{levels.map((level: G.Level, index: number) => (
66+
<div key={index}>
67+
<h4>
68+
{index + 1}. {level.title}
69+
</h4>
70+
<div>{level.description}</div>
71+
</div>
72+
))}
73+
</div>
74+
</div>
75+
76+
<div style={styles.options}>
77+
{/* TODO: Add back button */}
78+
<Button style={styles.startButton} onClick={() => onNext()}>
79+
Start
80+
</Button>
81+
</div>
82+
</div>
83+
)
84+
85+
export default Summary

‎web-app/src/containers/Tutorial/SummaryPage/index.tsx renamed to ‎web-app/src/containers/Overview/index.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import * as G from 'typings/graphql'
33
import * as CR from 'typings'
44
import { useQuery } from '@apollo/react-hooks'
55

6-
import queryTutorial from '../../../services/apollo/queries/tutorial'
7-
import Summary from './Summary'
8-
import ErrorView from '../../../components/Error'
6+
import queryTutorial from '../../services/apollo/queries/tutorial'
7+
import OverviewPage from './OverviewPage'
8+
import ErrorView from '../../components/Error'
99

1010
interface PageProps {
1111
context: CR.MachineContext
@@ -21,14 +21,14 @@ interface TutorialDataVariables {
2121
version: string
2222
}
2323

24-
const SummaryPage = (props: PageProps) => {
24+
const Overview = (props: PageProps) => {
2525
const { tutorial } = props.context
2626

2727
if (!tutorial) {
2828
throw new Error('Tutorial not found in summary page')
2929
}
3030
const { loading, error, data } = useQuery<TutorialData, TutorialDataVariables>(queryTutorial, {
31-
fetchPolicy: 'network-only', // for debugging purposes
31+
fetchPolicy: 'network-only', // to ensure latest
3232
variables: {
3333
tutorialId: tutorial.id,
3434
version: tutorial.version.version,
@@ -56,8 +56,9 @@ const SummaryPage = (props: PageProps) => {
5656
})
5757

5858
const { title, description } = data.tutorial.version.summary
59+
const { levels } = data.tutorial.version.data
5960

60-
return <Summary title={title} description={description} onNext={onNext} />
61+
return <OverviewPage title={title} description={description} levels={levels} onNext={onNext} />
6162
}
6263

63-
export default SummaryPage
64+
export default Overview

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

-35
This file was deleted.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { storiesOf } from '@storybook/react'
88
import SideBarDecorator from './utils/SideBarDecorator'
99
import Level from '../src/containers/Tutorial/LevelPage/Level/index'
1010

11-
storiesOf('Tutorial SideBar', module)
11+
storiesOf('Level', module)
1212
.addDecorator(SideBarDecorator)
1313
.addDecorator(withKnobs)
1414
.add('Level', () => {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const tutorialList = [
2828
},
2929
]
3030

31-
storiesOf('New', module)
31+
storiesOf('Start', module)
3232
.addDecorator(SideBarDecorator)
3333
.add('New Page', () => {
3434
return <NewPage tutorialList={tutorialList} />

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

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
3+
import { linkTo } from '@storybook/addon-links'
4+
import { storiesOf } from '@storybook/react'
5+
6+
import SideBarDecorator from './utils/SideBarDecorator'
7+
import OverViewPage from '../src/containers/Overview/OverviewPage'
8+
9+
storiesOf('Overview', module)
10+
.addDecorator(SideBarDecorator)
11+
.add('OverView Page', () => {
12+
const levels = [
13+
{
14+
id: 'L1',
15+
title: 'The First Level',
16+
description: 'A Summary of the first level',
17+
},
18+
{
19+
id: 'L2',
20+
title: 'The Second Level',
21+
description: 'A Summary of the second level',
22+
},
23+
{
24+
id: 'L3',
25+
title: 'The Third Level',
26+
description: 'A Summary of the third level',
27+
},
28+
]
29+
return (
30+
<OverViewPage
31+
title="Some Title"
32+
description="Some description"
33+
levels={levels}
34+
onNext={linkTo('Tutorial SideBar', 'Level')}
35+
/>
36+
)
37+
})

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
3030
Emojis: :) :| :(
3131
`
3232

33-
storiesOf('Tutorial SideBar', module)
33+
storiesOf('Level', module)
3434
.addDecorator(SideBarDecorator)
3535
.addDecorator(withKnobs)
3636
.add('Step Description', () => (

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

-13
This file was deleted.

‎web-app/stories/utils/SideBarDecorator.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import * as React from 'react'
22

33
const styles = {
4-
width: '20rem',
5-
borderRight: '2px solid black',
6-
height: window.innerHeight,
4+
container: {
5+
position: 'relative' as 'relative',
6+
boxSizing: 'border-box' as 'border-box',
7+
maxWidth: '20rem',
8+
borderRight: '2px solid black',
9+
width: '20rem',
10+
height: window.innerHeight,
11+
},
712
}
813

9-
const SideBarDecorator = storyFn => <div style={styles}>{storyFn()}</div>
14+
const SideBarDecorator = storyFn => <div style={styles.container}>{storyFn()}</div>
1015

1116
export default SideBarDecorator

0 commit comments

Comments
 (0)