working LevelStage container

Author: ShMcK

typings/graphql.d.ts

@@ -65,6 +65,7 @@ export type Level = {
     text?: Maybe<Scalars['String']>,
     stages?: Maybe<Array<Maybe<Stage>>>,
     setup?: Maybe<StepActions>,
+    status?: 'INCOMPLETE' | 'COMPLETE' | 'ACTIVE',
 };
 
 export type Mutation = {
@@ -125,6 +126,7 @@ export type Stage = {
     text?: Maybe<Scalars['String']>,
     steps?: Maybe<Array<Maybe<Step>>>,
     setup?: Maybe<StepActions>,
+    status?: 'INCOMPLETE' | 'COMPLETE' | 'ACTIVE',
 };
 
 export type Step = {
@@ -134,6 +136,7 @@ export type Step = {
     text?: Maybe<Scalars['String']>,
     setup?: Maybe<StepActions>,
     solution?: Maybe<StepActions>,
+    status?: 'INCOMPLETE' | 'COMPLETE' | 'ACTIVE'
 };
 
 export type StepActions = {

web-app/src/components/Level/LevelStageSummary.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@alifd/next'
 import * as React from 'react'
-import CC from '../../../../typings/context'
+import * as T from '../../../../typings/graphql'
 
 import Markdown from '../Markdown'
 
@@ -24,17 +24,17 @@ const styles = {
 }
 
 interface Props {
-  stage: CC.StageWithStatus
+  stage: T.Stage
   onNext(): void
 }
 
 const LevelStageSummary = (props: Props) => {
   const { stage, onNext } = props
-  const { active } = stage.status
+  const active = stage.status === 'ACTIVE'
   return (
     <div style={styles.card} className={active ? 'hover-select' : ''} onClick={onNext}>
       <div style={styles.left}>
-        <Markdown>{stage.content.text}</Markdown>
+        <Markdown>{stage.text || ''}</Markdown>
       </div>
       <div style={styles.right}>{active && <Icon type="arrow-right" style={styles.continueIcon} />}</div>
     </div>

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

@@ -1,7 +1,6 @@
 import { Button, Step } from '@alifd/next'
 import * as React from 'react'
-import CR from 'typings'
-import CC from '../../../../typings/context'
+import * as T from '../../../../typings/graphql'
 
 import Markdown from '../Markdown'
 import LevelStageSummary from './LevelStageSummary'
@@ -25,45 +24,46 @@ const styles = {
 }
 
 interface Props {
-  level: CR.TutorialLevel
-  stages: {
-    [stageId: string]: any // CC.StageWithStatus
-  }
+  level: T.Level
   onNext(): void
   onBack(): void
 }
 
-const Level = ({ level, stages, onNext, onBack }: Props) => {
-  const { content, stageList } = level
-  const { title, text } = content
-  const activeIndex = stageList.findIndex((stageId: string) => {
-    return stages[stageId].status.active
-  })
-
+const Level = ({ level, onNext, onBack }: Props) => {
+  if (!level || !level.stages) {
+    throw new Error('No level stages found')
+  }
+  const activeIndex = level.stages.findIndex((stage: T.Stage | null) => stage && stage.status === 'ACTIVE') || 0
   return (
     <div style={styles.card}>
       <div style={styles.content}>
-        <h2 style={styles.title}>{title}</h2>
-        <Markdown>{text}</Markdown>
+        <h2 style={styles.title}>{level.title}</h2>
+        <Markdown>{level.text || ''}</Markdown>
       </div>
       <div style={styles.steps}>
         <Step current={activeIndex} direction="ver" animation={false}>
-          {stageList.map((stageId: string, index: number) => {
-            const stage: CC.StageWithStatus = stages[stageId]
-            const { active } = stage.status
-            const clickHandler = active ? onNext : () => {}
+          {level.stages.map((stage: T.Stage | null, index: number) => {
+            if (!stage) {
+              return null
+            }
+            const active = stage.status === 'ACTIVE'
+            const clickHandler = active
+              ? onNext
+              : () => {
+                  /* empty */
+                }
             // note - must add click handler to title, content & step.item
             // as all are separted components
             return (
               <Step.Item
-                key={stageId}
+                key={stage.id}
                 style={{ backgroundColor: 'blue' }}
                 title={
                   <span className={active ? 'hover-select' : ''} onClick={clickHandler}>
-                    {stage.content.title || `Stage ${index + 1}`}
+                    {stage.title || `Stage ${index + 1}`}
                   </span>
                 }
-                content={<LevelStageSummary key={stageId} stage={stage} onNext={clickHandler} />}
+                content={<LevelStageSummary key={stage.id} stage={stage} onNext={clickHandler} />}
                 onClick={clickHandler}
               />
             )

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

@@ -2,47 +2,32 @@ import * as React from 'react'
 import { useQuery } from '@apollo/react-hooks'
 
 import ErrorView from '../../../components/Error'
-// import Level from '../../../components/Level'
+import Level from '../../../components/Level'
 import * as T from '../../../../../typings/graphql'
-import queryLevels from './queryLevels'
+import queryLevel from './queryLevel'
 
 interface LevelProps {
-  levels: T.Level[]
+  level: T.Level
   send(action: string): void
 }
 
 export const LevelSummaryPage = (props: LevelProps) => {
-  // const { levelId } = position
-  // const level = data.levels[levelId]
-  // const onNext = (): void => {
-  //   props.send('NEXT')
-  // }
-  // const onBack = (): void => {
-  //   props.send('BACK')
-  // }
-
-  // const stages: { [stageId: string]: any } = {}
-  // for (const stageId of level.stageList) {
-  //   stages[stageId] = {
-  //     ...data.stages[stageId],
-  //     status: {
-  //       complete: progress.stages[stageId] || false,
-  //       active: position.stageId === stageId,
-  //     },
-  //   }
-  // }
-
-  return <div>LevelSummaryPage</div>
-
-  // return <Level level={level} stages={stages} onNext={onNext} onBack={onBack} />
+  const onNext = (): void => {
+    props.send('NEXT')
+  }
+  const onBack = (): void => {
+    props.send('BACK')
+  }
+  console.log('props', props)
+  return <Level level={props.level} onNext={onNext} onBack={onBack} />
 }
 
 interface ContainerProps {
   send(action: string): void
 }
 
 const LevelSummaryPageContainer = (props: ContainerProps) => {
-  const { loading, error, data } = useQuery(queryLevels, {
+  const { loading, error, data } = useQuery(queryLevel, {
     variables: {
       tutorialId: '1',
       version: '0.1.0',
@@ -58,9 +43,9 @@ const LevelSummaryPageContainer = (props: ContainerProps) => {
     return <ErrorView error={error} />
   }
 
-  const { levels } = data.tutorial.version
+  const { level } = data.tutorial.version
 
-  return <LevelSummaryPage levels={levels} send={props.send} />
+  return <LevelSummaryPage level={level} send={props.send} />
 }
 
 export default LevelSummaryPageContainer

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

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

web-app/src/services/apollo/index.ts

@@ -41,6 +41,21 @@ const client = new ApolloClient({
                 return null
             },
         },
+        Level: {
+            status() {
+                return 'INCOMPLETE'
+            }
+        },
+        Stage: {
+            status() {
+                return 'INCOMPLETE'
+            }
+        },
+        Step: {
+            status() {
+                return 'INCOMPLETE'
+            }
+        }
     },
 })