Merge pull request #385 from coderoad/fix/storybook

fix level stories

Author: ShMcK

Diff for: typings/tutorial.d.ts

@@ -1,3 +1,5 @@
+import { ProgressStatus } from './index'
+
 export type Maybe<T> = T | null
 
 export type TutorialConfig = {
@@ -19,6 +21,7 @@ export type Level = {
   setup?: Maybe<StepActions>
   /** A set of tasks for users linked to unit tests */
   steps: Array<Step>
+  status?: ProgressStatus
 }
 
 /** A level task */
@@ -29,6 +32,7 @@ export type Step = {
   solution: Maybe<StepActions>
   hints?: string[]
   subtasks?: string[]
+  status?: ProgressStatus
 }
 
 /** A tutorial for use in VSCode CodeRoad */

Diff for: web-app/src/containers/Tutorial/components/ContentMenu.tsx

@@ -5,24 +5,24 @@ import { Menu } from '@alifd/next'
 import Icon from '../../../components/Icon'
 
 interface Props {
-  tutorial: TT.Tutorial
+  levels: TT.Level[]
   position: T.Position
   progress: T.Progress
   setTitle: (title: string) => void
   setContent: (content: string) => void
 }
 
-const ContentMenu = ({ tutorial, position, progress, setTitle, setContent }: Props) => {
+const ContentMenu = ({ levels, position, progress, setTitle, setContent }: Props) => {
   const setMenuContent = (levelId: string) => {
-    const selectedLevel: TT.Level | undefined = tutorial.levels.find((l: TT.Level) => l.id === levelId)
+    const selectedLevel: TT.Level | undefined = levels.find((l: TT.Level) => l.id === levelId)
     if (selectedLevel) {
       setTitle(selectedLevel.title)
       setContent(selectedLevel.content)
     }
   }
   return (
     <Menu>
-      {tutorial.levels.map((level: TT.Level) => {
+      {levels.map((level: TT.Level) => {
         const isCurrent = level.id === position.levelId
         const isComplete = progress.levels[level.id]
         let icon

Diff for: web-app/src/containers/Tutorial/components/Level.tsx

@@ -88,7 +88,7 @@ const styles = {
 }
 
 interface Props {
-  tutorial: TT.Tutorial
+  tutorial: Exclude<TT.Tutorial, 'config'>
   index: number
   status: 'COMPLETE' | 'ACTIVE' | 'INCOMPLETE'
   progress: T.Progress
@@ -114,7 +114,9 @@ const Level = ({
   processes,
   testStatus,
 }: Props) => {
-  const level = tutorial.levels[index]
+  const level: TT.Level = tutorial.levels[index]
+
+  console.log(level)
 
   const [title, setTitle] = React.useState<string>(level.title)
   const [content, setContent] = React.useState<string>(level.content)
@@ -135,7 +137,7 @@ const Level = ({
 
   const menu = (
     <ContentMenu
-      tutorial={tutorial}
+      levels={tutorial.levels || []}
       position={position}
       progress={progress}
       setTitle={setTitle}