working stage container

Author: ShMcK

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

@@ -1,36 +1,19 @@
 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',
     },
   })
@@ -42,9 +25,15 @@ const StageSummaryPageContainer = props => {
     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

web-app/src/containers/Tutorial/LevelSummaryPage/queryLevel.ts renamed to web-app/src/containers/Tutorial/LevelPage/queryLevel.ts

@@ -12,6 +12,12 @@ export default gql`
           title
           text
           status @client
+          steps {
+            id
+            title
+            text
+            status @client
+          }
       }
     }
   }

web-app/src/containers/Tutorial/StageSummaryPage/index.tsx renamed to web-app/src/containers/Tutorial/StagePage/index.tsx

@@ -4,8 +4,8 @@ import { send } from 'utils/vscode'
 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

web-app/src/containers/Tutorial/StageSummaryPage/queryStage.ts renamed to web-app/src/containers/Tutorial/StagePage/queryStage.ts

@@ -8,7 +8,7 @@ import SideBarDecorator from './utils/SideBarDecorator'
 
 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)

web-app/src/containers/Tutorial/index.tsx

@@ -6,6 +6,8 @@ import { storiesOf } from '@storybook/react'
 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)
@@ -47,3 +49,5 @@ storiesOf('Tutorial SideBar', module)
       onContinue={action('onContinue')}
     />
   ))
+  .addDecorator(ApolloDecorator)
+  .add('Stage Summary Container', () => <StageContainer send={action('send')} />)