fix router edge case

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

web-app/src/Routes.tsx

@@ -8,6 +8,10 @@ import SelectTutorialPage from './containers/SelectTutorial'
 import CompletedPage from './containers/Tutorial/CompletedPage'
 import TutorialPage from './containers/Tutorial'
 
+/*
+ * NOTE: due to a lack of URLs and a dependency on xstate
+ * we have to implement a custom router here
+ */
 const Routes = () => {
   const { context, route, send } = useStateMachine()
 
@@ -35,7 +39,7 @@ const Routes = () => {
       <Route paths={{ Tutorial: { Level: { Load: true } } }}>
         <LoadingPage text="Loading Level..." processes={context.processes} />
       </Route>
-      <Route paths={{ Tutorial: { LoadNext: true, Level: true } }}>
+      <Route paths={{ Tutorial: { Level: true } }}>
         <TutorialPage send={send} context={context} />
       </Route>
       {/* Completed */}

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

@@ -15,6 +15,10 @@ const matches = (route: string, paths: object): boolean => {
   for (const key of keys) {
     const next = current[key]
     if (next) {
+      // exit early if property value is true
+      if (next === true) {
+        return true
+      }
       current = next
       continue
     } else {