fix loading of levels/stages/steps

Author: ShMcK

web-app/src/components/Error/index.tsx

@@ -21,8 +21,8 @@ const ErrorView = ({ error }: Props) => {
       <h1>Error</h1>
       {error.graphQLErrors && (
         <div>
-          {error.graphQLErrors.map(({ message, locations, path }: GraphQLError) => (
-            <h5>
+          {error.graphQLErrors.map(({ message, locations, path }: GraphQLError, index: number) => (
+            <h5 key={index}>
               <b>[GraphQL error]:</b> Message: {message}, Location: {locations}, Path: {path}
             </h5>
           ))}

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

@@ -3,7 +3,6 @@ import { useQuery } from '@apollo/react-hooks'
 import * as CR from 'typings'
 import * as G from 'typings/graphql'
 
-import currentTutorial from '../../../services/current'
 import ErrorView from '../../../components/Error'
 import Level from './Level'
 import queryLevel from './queryLevel'
@@ -29,7 +28,6 @@ interface ContainerProps {
 }
 
 const LevelSummaryPageContainer = (props: ContainerProps) => {
-	console.log('load level summary')
 	const { tutorial, position, progress } = props.context
 
   const { loading, error, data } = useQuery(queryLevel, {
@@ -39,9 +37,6 @@ const LevelSummaryPageContainer = (props: ContainerProps) => {
       levelId: position.levelId,
     },
 	})
-	
-	console.log('load level data')
-	console.log(JSON.stringify(data))
 
   if (loading) {
     return <div>Loading Levels...</div>
@@ -63,9 +58,6 @@ const LevelSummaryPageContainer = (props: ContainerProps) => {
 		}
 	})
 
-	console.log('check level')
-	console.log(JSON.stringify(level))
-
   return <LevelSummaryPage level={level} send={props.send} />
 }
 

web-app/src/containers/Tutorial/LevelPage/queryLevel.ts

@@ -11,12 +11,22 @@ export default gql`
           id
           title
           text
-          status @client
+					setup {
+						id
+						commits
+						commands
+						files
+					}
           stages {
             id
             title
             text
-            status @client
+						setup {
+							id
+							commits
+							commands
+							files
+						}
           }
       }
     }

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

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import * as CR from 'typings'
+import * as G from 'typings/graphql'
 import { useQuery } from '@apollo/react-hooks'
 
-import currentTutorial from '../../../services/current'
 import ErrorView from '../../../components/Error'
 import Stage from './Stage'
 import queryStage from './queryStage'
@@ -13,12 +13,12 @@ interface PageProps {
 }
 
 const StageSummaryPageContainer = (props: PageProps) => {
-	const { tutorialId, version, position: { stageId } } = currentTutorial.get()
+	const { tutorial, position, progress } = props.context
   const { loading, error, data } = useQuery(queryStage, {
     variables: {
-      tutorialId,
-      version,
-      stageId,
+      tutorialId: tutorial.id,
+      version: tutorial.version.version,
+      stageId: position.stageId,
     },
   })
   if (loading) {
@@ -29,9 +29,17 @@ const StageSummaryPageContainer = (props: PageProps) => {
     return <ErrorView error={error} />
   }
 
-  console.log('data', data)
-
-  const { stage } = data.tutorial.version
+	const { stage } = data.tutorial.version
+	
+	stage.steps.forEach((step: G.Step) => {
+		if (step.id === position.stepId) {
+			step.status = 'ACTIVE'
+		} else if (progress.steps[step.id]) {
+			step.status = 'COMPLETE'
+		} else {
+			step.status = 'INCOMPLETE'
+		}
+	})
 
   const onContinue = (): void => {
     props.send('STAGE_NEXT')

web-app/src/containers/Tutorial/StagePage/queryStage.ts

@@ -1,4 +1,4 @@
-import { gql } from 'apollo-boost'
+import {gql} from 'apollo-boost'
 
 export default gql`
   query getStage($tutorialId: ID!, $version: String, $stageId: ID!) {
@@ -11,12 +11,28 @@ export default gql`
           id
           title
           text
-          status @client
+					setup {
+						id
+						commits
+						commands
+						files
+					}
           steps {
             id
             title
             text
-            status @client
+						setup {
+							id
+							commits
+							commands
+							files
+						}
+						solution {
+							id
+							commits
+							commands
+							files
+						}
           }
       }
     }

web-app/src/containers/Tutorial/SummaryPage/querySummary.ts

@@ -11,10 +11,34 @@ export default gql`
 				coderoadVersion
 				levels {
 					id
+					setup {
+						id
+						commands
+						commits
+						files
+					}
 					stages {
 						id
+						setup {
+							id
+							commands
+							commits
+							files
+						}
 						steps {
 							id
+							setup {
+								id
+								commands
+								commits
+								files
+							}
+							solution {
+								id
+								commands
+								commits
+								files
+							}
 						}
 					}
 				}