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
  • stories

    • 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 8000 , 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