cleanup levelUI & stepUI typings

Signed-off-by: shmck <[email protected]>

Author: ShMcK

Diff for: typings/index.d.ts

@@ -1,6 +1,28 @@
 import * as E from './error'
 import * as TT from './tutorial'
 
+export type LevelUI = {
+  id: string
+  title: string
+  /** A summary of the level */
+  summary: string
+  /** The lesson content of the level, parsed as markdown */
+  content: string
+  /** A set of tasks for users linked to unit tests */
+  steps: StepUI[]
+  status: ProgressStatus
+}
+
+export type StepUI = {
+  id: string
+  content: string
+  status: ProgressStatus
+  hints?: string[]
+  subtasks?: SubtaskUI[]
+}
+
+export type SubtaskUI = { name: string; status: ProgressStatus }
+
 export type ProgressStatus = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE' | 'FAIL'
 
 export interface Progress {

Diff for: typings/tutorial.d.ts

@@ -32,7 +32,6 @@ 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/Level.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import * as T from 'typings'
-import * as TT from 'typings/tutorial'
 import { css, jsx } from '@emotion/core'
 import Content from './Content'
 import Steps from './Steps'
@@ -35,8 +34,8 @@ const styles = {
   },
 }
 
-interface Props {
-  level: TT.Level
+type Props = {
+  level: T.LevelUI
 }
 
 const Level = ({ level }: Props) => {

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

@@ -7,7 +7,7 @@ import Markdown from '../../../components/Markdown'
 interface Props {
   content: string
   status: T.ProgressStatus
-  subtasks: { name: string; pass: boolean }[] | null
+  subtasks?: T.SubtaskUI[]
   displayAll: boolean
 }
 
@@ -60,16 +60,9 @@ const Step = (props: Props) => {
           {props.subtasks ? (
             <ul css={styles.subtasks}>
               {props.subtasks.map((subtask) => {
-                let subtaskStatus: 'COMPLETE' | 'ACTIVE'
-                if (props.status === 'COMPLETE') {
-                  subtaskStatus = 'COMPLETE'
-                } else {
-                  subtaskStatus = subtask.pass ? 'COMPLETE' : 'ACTIVE'
-                }
-
                 return (
                   <li key={subtask.name} css={styles.subtask}>
-                    <TestStatusIcon size="xs" status={subtaskStatus} />
+                    <TestStatusIcon size="xs" status={subtask.status} />
                     <span style={{ marginLeft: '0.5rem' }}>{subtask.name}</span>
                   </li>
                 )

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

@@ -1,12 +1,11 @@
 import * as React from 'react'
 import * as T from 'typings'
-import * as TT from 'typings/tutorial'
 import Step from './Step'
 import Hints from './Hints'
 
 interface Props {
-  steps: TT.Step[]
-  displayAll: boolean
+  steps: T.StepUI[]
+  displayAll?: boolean
 }
 
 const styles = {
@@ -22,16 +21,16 @@ const Steps = (props: Props) => {
   return (
     <div css={styles.steps}>
       {/* @ts-ignore typings are different between UI & data */}
-      {props.steps.map((step: TT.Step & { subtasks: null | { name: string; pass: boolean }[] }) => {
+      {props.steps.map((step: T.StepUI) => {
         if (!step) {
           return null
         }
         return (
           <div key={step.id}>
             <Step
               key={step.id}
-              status={step.status || 'INCOMPLETE'}
-              displayAll={props.displayAll}
+              status={step.status}
+              displayAll={props.displayAll || false}
               content={step.content}
               subtasks={step.subtasks}
             />

Diff for: web-app/src/containers/Tutorial/formatLevels.ts

@@ -1,60 +1,69 @@
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
 
-interface Props {
+interface Input {
   progress: T.Progress
   position: T.Position
   levels: TT.Level[]
   testStatus: T.TestStatus | null
 }
 
+type Output = {
+  level: T.LevelUI
+  stepIndex: number
+}
+
 /*
  * Format levels to include:
  * - level.status = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE'
  * - step.status = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE' | 'FAIL'
- * - step.subtasks as { name: string, pass: boolean }[]
+ * - step.subtasks as { name: string, status: 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE' }[]
  */
-const formatLevels = ({
-  progress,
-  position,
-  levels,
-  testStatus,
-}: Props): { levels: TT.Level[]; level: TT.Level; stepIndex: number } => {
+const formatLevels = ({ progress, position, levels, testStatus }: Input): Output => {
   // clone levels
-  const formattedLevels = [...levels]
 
-  const level = formattedLevels.find((l: TT.Level) => l.id === position.levelId)
+  const level: TT.Level | undefined = levels.find((l: TT.Level) => l.id === position.levelId)
 
   if (!level) {
-    throw new Error(`Level "${position.levelId}" not found`)
+    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),
-        }))
+  const levelUI: T.LevelUI = {
+    ...level,
+    status: progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE',
+    steps: level.steps.map((step: TT.Step) => {
+      // label step status for step component
+      let status: T.ProgressStatus = 'INCOMPLETE'
+      let subtasks
+      if (progress.steps[step.id]) {
+        status = 'COMPLETE'
+      } else if (step.id === position.stepId) {
+        status = 'ACTIVE'
+        if (step.subtasks && step.subtasks) {
+          subtasks = step.subtasks.map((subtask: string, subtaskIndex: number) => {
+            let subtaskStatus: T.ProgressStatus = 'INCOMPLETE'
+            // task is complete, subtasks must be complete
+            if (status === 'COMPLETE') {
+              subtaskStatus = 'COMPLETE'
+              // task is active, check which are complete from test results
+            } else if (status === 'ACTIVE') {
+              subtaskStatus = !!(testStatus?.summary && testStatus.summary[subtaskIndex]) ? 'COMPLETE' : 'ACTIVE'
+            }
+            return {
+              name: subtask,
+              status: subtaskStatus,
+            }
+          })
+        }
       }
-    }
-    return { ...step, status }
-  })
-
-  let stepIndex = level.steps.findIndex((s: TT.Step) => s.status === 'ACTIVE')
+      return { ...step, status, subtasks }
+    }),
+  }
+  let stepIndex = levelUI.steps.findIndex((s: T.StepUI) => s.status === 'ACTIVE')
   if (stepIndex === -1) {
     stepIndex = level.steps.length
   }
-  return { levels: formattedLevels, level, stepIndex }
+  return { level: levelUI, stepIndex }
 }
 
 export default formatLevels

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

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as T from 'typings'
+import './style.css'
 import * as selectors from '../../services/selectors'
 import SideMenu from './components/SideMenu'
 import Level from './components/Level'
@@ -104,7 +105,7 @@ const TutorialPage = (props: PageProps) => {
 
   const [page, setPage] = React.useState<'level' | 'settings' | 'review'>('level')
 
-  const { level, levels, stepIndex } = formatLevels({
+  const { level, stepIndex } = formatLevels({
     progress,
     position,
     levels: tutorial.levels,
@@ -122,7 +123,7 @@ const TutorialPage = (props: PageProps) => {
         </div>
 
         {page === 'level' && <Level level={level} />}
-        {page === 'review' && <ReviewPage levels={levels} />}
+        {page === 'review' && <ReviewPage levels={tutorial.levels} />}
         {/* {page === 'settings' && <SettingsPage />} */}
       </div>
       <div css={styles.footer}>

Diff for: web-app/src/containers/Tutorial/style.css

@@ -0,0 +1,4 @@
+/* remove visited styles from menu button */
+i.next-icon:visited {
+  text-decoration: none;
+}