refactor traverse content component

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

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

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import * as T from 'typings'
+import * as TT from 'typings/tutorial'
+import { Menu } from '@alifd/next'
+import Icon from '../../components/Icon'
+
+interface Props {
+  tutorial: TT.Tutorial
+  position: T.Position
+  progress: T.Progress
+  setTitle: (title: string) => void
+  setContent: (content: string) => void
+}
+
+const ContentMenu = ({ tutorial, position, progress, setTitle, setContent }: Props) => {
+  const setMenuContent = (levelId: string) => {
+    const selectedLevel: TT.Level | undefined = tutorial.levels.find((l: TT.Level) => l.id === levelId)
+    if (selectedLevel) {
+      setTitle(selectedLevel.title)
+      setContent(selectedLevel.content)
+    }
+  }
+  return (
+    <Menu>
+      {tutorial.levels.map((level: TT.Level) => {
+        const isCurrent = level.id === position.levelId
+        const isComplete = progress.levels[level.id]
+        let icon
+        let disabled = false
+
+        if (isComplete) {
+          // completed icon
+          icon = <Icon type="minus" size="xs" />
+        } else if (isCurrent) {
+          // current icon`
+          icon = <Icon type="minus" size="xs" />
+        } else {
+          // upcoming
+          disabled = true
+          icon = <Icon type="lock" size="xs" />
+        }
+        return (
+          <Menu.Item key={level.id} disabled={disabled} onSelect={() => setMenuContent(level.id)}>
+            {icon}&nbsp;&nbsp;&nbsp;{level.title}
+          </Menu.Item>
+        )
+      })}
+    </Menu>
+  )
+}
+
+export default ContentMenu

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

@@ -1,11 +1,9 @@
 import * as React from 'react'
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
-import { Menu } from '@alifd/next'
 import * as selectors from '../../services/selectors'
-import Icon from '../../components/Icon'
+import ContentMenu from './ContentMenu'
 import Level from './components/Level'
-import logger from '../../services/logger'
 
 interface PageProps {
   context: T.MachineContext
@@ -45,48 +43,19 @@ const TutorialPage = (props: PageProps) => {
     return { ...step, status }
   })
 
-  const setMenuContent = (levelId: string) => {
-    const selectedLevel: TT.Level | undefined = tutorial.levels.find((l: TT.Level) => l.id === levelId)
-    if (selectedLevel) {
-      setTitle(selectedLevel.title)
-      setContent(selectedLevel.content)
-    }
-  }
-
-  const menu = (
-    <Menu>
-      {tutorial.levels.map((level: TT.Level) => {
-        const isCurrent = level.id === position.levelId
-        logger('progress', progress)
-        const isComplete = progress.levels[level.id]
-        let icon
-        let disabled = false
-
-        if (isComplete) {
-          // completed icon
-          icon = <Icon type="minus" size="xs" />
-        } else if (isCurrent) {
-          // current icon`
-          icon = <Icon type="minus" size="xs" />
-        } else {
-          // upcoming
-          disabled = true
-          icon = <Icon type="lock" size="xs" />
-        }
-        return (
-          <Menu.Item key={level.id} disabled={disabled} onSelect={() => setMenuContent(level.id)}>
-            {icon}&nbsp;&nbsp;&nbsp;{level.title}
-          </Menu.Item>
-        )
-      })}
-    </Menu>
-  )
-
   return (
     <Level
       title={title}
       content={content}
-      menu={menu}
+      menu={
+        <ContentMenu
+          tutorial={tutorial}
+          position={position}
+          progress={progress}
+          setTitle={setTitle}
+          setContent={setContent}
+        />
+      }
       index={tutorial.levels.findIndex((l: TT.Level) => l.id === position.levelId)}
       steps={steps}
       status={progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'}