refactor level

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

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

@@ -2,12 +2,8 @@ import * as React from 'react'
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
 import { css, jsx } from '@emotion/core'
-import Button from '../../../components/Button'
 import Markdown from '../../../components/Markdown'
-import ProcessMessages from '../../../components/ProcessMessages'
-import TestMessage from '../../../components/TestMessage'
 import Step from './Step'
-import { DISPLAY_RUN_TEST_BUTTON } from '../../../environment'
 
 const styles = {
   page: {
@@ -40,46 +36,11 @@ const styles = {
     fontWeight: 'bold' as 'bold',
     lineHeight: '1.2rem',
   },
-  processes: {
-    padding: '0 1rem',
-    position: 'fixed' as 'fixed',
-    bottom: '2rem',
-    left: 0,
-    right: 0,
-    top: 'auto',
-  },
-  testMessage: {
-    position: 'absolute' as 'absolute',
-    top: 'auto',
-    bottom: '2rem',
-    left: '5px',
-    right: '5px',
-  },
-  footer: {
-    display: 'flex' as 'flex',
-    flexDirection: 'row' as 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    height: '2rem',
-    backgroundColor: 'black',
-    fontSize: '1rem',
-    lineHeight: '1rem',
-    padding: '10px 1rem',
-    position: 'fixed' as 'fixed',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    color: 'white',
-  },
-  taskCount: {
-    fontSize: '0.8rem',
-    opacity: 0.9,
-  },
 }
 
 interface Props {
-  tutorial: Exclude<TT.Tutorial, 'config'>
-  index: number
+  level: TT.Level
+  currentStep: number
   status: 'COMPLETE' | 'ACTIVE' | 'INCOMPLETE'
   progress: T.Progress
   position: T.Position
@@ -91,21 +52,7 @@ interface Props {
   onOpenLogs(channel: string): void
 }
 
-const Level = ({
-  tutorial,
-  index,
-  status,
-  progress,
-  position,
-  onContinue,
-  onRunTest,
-  onLoadSolution,
-  onOpenLogs,
-  processes,
-  testStatus,
-}: Props) => {
-  const level: TT.Level = tutorial.levels[index]
-
+const Level = ({ level, progress, position, onLoadSolution, currentStep, testStatus }: Props) => {
   // hold state for hints for the level
   const [displayHintsIndex, setDisplayHintsIndex] = React.useState<number[]>([])
   const setHintsIndex = (index: number, value: number) => {
@@ -117,10 +64,10 @@ const Level = ({
   }
   React.useEffect(() => {
     // set the hints to empty on level starts
-    setDisplayHintsIndex(steps.map((s) => -1))
+    setDisplayHintsIndex(level.steps.map((s: TT.Step) => -1))
   }, [position.levelId])
 
-  const steps: Array<TT.Step & { status: T.ProgressStatus }> = level.steps.map((step: TT.Step) => {
+  const steps: TT.Step[] = level.steps.map((step: TT.Step) => {
     // label step status for step component
     let status: T.ProgressStatus = 'INCOMPLETE'
     if (progress.steps[step.id]) {
@@ -132,10 +79,6 @@ const Level = ({
   })
 
   // current
-  let currentStep = steps.findIndex((s) => s.status === 'ACTIVE')
-  if (currentStep === -1) {
-    currentStep = steps.length
-  }
 
   const pageBottomRef = React.useRef(null)
   const scrollToBottom = () => {
@@ -159,7 +102,7 @@ const Level = ({
         {steps.length ? (
           <div css={styles.tasks}>
             <div css={styles.steps}>
-              {steps.map((step: (TT.Step & { status: T.ProgressStatus }) | null, stepIndex: number) => {
+              {steps.map((step: TT.Step | null, stepIndex: number) => {
                 if (!step) {
                   return null
                 }
@@ -173,8 +116,7 @@ const Level = ({
                 return (
                   <Step
                     key={step.id}
-                    index={index}
-                    status={step.status}
+                    status={step.status || 'INCOMPLETE'}
                     content={step.content}
                     onLoadSolution={onLoadSolution}
                     subtasks={subtasks}
@@ -189,38 +131,6 @@ const Level = ({
         ) : null}
 
         <div ref={pageBottomRef} />
-
-        <div css={styles.footer}>
-          {/* Process Modal */}
-          {processes.length > 0 && (
-            <div css={styles.processes}>
-              <ProcessMessages processes={processes} />
-            </div>
-          )}
-          {/* Test Fail Modal */}
-          {testStatus && testStatus.type === 'warning' && (
-            <div css={styles.testMessage}>
-              <TestMessage message={testStatus.title} />
-            </div>
-          )}
-
-          {DISPLAY_RUN_TEST_BUTTON && status !== 'COMPLETE' ? (
-            <Button type="primary" onClick={onRunTest} disabled={processes.length > 0}>
-              Run
-            </Button>
-          ) : null}
-          <span>
-            {status === 'COMPLETE' || !steps.length ? (
-              <Button type="primary" onClick={onContinue}>
-                Continue
-              </Button>
-            ) : (
-              <span css={styles.taskCount}>
-                {currentStep} of {steps.length} tasks
-              </span>
-            )}
-          </span>
-        </div>
       </div>
     </div>
   )

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

@@ -19,6 +19,8 @@ const styles = {
 interface Props {
   visible: boolean
   toggleVisible(visible: boolean): void
+  page: 'level' | 'settings' | 'review'
+  setPage(page: 'level' | 'settings' | 'review'): void
 }
 
 const SideMenu = (props: Props) => {
@@ -35,17 +37,16 @@ const SideMenu = (props: Props) => {
       onClose={onMenuClose}
     >
       <Menu style={styles.menu} defaultOpenKeys="sub-menu">
-        <Item disabled key="1">
+        <Item key="level" disabled={props.page === 'level'} onClick={() => props.setPage('level')}>
+          <Icon type="detail" size="small" color="#EBEBEB" />
+          <span style={styles.itemText}>Level</span>
+        </Item>
+        <Item key="review" disabled={props.page === 'review'} onClick={() => props.setPage('review')}>
           <Icon type="list" size="small" color="#EBEBEB" />
           <span style={styles.itemText}>Review</span>
         </Item>
-        {/* <Divider key="divider" />
-        <Item disabled key="2">
-          <Icon type="help" size="small" color="#EBEBEB" />
-          <span style={styles.itemText}>Help</span>
-        </Item> */}
         <Divider key="divider" />
-        <Item disabled key="3">
+        <Item key="settings" disabled={props.page === 'settings'} onClick={() => props.setPage('review')}>
           <Icon type="set" size="small" color="#EBEBEB" />
           <span style={styles.itemText}>Settings</span>
         </Item>

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

@@ -2,12 +2,10 @@ import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
 import TestStatusIcon from './TestStatusIcon'
-import Icon from '../../../components/Icon'
 import Hints from './Hints'
 import Markdown from '../../../components/Markdown'
 
 interface Props {
-  index: number
   content: string
   status: T.ProgressStatus
   subtasks: { name: string; pass: boolean }[] | null
@@ -76,7 +74,6 @@ const Step = (props: Props) => {
                 return (
                   <li key={subtask.name} css={styles.subtask}>
                     <TestStatusIcon size="xs" status={subtaskStatus} />
-
                     <span style={{ marginLeft: '0.5rem' }}>{subtask.name}</span>
                   </li>
                 )

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

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+const styles = {
+  container: {
+    padding: '1rem',
+  },
+}
+
+const ReviewPage = () => {
+  return <div css={styles.container}>Review Coming soon...</div>
+}
+
+export default ReviewPage

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

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+const styles = {
+  container: {
+    padding: '1rem',
+  },
+}
+
+const SettingsPage = () => {
+  return <div css={styles.container}>Settings coming soon...</div>
+}
+
+export default SettingsPage

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

@@ -5,6 +5,12 @@ import * as selectors from '../../services/selectors'
 import SideMenu from './components/SideMenu'
 import Level from './components/Level'
 import Icon from '../../components/Icon'
+import SettingsPage from './containers/Settings'
+import ReviewPage from './containers/Review'
+import Button from '../../components/Button'
+import ProcessMessages from '../../components/ProcessMessages'
+import TestMessage from '../../components/TestMessage'
+import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
 
 const styles = {
   header: {
@@ -24,6 +30,41 @@ const styles = {
     textDecoration: 'none',
     color: 'inherit',
   },
+  footer: {
+    display: 'flex' as 'flex',
+    flexDirection: 'row' as 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '2rem',
+    backgroundColor: 'black',
+    fontSize: '1rem',
+    lineHeight: '1rem',
+    padding: '10px 1rem',
+    position: 'fixed' as 'fixed',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    color: 'white',
+  },
+  taskCount: {
+    fontSize: '0.8rem',
+    opacity: 0.9,
+  },
+  processes: {
+    padding: '0 1rem',
+    position: 'fixed' as 'fixed',
+    bottom: '2rem',
+    left: 0,
+    right: 0,
+    top: 'auto',
+  },
+  testMessage: {
+    position: 'absolute' as 'absolute',
+    top: 'auto',
+    bottom: '2rem',
+    left: '5px',
+    right: '5px',
+  },
 }
 
 interface PageProps {
@@ -59,30 +100,76 @@ 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 level: TT.Level = tutorial.levels[levelIndex]
   const [menuVisible, setMenuVisible] = React.useState(false)
 
+  const [page, setPage] = React.useState<'level' | 'settings' | 'review'>('level')
+
+  let currentStep = level.steps.findIndex((s: TT.Step) => s.status === 'ACTIVE')
+  if (currentStep === -1) {
+    currentStep = level.steps.length
+  }
+
   return (
     <div>
-      <div css={styles.header}>
-        <a onClick={() => setMenuVisible(!menuVisible)}>
-          <Icon type="toggle-left" size="small" />
-        </a>
-        <span css={styles.title}>{tutorial.summary.title}</span>
+      <div>
+        <div css={styles.header}>
+          <a onClick={() => setMenuVisible(!menuVisible)}>
+            <Icon type="toggle-left" size="small" />
+          </a>
+          <span css={styles.title}>{tutorial.summary.title}</span>
+        </div>
+
+        {page === 'level' && (
+          <Level
+            level={level}
+            currentStep={currentStep}
+            status={levelStatus}
+            progress={progress}
+            position={position}
+            onContinue={onContinue}
+            onRunTest={onRunTest}
+            onLoadSolution={onLoadSolution}
+            onOpenLogs={onOpenLogs}
+            processes={processes}
+            testStatus={testStatus}
+          />
+        )}
+        {page === 'settings' && <SettingsPage />}
+        {page === 'review' && <ReviewPage />}
+      </div>
+      <div css={styles.footer}>
+        {/* Process Modal */}
+        {processes.length > 0 && (
+          <div css={styles.processes}>
+            <ProcessMessages processes={processes} />
+          </div>
+        )}
+        {/* Test Fail Modal */}
+        {testStatus && testStatus.type === 'warning' && (
+          <div css={styles.testMessage}>
+            <TestMessage message={testStatus.title} />
+          </div>
+        )}
+
+        {DISPLAY_RUN_TEST_BUTTON && levelStatus !== 'COMPLETE' ? (
+          <Button type="primary" onClick={onRunTest} disabled={processes.length > 0}>
+            Run
+          </Button>
+        ) : null}
+        <span>
+          {levelStatus === 'COMPLETE' || !level.steps.length ? (
+            <Button type="primary" onClick={onContinue}>
+              Continue
+            </Button>
+          ) : (
+            <span css={styles.taskCount}>
+              {currentStep} of {level.steps.length} tasks
+            </span>
+          )}
+        </span>
       </div>
-      <Level
-        tutorial={tutorial}
-        index={levelIndex}
-        status={levelStatus}
-        progress={progress}
-        position={position}
-        onContinue={onContinue}
-        onRunTest={onRunTest}
-        onLoadSolution={onLoadSolution}
-        onOpenLogs={onOpenLogs}
-        processes={processes}
-        testStatus={testStatus}
-      />
-      <SideMenu visible={menuVisible} toggleVisible={setMenuVisible} />
+      <SideMenu visible={menuVisible} toggleVisible={setMenuVisible} page={page} setPage={setPage} />
     </div>
   )
 }