refactor tutorial pages

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

web-app/src/Routes.tsx

@@ -5,8 +5,8 @@ import ErrorView from './components/Error'
 import LoadingPage from './containers/Loading'
 import StartPage from './containers/Start'
 import SelectTutorialPage from './containers/SelectTutorial'
-import CompletedPage from './containers/Tutorial/CompletedPage'
-import LevelSummaryPage from './containers/Tutorial/LevelPage'
+import CompletedPage from './containers/Tutorial/Completed'
+import TutorialPage from './containers/Tutorial'
 
 const Routes = () => {
   const { context, send, Router, Route } = useRouter()
@@ -44,7 +44,7 @@ const Routes = () => {
           <LoadingPage text="Loading Level..." />
         </Route>
         <Route path="Tutorial.Level">
-          <LevelSummaryPage send={send} context={context} />
+          <TutorialPage send={send} context={context} />
         </Route>
         {/* Completed */}
         <Route path="Tutorial.Completed">

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

@@ -37,13 +37,6 @@ interface Props {
 }
 
 const ErrorMarkdown = ({ error, send }: Props) => {
-  React.useEffect(() => {
-    if (error) {
-      // log error
-      console.log(`ERROR in markdown: ${error.message}`)
-    }
-  }, [error])
-
   if (!error) {
     return null
   }

web-app/src/containers/Tutorial/CompletedPage.tsx → web-app/src/containers/Tutorial/Completed/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
-import Button from '../../components/Button'
+import Button from '../../../components/Button'
 
 const styles = {
   page: {

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

@@ -91,6 +91,8 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
     currentStep = level.steps.length
   }
 
+  console.log(`currentStep: ${currentStep}`)
+
   const pageBottomRef = React.useRef(null)
 
   const scrollToBottom = () => {

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

@@ -1,21 +1,22 @@
 import * as React from 'react'
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
-import * as selectors from '../../../services/selectors'
+import * as selectors from '../../services/selectors'
 import Level from './Level'
 
 interface PageProps {
   context: T.MachineContext
   send(action: T.Action): void
 }
 
-const LevelSummaryPageContainer = (props: PageProps) => {
+const TutorialPage = (props: PageProps) => {
   const { position, progress, processes, testStatus } = props.context
 
   const tutorial = selectors.currentTutorial(props.context)
   const levelData: TT.Level = selectors.currentLevel(props.context)
 
   const onContinue = (): void => {
+    console.log('onContinue triggered')
     props.send({
       type: 'LEVEL_NEXT',
       payload: {
@@ -59,4 +60,4 @@ const LevelSummaryPageContainer = (props: PageProps) => {
   )
 }
 
-export default LevelSummaryPageContainer
+export default TutorialPage

web-app/stories/Completed.stories.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import CompletedPage from '../src/containers/Tutorial/CompletedPage'
+import CompletedPage from '../src/containers/Tutorial/Completed'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 storiesOf('Completed', module)

web-app/stories/Level.stories.tsx

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react'
 import React from 'react'
 import * as T from '../../typings'
 import * as TT from '../../typings/tutorial'
-import Level from '../src/containers/Tutorial/LevelPage/Level'
+import Level from '../src/containers/Tutorial/Level'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 type ModifiedLevel = TT.Level & {

web-app/stories/Step.stories.tsx

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions'
 import { select, text, withKnobs } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import Step from '../src/containers/Tutorial/LevelPage/Step'
+import Step from '../src/containers/Tutorial/Level/Step'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 const stepText =