import * as React from 'react'

import { useQuery } from '@apollo/react-hooks'

import * as T from 'typings/graphql'

import Stage from 'components/Stage'

import ErrorView from 'components/Error'

import queryStage from './queryStage'

interface PageProps {

stage: T.Stage

send(action: string): void

}

export const StageSummaryPage = ({ stage, send }: PageProps) => {

if (!stage) {

// may throw if no stage is supplied on restart

throw new Error('No stage provided')

}

const stageComplete = stage.status === 'COMPLETE'

const onContinue = (): void => {

send('STAGE_NEXT')

}

return <Stage stage={stage} onContinue={onContinue} complete={stageComplete} />

}

const StageSummaryPageContainer = props => {

const StageSummaryPageContainer = (props: PageProps) => {

const { loading, error, data } = useQuery(queryStage, {

variables: {

tutorialId: '1',

version: '1.0.0',

version: '0.1.0',

stageId: '1',

},

})

return <ErrorView error={error} />

}

console.log('data', data)

const { stage } = data.tutorial.version

return <StageSummaryPage stage={stage} send={props.send} />

const onContinue = (): void => {

props.send('STAGE_NEXT')

}

return <Stage stage={stage} onContinue={onContinue} />

}

export default StageSummaryPageContainer

title

text

status @client

steps {

id

title

text

status @client

}

}

}

}

import Router from 'components/Router'

import LoadingPage from '../LoadingPage'

import SummaryPage from './SummaryPage'

import LevelSummaryPage from './LevelSummaryPage'

import StageSummaryPage from './StageSummaryPage'

import LevelSummaryPage from './LevelPage'

import StageSummaryPage from './StagePage'

import CompletedPage from './CompletedPage'

const { Route } = Router

import apolloProvider from './utils/ApolloDecorator'

import Level from '../src/components/Level'

import LevelSummaryPageContainer, { LevelSummaryPage } from '../src/containers/Tutorial/LevelSummaryPage'

import LevelSummaryPageContainer, { LevelSummaryPage } from '../src/containers/Tutorial/LevelPage'

storiesOf('Tutorial SideBar', module)

.addDecorator(SideBarDecorator)

import SideBarDecorator from './utils/SideBarDecorator'

import Stage from '../src/components/Stage'

import StageContainer from '../src/containers/Tutorial/StagePage'

import ApolloDecorator from './utils/ApolloDecorator'

storiesOf('Tutorial SideBar', module)

.addDecorator(SideBarDecorator)

onContinue={action('onContinue')}

/>

))

.addDecorator(ApolloDecorator)

.add('Stage Summary Container', () => <StageContainer send={action('send')} />)