8000 load continue container · coderoad/coderoad-vscode@64837c0 · GitHub
[go: up one dir, main page]
Skip to content

Commit 64837c0

Browse files
ShMcKShMcK
committed
load continue container
1 parent 8d4d43f commit 64837c0

File tree

4 files changed

+72
-30
lines changed

4 files changed

+72
-30
lines changed

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

Lines changed: 51 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,62 @@
11
import * as React from 'react'
2-
import { send } from '../../utils/vscode'
3-
import DataContext from '../../utils/DataContext'
2+
import { useQuery } from '@apollo/react-hooks'
43
import { Button, Card } from '@alifd/next'
54

5+
import { send } from '../../utils/vscode'
6+
import LoadingPage from '../LoadingPage'
7+
import queryTutorial from './queryTutorial'
8+
import * as T from '../../../../typings/graphql'
9+
610
interface Props {
11+
tutorial: T.Tutorial
712
onContinue(): void
813
}
914

10-
export const ContinuePage = (props: Props) => {
11-
// context
12-
const { data } = React.useContext(DataContext)
15+
export const ContinuePage = (props: Props) => (
16+
<div>
17+
<h3>Continue</h3>
18+
<Card showTitleBullet={false} contentHeight="auto">
19+
<div>
20+
<h2>{props.tutorial.title}</h2>
21+
<p>{props.tutorial.text}</p>
22+
<Button onClick={props.onContinue}>Resume</Button>
23+
</div>
24+
</Card>
25+
</div>
26+
)
27+
28+
const Loading = () => <LoadingPage text="Loading tutorials" />
29+
30+
const ContinuePageContainer = () => {
31+
// TODO: load specific tutorialId
32+
const { data, loading, error } = useQuery(queryTutorial, {
33+
variables: {
34+
tutorialId: 1,
35+
version: '0.1.0',
36+
},
37+
})
38+
39+
if (loading) {
40+
return Loading
41+
}
42+
43+
if (error) {
44+
return (
45+
<div>
46+
<h5>{error.message}</h5>
47+
<p>{JSON.stringify(error, < 10000 span class=pl-c1>null, 2)}</p>
48+
</div>
49+
)
50+
}
51+
1352
return (
14-
<div>
15-
<h3>Continue</h3>
16-
<Card showTitleBullet={false} contentHeight="auto">
17-
<div>
18-
<h2>{data.summary.title}</h2>
19-
<p>{data.summary.description}</p>
20-
<Button onClick={props.onContinue}>Resume</Button>
21-
</div>
22-
</Card>
23-
</div>
53+
<ContinuePage
54+
tutorial={data.tutorial}
55+
onContinue={() => {
56+
send('TUTORIAL_START')
57+
}}
58+
/>
2459
)
2560
}
2661

27-
export default () => (
28-
<ContinuePage
29-
onContinue={() => {
30-
send('TUTORIAL_START')
31-
}}
32-
/>
33-
)
62+
export default ContinuePageContainer

‎web-app/src/containers/Continue/tutorial.gql renamed to ‎web-app/src/containers/Continue/queryTutorial.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
query getTutorial($tutorialId: ID!) {
1+
import { gql } from 'apollo-boost'
2+
3+
export default gql`
4+
query getTutorial($tutorialId: ID!, $version: String) {
25
tutorial(id: $tutorialId) {
36
id
47
title
@@ -15,9 +18,11 @@ query getTutorial($tutorialId: ID!) {
1518
owner
1619
name
1720
}
18-
version {
21+
version(version: $version) {
1922
version
2023
coderoadVersion
2124
}
2225
}
2326
}
27+
28+
`

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,17 @@ import React from 'react'
33
import { storiesOf } from '@storybook/react'
44
import { action } from '@storybook/addon-actions'
55

6-
import { ContinuePage } from '../src/containers/Continue'
7-
import demo from './data/basic'
6+
import apolloProvider from './utils/ApolloDecorator'
7+
import ContinuePageContainer, { ContinuePage } from '../src/containers/Continue'
88

9-
storiesOf('Continue', module).add('Page', () => <ContinuePage tutorials={[demo]} onContinue={action('onContinue')} />)
9+
storiesOf('Continue', module)
10+
.add('Page', () => {
11+
const tutorial = {
12+
id: '1',
13+
title: 'Example Tutorial',
14+
text: 'Some summary',
15+
}
16+
return <ContinuePage tutorial={tutorial} onContinue={action('onContinue')} />
17+
})
18+
.addDecorator(apolloProvider)
19+
.add('Container', () => <ContinuePageContainer />)

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,4 @@ storiesOf('New', module)
3333
return <TutorialList tutorialList={tutorialList} onNew={action('onNew')} />
3434
})
3535
.addDecorator(apolloProvider)
36-
.add('Container', () => {
37-
return <NewContainer />
38-
})
36+
.add('Container', () => <NewContainer />)

0 commit comments

Comments
 (0)
0