Fix/no steps

src/channel/index.ts

@@ -70,7 +70,6 @@ class Channel implements Channel {
           this.send({ type: 'START_NEW_TUTORIAL' })
           return
         }
-        console.log('send LOAD_STORED_TUTORIAL')
         // communicate to client the tutorial & stepProgress state
         this.send({ type: 'LOAD_STORED_TUTORIAL', payload: { tutorial, progress, position } })
 

src/channel/state/Position.ts

@@ -3,7 +3,7 @@ import * as G from 'typings/graphql'
 
 const defaultValue: CR.Position = {
   levelId: '',
-  stepId: '',
+  stepId: null,
 }
 
 // position
@@ -42,18 +42,25 @@ class Position {
 
     // get step
     const currentLevel: G.Level = levels[lastLevelIndex]
-    const { steps } = currentLevel
-    const lastStepIndex: number | undefined = steps.findIndex((s: G.Step) => !progress.steps[s.id])
-    if (lastStepIndex >= steps.length) {
-      throw new Error('Error setting progress step')
+    let currentStepId: string | null
+    if (!currentLevel.steps.length) {
+      // no steps available for level
+      currentStepId = null
+    } else {
+      // find current step id
+      const { steps } = currentLevel
+      const lastStepIndex: number | undefined = steps.findIndex((s: G.Step) => !progress.steps[s.id])
+      if (lastStepIndex >= steps.length) {
+        throw new Error('Error setting progress step')
+      }
+      // handle position when last step is complete but "continue" not yet selected
+      const adjustedLastStepIndex = lastStepIndex === -1 ? steps.length - 1 : lastStepIndex
+      currentStepId = steps[adjustedLastStepIndex].id
     }
-    // handle position when last step is complete but "continue" not yet selected
-    const adjustedLastStepIndex = lastStepIndex === -1 ? steps.length - 1 : lastStepIndex
-    const currentStep: G.Step = steps[adjustedLastStepIndex]
 
     this.value = {
       levelId: currentLevel.id,
-      stepId: currentStep.id,
+      stepId: currentStepId,
     }
 
     return this.value

typings/index.d.ts

@@ -19,7 +19,7 @@ export interface StepProgress {
 // current tutorial position
 export interface Position {
   levelId: string
-  stepId: string
+  stepId: string | null
   complete?: boolean
 }
 

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

@@ -4,6 +4,7 @@ import { createMachine } from '../../services/state/machine'
 import { useMachine } from '../../services/xstate-react'
 import Route from './Route'
 import onError from '../../services/sentry/onError'
+import { LOG_STATE } from '../../environment'
 
 interface Output {
   context: T.MachineContext
@@ -20,6 +21,10 @@ const editor = acquireVsCodeApi()
 const useRouter = (): Output => {
   const [state, send] = useMachine<T.MachineContext, any>(createMachine({ editorSend: editor.postMessage }))
 
+  if (LOG_STATE) {
+    console.log(JSON.stringify(state.value))
+  }
+
   // event bus listener
   React.useEffect(() => {
     const listener = 'message'

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

@@ -12,12 +12,14 @@ const styles = {
   page: {
     backgroundColor: 'white',
     position: 'relative' as 'relative',
+    height: 'auto',
+    width: '100%',
+  },
+  content: {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     padding: 0,
     paddingBottom: '5rem',
-    height: 'auto',
-    width: '100%',
   },
   header: {
     height: '2rem',
@@ -26,13 +28,11 @@ const styles = {
     lineHeight: '1rem',
     padding: '10px 1rem',
   },
-  content: {
+  text: {
     padding: '0rem 1rem',
     paddingBottom: '1rem',
   },
-  tasks: {
-    paddingBottom: '5rem',
-  },
+  tasks: {},
   steps: {
     padding: '1rem 1rem',
   },
@@ -85,8 +85,10 @@ interface Props {
 }
 
 const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Props) => {
-  if (!level.steps) {
-    throw new Error('No Stage steps found')
+  // @ts-ignore
+  let currentStep = level.steps.findIndex(s => s.status === 'ACTIVE')
+  if (currentStep === -1) {
+    currentStep = level.steps.length
   }
 
   const pageBottomRef = React.useRef(null)
@@ -95,70 +97,70 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
     // @ts-ignore
     pageBottomRef.current.scrollIntoView({ behavior: 'smooth' })
   }
-  // @ts-ignore
-  let currentStep = level.steps.findIndex(s => s.status === 'ACTIVE')
-  if (currentStep === -1) {
-    currentStep = level.steps.length
-  }
   React.useEffect(scrollToBottom, [currentStep])
 
   return (
     <div css={styles.page}>
-      <div css={styles.header}>
-        <span>Learn</span>
-      </div>
       <div css={styles.content}>
-        <h2 css={styles.title}>{level.title}</h2>
-        <Markdown>{level.content || ''}</Markdown>
-      </div>
-
-      <div css={styles.tasks}>
-        <div css={styles.header}>Tasks</div>
-        <div css={styles.steps}>
-          {level.steps.map((step: (G.Step & { status: T.ProgressStatus }) | null, index: number) => {
-            if (!step) {
-              return null
-            }
-            return (
-              <Step
-                key={step.id}
-                order={index + 1}
-                status={step.status}
-                content={step.content}
-                onLoadSolution={onLoadSolution}
-              />
-            )
-          })}
+        <div css={styles.header}>
+          <span>Learn</span>
+        </div>
+        <div css={styles.text}>
+          <h2 css={styles.title}>{level.title}</h2>
+          <Markdown>{level.content || ''}</Markdown>
         </div>
+
+        {level.steps.length ? (
+          <div css={styles.tasks}>
+            <div css={styles.header}>Tasks</div>
+            <div css={styles.steps}>
+              {level.steps.map((step: (G.Step & { status: T.ProgressStatus }) | null, index: number) => {
+                if (!step) {
+                  return null
+                }
+                return (
+                  <Step
+                    key={step.id}
+                    order={index + 1}
+                    status={step.status}
+                    content={step.content}
+                    onLoadSolution={onLoadSolution}
+                  />
+                )
+              })}
+            </div>
+          </div>
+        ) : null}
+
         <div ref={pageBottomRef} />
-      </div>
 
-      {(testStatus || processes.length > 0) && (
-        <div css={styles.processes}>
-          <ProcessMessages processes={processes} testStatus={testStatus} />
-        </div>
-      )}
+        {(testStatus || processes.length > 0) && (
+          <div css={styles.processes}>
+            <ProcessMessages processes={processes} testStatus={testStatus} />
+          </div>
+        )}
 
-      <div css={styles.nux}>
-        <NuxTutorial onLoadSolution={onLoadSolution} />
-      </div>
+        <div css={styles.nux}>
+          <NuxTutorial onLoadSolution={onLoadSolution} />
+        </div>
 
-      <div css={styles.footer}>
-        <span>
-          {typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
-          {level.title}
-        </span>
-        <span>
-          {level.status === 'COMPLETE' ? (
-            <Button type="primary" onClick={onContinue}>
-              Continue
-            </Button>
-          ) : (
-            <span css={styles.taskCount}>
-              {currentStep} of {level.steps.length} tasks
-            </span>
-          )}
-        </span>
+        <div css={styles.footer}>
+          <span>
+            {typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
+            {level.title}
+          </span>
+          <span>
+            {level.status === 'COMPLETE' || !level.steps.length ? (
+              <Button type="primary" onClick={onContinue}>
+                Continue
+              </Button>
+            ) : (
+              <span css={styles.taskCount}>
+                {currentStep} of {level.steps.length} tasks
+              </span>
+            )}
+          </span>
+        </div>
       </div>
     </div>
   )

web-app/src/environment.ts

@@ -12,3 +12,4 @@ export const DEBUG: boolean = (process.env.REACT_APP_DEBUG || '').toLowerCase()
 export const VERSION: string = process.env.VERSION || 'unknown'
 export const NODE_ENV: string = process.env.NODE_ENV || 'production'
 export const AUTH_TOKEN: string | null = process.env.AUTH_TOKEN || null
+export const LOG_STATE: boolean = (process.env.LOG_STATE || '').toLowerCase() === 'true'

web-app/src/services/selectors/position.ts

@@ -5,14 +5,14 @@ import * as tutorial from './tutorial'
 
 export const defaultPosition = () => ({
   levelId: '',
-  stepId: '',
+  stepId: null,
 })
 
 export const initialPosition = createSelector(tutorial.currentVersion, (version: G.TutorialVersion) => {
   const level = version.data.levels[0]
   const position: CR.Position = {
     levelId: level.id,
-    stepId: level.steps[0].id,
+    stepId: level.steps.length ? level.steps[0].id : null,
   }
   return position
 })

web-app/src/services/selectors/tutorial.ts

@@ -41,17 +41,9 @@ export const currentLevel = (context: MachineContext): G.Level =>
     },
   )(context)
 
-export const currentStep = (context: MachineContext): G.Step =>
-  createSelector(
-    currentLevel,
-    (level: G.Level): G.Step => {
-      const steps: G.Step[] = level.steps
-      const step: G.Step | undefined = steps.find((s: G.Step) => s.id === context.position.stepId)
-      if (!step) {
-        const error = new Error(`No Step found for Level ${level.id}. Expected step ${context.position.stepId}`)
-        onError(error)
-        throw error
-      }
-      return step
-    },
-  )(context)
+export const currentStep = (context: MachineContext): G.Step | null =>
+  createSelector(currentLevel, (level: G.Level): G.Step | null => {
+    const steps: G.Step[] = level.steps
+    const step: G.Step | null = steps.find((s: G.Step) => s.id === context.position.stepId) || null
+    return step
+  })(context)