fix issue when continue history is unusable

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

Author: ShMcK

web-app/src/containers/Start/getProgress.ts

@@ -1,7 +1,7 @@
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
 
-const getProgress = (levels: TT.Level[] = [], position: T.Position): number => {
+const getProgress = (levels: TT.Level[] = [], position: T.Position): number | null => {
   let progress = 0
   let isLevelComplete = false
   if (levels && levels.length) {
@@ -10,7 +10,9 @@ const getProgress = (levels: TT.Level[] = [], position: T.Position): number => {
     const currentLevel: TT.Level | undefined = levels.find(findLevel)
     let currentLevelIndex: number = levels.findIndex(findLevel)
     if (!currentLevel) {
-      throw new Error('Invalid level')
+      // something went wrong, just return null
+      console.error('Invalid level match between levels & position')
+      return null
     }
     // check if the level is complete
     if (position.stepId && currentLevel.steps && currentLevel.steps.length) {

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

@@ -97,7 +97,7 @@ interface Props {
   onContinue(): void
   onNew(): void
   tutorial: TT.Tutorial | null
-  progress: number
+  progress: number | null
 }
 
 export const StartPage = (props: Props) => (
@@ -118,12 +118,12 @@ export const StartPage = (props: Props) => (
           Start New Tutorial
         </Button>
       </div>
-      {props.tutorial && (
+      {!!props.tutorial && props.progress !== null && (
         <div css={styles.buttonContainer}>
           <button onClick={props.onContinue} css={styles.buttonLarge}>
             Continue Tutorial
             <div css={styles.continueTitle}>"{props.tutorial.summary.title}"</div>
-            <Progress style={{ marginLeft: '1rem' }} percent={props.progress} hasBorder size="large" />
+            <Progress style={{ marginLeft: '1rem' }} percent={props.progress || 0} hasBorder size="large" />
           </button>
         </div>
       )}
@@ -142,7 +142,7 @@ interface ContainerProps {
 }
 
 const StartPageContainer = ({ context, send }: ContainerProps) => {
-  const progress: number = getProgress(context?.tutorial?.levels, context.position)
+  const progress = getProgress(context?.tutorial?.levels, context.position)
   return (
     <StartPage
       onContinue={() => send({ type: 'CONTINUE_TUTORIAL' })}