route change progress

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

Author: ShMcK

typings/index.d.ts

@@ -76,7 +76,6 @@ export interface MachineStateSchema {
     }
     Tutorial: {
       states: {
-        LoadNext: {}
         Level: {
           states: {
             Load: {}
@@ -86,6 +85,7 @@ export interface MachineStateSchema {
             TestFail: {}
             StepNext: {}
             LevelComplete: {}
+            LoadNext: {}
           }
         }
         Completed: {}

web-app/src/Routes.tsx

@@ -20,6 +20,7 @@ const Routes = () => {
     )
   }
 
+  console.log('RENDER')
   return (
     <Workspace>
       <Router>
@@ -37,10 +38,10 @@ const Routes = () => {
           <LoadingPage text="Configuring tutorial..." />
         </Route>
         {/* Tutorial */}
-        <Route path={['Tutorial.LoadNext', 'Tutorial.Level.Load']}>
+        <Route path={['Tutorial.Level.Load']}>
           <LoadingPage text="Loading Level..." processes={context.processes} />
         </Route>
-        <Route path="Tutorial.Level">
+        <Route path={['Tutorial.LoadNext', 'Tutorial.Level']}>
           <TutorialPage send={send} context={context} />
         </Route>
         {/* Completed */}

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

@@ -30,7 +30,7 @@ const useRouter = (): Output => {
     send(action)
   }
 
-  logger(`STATE: ${JSON.stringify(state.value)}`)
+  console.log(`STATE: ${JSON.stringify(state.value)}`)
 
   // event bus listener
   React.useEffect(() => {

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

@@ -26,8 +26,6 @@ interface Props {
 const Hints = (props: Props) => {
   const isFinalHint = props.hints.length - 1 === props.hintIndex
   const nextHint = () => {
-    console.log('hintIndex')
-    console.log(props.hintIndex)
     if (isFinalHint) {
       return
     }

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

@@ -99,8 +99,6 @@ interface Props {
   onRunTest(): void
   onLoadSolution(): void
   onOpenLogs(channel: string): void
-  displayHintsIndex: number[]
-  setHintsIndex(index: number, value: number): void
 }
 
 const Level = ({
@@ -115,14 +113,31 @@ const Level = ({
   onOpenLogs,
   processes,
   testStatus,
-  displayHintsIndex,
-  setHintsIndex,
 }: Props) => {
   const level = tutorial.levels[index]
 
   const [title, setTitle] = React.useState<string>(level.title)
   const [content, setContent] = React.useState<string>(level.content)
 
+  // hold state for hints for the level
+  const [displayHintsIndex, setDisplayHintsIndex] = React.useState<number[]>([])
+  const setHintsIndex = (index: number, value: number) => {
+    return setDisplayHintsIndex((displayHintsIndex) => {
+      const next = [...displayHintsIndex]
+      next[index] = value
+      return next
+    })
+  }
+  React.useEffect(() => {
+    console.log(position.levelId)
+    console.log(JSON.stringify(position))
+    // set the hints to empty on level starts
+    setDisplayHintsIndex(steps.map((s) => -1))
+    return () => {
+      console.log('LEVEL UNMOUNTED')
+    }
+  }, [position.levelId])
+
   const menu = (
     <ContentMenu
       tutorial={tutorial}

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

@@ -37,16 +37,6 @@ const TutorialPage = (props: PageProps) => {
 
   const levelIndex = tutorial.levels.findIndex((l: TT.Level) => l.id === position.levelId)
   const levelStatus = progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'
-  const { steps } = tutorial.levels[levelIndex]
-  const [displayHintsIndex, setDisplayHintsIndex] = React.useState<number[]>(steps.map((s) => -1))
-
-  const setHintsIndex = (index: number, value: number) => {
-    return setDisplayHintsIndex((displayHintsIndex) => {
-      const next = [...displayHintsIndex]
-      next[index] = value
-      return next
-    })
-  }
 
   return (
     <Level
@@ -61,8 +51,6 @@ const TutorialPage = (props: PageProps) => {
       onOpenLogs={onOpenLogs}
       processes={processes}
       testStatus={testStatus}
-      displayHintsIndex={displayHintsIndex}
-      setHintsIndex={setHintsIndex}
     />
   )
 }

web-app/src/services/state/machine.ts

@@ -142,21 +142,6 @@ export const createMachine = (options: any) => {
           id: 'tutorial',
           initial: 'Level',
           states: {
-            LoadNext: {
-              id: 'tutorial-load-next',
-              onEntry: ['loadNext'],
-              on: {
-                NEXT_STEP: {
-                  target: 'Level',
-                  actions: ['updatePosition'],
-                },
-                NEXT_LEVEL: {
-                  target: 'Level',
-                  actions: ['updatePosition'],
-                },
-                COMPLETED: '#completed-tutorial',
-              },
-            },
             Level: {
               initial: 'Load',
               states: {
@@ -228,11 +213,26 @@ export const createMachine = (options: any) => {
                   onExit: ['syncLevelProgress'],
                   on: {
                     NEXT_LEVEL: {
-                      target: '#tutorial-load-next',
+                      target: 'LoadNext',
                       actions: ['testClear', 'updatePosition'],
                     },
                   },
                 },
+                LoadNext: {
+                  id: 'tutorial-load-next',
+                  onEntry: ['loadNext'],
+                  on: {
+                    NEXT_STEP: {
+                      target: 'Load',
+                      actions: ['updatePosition'],
+                    },
+                    NEXT_LEVEL: {
+                      target: 'Load',
+                      actions: ['updatePosition'],
+                    },
+                    COMPLETED: '#completed-tutorial',
+                  },
+                },
               },
             },
             Completed: {