cleanup gql paths

Author: ShMcK

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

@@ -1,6 +1,6 @@
 import { Button, Step } from '@alifd/next'
 import * as React from 'react'
-import * as T from '../../../../typings/graphql'
+import * as T from 'typings/graphql'
 
 import Markdown from '../Markdown'
 import LevelStageSummary from './LevelStageSummary'

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

@@ -1,6 +1,6 @@
 import { Button, Step } from '@alifd/next'
 import * as React from 'react'
-import CR from 'typings'
+import * as T from 'typings/graphql'
 
 import Markdown from '../Markdown'
 import StepDescription from './StepDescription'
@@ -23,36 +23,39 @@ const styles = {
 }
 
 interface Props {
-  stage: CR.TutorialStage
-  steps: {
-    [stepId: string]: any // CC.Step
-  }
+  stage: T.Stage
   complete: boolean
   onContinue(): void
 }
 
-const Stage = ({ stage, steps, onContinue, complete }: Props) => {
-  const { stepList, content } = stage
-  const { title, text } = content
+const Stage = ({ stage, onContinue, complete }: Props) => {
+  if (!stage.steps) {
+    throw new Error('No Stage steps found')
+  }
+
   // grab the active step
-  const activeIndex = stepList.findIndex((stepId: string) => {
-    return steps[stepId].status.active
+  const activeIndex: number = stage.steps.findIndex((step: T.Step | null) => {
+    return step && step.status === 'ACTIVE'
   })
+
   return (
     <div style={styles.card}>
       <div style={styles.content}>
-        <h2 style={styles.title}>{title}</h2>
-        <Markdown>{text}</Markdown>
+        <h2 style={styles.title}>{stage.title}</h2>
+        <Markdown>{stage.text || ''}</Markdown>
       </div>
       <div style={styles.steps}>
         <Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
-          {stepList.map((stepId: string, index: number) => {
-            const step = steps[stepId]
+          {stage.steps.map((step: T.Step | null, index: number) => {
+            if (!step) {
+              return null
+            }
+            const hide = status === 'INCOMPLETE'
             return (
               <Step.Item
-                key={stepId}
-                title={step.content.title || `Step ${index + 1}`}
-                content={<StepDescription content={step.content} status={step.status} />}
+                key={step.id}
+                title={step.title || `Step ${index + 1}`}
+                content={<StepDescription text={step.text} hide={hide} />}
               />
             )
           })}

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import * as T from '../../../../typings/graphql'
+import * as T from 'typings/graphql'
 import TutorialItem from './TutorialItem'
 
 interface Props {

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

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { useQuery } from '@apollo/react-hooks'
 import { Button, Card } from '@alifd/next'
+import * as T from 'typings/graphql'
 
 import { send } from '../../utils/vscode'
 import LoadingPage from '../LoadingPage'
 import queryTutorial from './queryTutorial'
 import ErrorView from '../../components/Error'
-import * as T from '../../../../typings/graphql'
 
 interface Props {
   tutorial: T.Tutorial

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useQuery } from '@apollo/react-hooks'
-import * as T from '../../../../typings/graphql'
+import * as T from 'typings/graphql'
 
 import queryTutorials from './queryTutorials'
 import { send } from '../../utils/vscode'

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

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { useQuery } from '@apollo/react-hooks'
+import * as T from 'typings/graphql'
 
 import ErrorView from '../../../components/Error'
 import Level from '../../../components/Level'
-import * as T from '../../../../../typings/graphql'
 import queryLevel from './queryLevel'
 
 interface LevelProps {

web-app/tsconfig.paths.json

@@ -3,7 +3,8 @@
     "baseUrl": "src",
     "rootDirs": ["src", "stories"],
     "paths": {
-      "typings": ["../../typings/index.d.ts"]
+      "typings": ["../../typings/index.d.ts"],
+      "typings/graphql": ["../../typings/graphql.d.ts"]
     },
     "allowSyntheticDefaultImports": true
   },