format levels/steps/subtasks in fn

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

Author: ShMcK

web-app/src/containers/Tutorial/components/Level.tsx

@@ -37,15 +37,9 @@ const styles = {
 
 interface Props {
   level: TT.Level
-  currentStep: number
-  status: 'COMPLETE' | 'ACTIVE' | 'INCOMPLETE'
-  progress: T.Progress
-  position: T.Position
-  processes: T.ProcessEvent[]
-  testStatus: T.TestStatus | null
 }
 
-const Level = ({ level, progress, position, currentStep, testStatus }: Props) => {
+const Level = ({ level }: Props) => {
   // hold state for hints for the level
   const [displayHintsIndex, setDisplayHintsIndex] = React.useState<number[]>([])
   const setHintsIndex = (index: number, value: number) => {
@@ -58,41 +52,23 @@ const Level = ({ level, progress, position, currentStep, testStatus }: Props) =>
   React.useEffect(() => {
     // set the hints to empty on level starts
     setDisplayHintsIndex(level.steps.map((s: TT.Step) => -1))
-  }, [position.levelId])
-
-  const steps: TT.Step[] = level.steps.map((step: TT.Step) => {
-    // label step status for step component
-    let status: T.ProgressStatus = 'INCOMPLETE'
-    if (progress.steps[step.id]) {
-      status = 'COMPLETE'
-    } else if (step.id === position.stepId) {
-      status = 'ACTIVE'
-    }
-    return { ...step, status }
-  })
-
-  // current
+  }, [level.id])
 
   const pageBottomRef = React.useRef(null)
   const scrollToBottom = () => {
     // @ts-ignore
     pageBottomRef.current.scrollIntoView({ behavior: 'smooth' })
   }
-  React.useEffect(scrollToBottom, [currentStep])
+  React.useEffect(scrollToBottom, [level.id])
 
   return (
     <div css={styles.page}>
       <div css={styles.content}>
         <Content title={level.title} content={level.content} />
 
-        {level.content.length && steps.length ? <div css={styles.separator} /> : null}
+        {level.content.length && level.steps.length ? <div css={styles.separator} /> : null}
 
-        <Steps
-          steps={steps}
-          testStatus={testStatus}
-          setHintsIndex={setHintsIndex}
-          displayHintsIndex={displayHintsIndex}
-        />
+        <Steps steps={level.steps} setHintsIndex={setHintsIndex} displayHintsIndex={displayHintsIndex} />
 
         <div ref={pageBottomRef} />
       </div>

web-app/src/containers/Tutorial/components/Steps.tsx

@@ -6,7 +6,6 @@ import Hints from './Hints'
 
 interface Props {
   steps: TT.Step[]
-  testStatus: T.TestStatus | null
   displayHintsIndex: number[]
   setHintsIndex(stepIndex: number, value: number): void
 }
@@ -23,20 +22,14 @@ const Steps = (props: Props) => {
   }
   return (
     <div css={styles.steps}>
-      {props.steps.map((step: TT.Step | null, stepIndex: number) => {
+      {/* @ts-ignore typings are different between UI & data */}
+      {props.steps.map((step: TT.Step & { subtasks: null | { name: string; pass: boolean }[] }, stepIndex: number) => {
         if (!step) {
           return null
         }
-        let subtasks = null
-        if (step?.subtasks) {
-          subtasks = step.subtasks.map((subtask: string, subtaskIndex: number) => ({
-            name: subtask,
-            pass: !!(props.testStatus?.summary ? props.testStatus.summary[subtaskIndex] : false),
-          }))
-        }
         return (
           <>
-            <Step key={step.id} status={step.status || 'INCOMPLETE'} content={step.content} subtasks={subtasks} />
+            <Step key={step.id} status={step.status || 'INCOMPLETE'} content={step.content} subtasks={step.subtasks} />
             <Hints
               hints={step.hints || []}
               hintIndex={props.displayHintsIndex[stepIndex]}

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

@@ -6,8 +6,6 @@ import Content from '../components/Content'
 
 interface Props {
   levels: TT.Level[]
-  progress: T.Progress
-  testStatus: T.TestStatus
 }
 
 const styles = {
@@ -25,12 +23,7 @@ const ReviewPage = (props: Props) => {
           <>
             <div>
               <Content title={level.title} content={level.content} />
-              <Steps
-                steps={level.steps}
-                testStatus={props.testStatus}
-                displayHintsIndex={level.steps.map((s) => -1)}
-                setHintsIndex={() => {}}
-              />
+              <Steps steps={level.steps} displayHintsIndex={level.steps.map((s) => -1)} setHintsIndex={() => {}} />
             </div>
             {index < props.levels.length - 1 ? <hr /> : null}
           </>

web-app/src/containers/Tutorial/formatLevels.ts

@@ -0,0 +1,60 @@
+import * as T from 'typings'
+import * as TT from 'typings/tutorial'
+
+interface Props {
+  progress: T.Progress
+  position: T.Position
+  levels: TT.Level[]
+  testStatus: T.TestStatus | null
+}
+
+/*
+ * Format levels to include:
+ * - level.status = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE'
+ * - step.status = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE' | 'FAIL'
+ * - step.subtasks as { name: string, pass: boolean }[]
+ */
+const formatLevels = ({
+  progress,
+  position,
+  levels,
+  testStatus,
+}: Props): { levels: TT.Level[]; level: TT.Level; stepIndex: number } => {
+  // clone levels
+  const formattedLevels = [...levels]
+
+  const level = formattedLevels.find((l: TT.Level) => l.id === position.levelId)
+
+  if (!level) {
+    throw new Error(`Level "${position.levelId}" not found`)
+  }
+
+  // add level status
+  level.status = progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'
+
+  // add step status
+  level.steps = level.steps.map((step: TT.Step) => {
+    // label step status for step component
+    let status: T.ProgressStatus = 'INCOMPLETE'
+    if (progress.steps[step.id]) {
+      status = 'COMPLETE'
+    } else if (step.id === position.stepId) {
+      status = 'ACTIVE'
+      if (step.subtasks && step.subtasks) {
+        step.subtasks.map((subtask: string, subtaskIndex: number) => ({
+          name: subtask,
+          pass: !!(testStatus?.summary ? testStatus.summary[subtaskIndex] : false),
+        }))
+      }
+    }
+    return { ...step, status }
+  })
+
+  let stepIndex = level.steps.findIndex((s: TT.Step) => s.status === 'ACTIVE')
+  if (stepIndex === -1) {
+    stepIndex = level.steps.length
+  }
+  return { levels: formattedLevels, level, stepIndex }
+}
+
+export default formatLevels

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

@@ -12,6 +12,7 @@ import ProcessMessages from '../../components/ProcessMessages'
 import TestMessage from '../../components/TestMessage'
 import { Progress } from '@alifd/next'
 import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
+import formatLevels from './formatLevels'
 
 const styles = {
   header: {
@@ -76,6 +77,12 @@ interface PageProps {
   send(action: T.Action): void
 }
 
+/**
+ * NOTE: Unused commands
+ * { type: 'STEP_SOLUTION_LOAD' }
+ * { type: 'OPEN_LOGS', payload: { channel } }
+ */
+
 const TutorialPage = (props: PageProps) => {
   const { position, progress, processes, testStatus } = props.context
 
@@ -90,29 +97,20 @@ const TutorialPage = (props: PageProps) => {
     })
   }
 
-  // const onLoadSolution = (): void => {
-  //   props.send({ type: 'STEP_SOLUTION_LOAD' })
-  // }
-
   const onRunTest = (): void => {
     props.send({ type: 'RUN_TEST' })
   }
 
-  // const onOpenLogs = (channel: string): void => {
-  //   props.send({ type: 'OPEN_LOGS', payload: { channel } })
-  // }
-
-  const levelIndex = tutorial.levels.findIndex((l: TT.Level) => l.id === position.levelId)
-  const levelStatus = progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'
-  const level: TT.Level = tutorial.levels[levelIndex]
   const [menuVisible, setMenuVisible] = React.useState(false)
 
   const [page, setPage] = React.useState<'level' | 'settings' | 'review'>('level')
 
-  let currentStep = level.steps.findIndex((s: TT.Step) => s.status === 'ACTIVE')
-  if (currentStep === -1) {
-    currentStep = level.steps.length
-  }
+  const { level, levels, stepIndex } = formatLevels({
+    progress,
+    position,
+    levels: tutorial.levels,
+    testStatus,
+  })
 
   return (
     <div>
@@ -124,19 +122,9 @@ const TutorialPage = (props: PageProps) => {
           <span css={styles.title}>{tutorial.summary.title}</span>
         </div>
 
-        {page === 'level' && (
-          <Level
-            level={level}
-            currentStep={currentStep}
-            status={levelStatus}
-            progress={progress}
-            position={position}
-            processes={processes}
-            testStatus={testStatus}
-          />
-        )}
+        {page === 'level' && <Level level={level} />}
         {page === 'settings' && <SettingsPage />}
-        {page === 'review' && <ReviewPage levels={tutorial.levels} progress={progress} testStatus={testStatus} />}
+        {page === 'review' && <ReviewPage levels={levels} />}
       </div>
       <div css={styles.footer}>
         {/* Process Modal */}
@@ -152,7 +140,7 @@ const TutorialPage = (props: PageProps) => {
           </div>
         )}
         {/* Left */}
-        {DISPLAY_RUN_TEST_BUTTON && levelStatus !== 'COMPLETE' ? (
+        {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
           <Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={processes.length > 0}>
             Run
           </Button>
@@ -165,22 +153,22 @@ const TutorialPage = (props: PageProps) => {
 
         {/* Right */}
         <div>
-          {levelStatus === 'COMPLETE' || !level.steps.length ? (
+          {level.status === 'COMPLETE' || !level.steps.length ? (
             <Button type="primary" onClick={onContinue}>
               Continue
             </Button>
           ) : (
             <Progress
               state="success"
               progressive
-              percent={(currentStep / level.steps.length) * 100}
+              percent={(stepIndex / level.steps.length) * 100}
               shape="line"
               color="rgb(85, 132, 255)"
               css={styles.taskProgress}
               textRender={(percent: number) => {
                 return (
                   <span style={{ color: 'white' }}>
-                    {currentStep} of {level.steps.length}
+                    {stepIndex} of {level.steps.length}
                   </span>
                 )
               }}