refactor tutorial pages

ShMcK · ShMcK · commit 0ee5d29a8d20 · 2020-04-12T21:20:19.000-07:00
Signed-off-by: shmck &lt;shawn.j.mckay@gmail.com&gt;
diff --git a/web-app/src/Routes.tsx b/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">
diff --git a/web-app/src/components/Error/index.tsx b/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
   }
diff --git a/web-app/src/containers/Tutorial/Completed/index.tsx b/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: {
diff --git a/web-app/src/containers/Tutorial/Level/Step.tsx b/web-app/src/containers/Tutorial/Level/Step.tsx
diff --git a/web-app/src/containers/Tutorial/Level/index.tsx b/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 = () => {
diff --git a/web-app/src/containers/Tutorial/index.tsx b/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
diff --git a/web-app/stories/Completed.stories.tsx b/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)
diff --git a/web-app/stories/Level.stories.tsx b/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 & {
diff --git a/web-app/stories/Step.stories.tsx b/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 =

Original file line number	Diff line number	Diff line change
`@@ -37,13 +37,6 @@ interface Props {`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`const ErrorMarkdown = ({ error, send }: Props) => {`
`40`		`- React.useEffect(() => {`
`41`		`- if (error) {`
`42`		`- // log error`
`43`		- console.log(`ERROR in markdown: ${error.message}`)
`44`		`- }`
`45`		`- }, [error])`
`46`		`-`
`47`	`40`	`if (!error) {`
`48`	`41`	`return null`
`49`	`42`	`}`
Original file line number	Diff line number	Diff line change
`@@ -91,6 +91,8 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro`
`91`	`91`	`currentStep = level.steps.length`
`92`	`92`	`}`
`93`	`93`
	`94`	+ console.log(`currentStep: ${currentStep}`)
	`95`	`+`
`94`	`96`	`const pageBottomRef = React.useRef(null)`
`95`	`97`
`96`	`98`	`const scrollToBottom = () => {`