add completed banner

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

web-app/src/Routes.tsx

@@ -5,7 +5,6 @@ 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 TutorialPage from './containers/Tutorial'
 
 /*
@@ -39,12 +38,8 @@ const Routes = () => {
       <Route paths={{ Tutorial: { Level: { Load: true } } }}>
         <LoadingPage text="Loading Level..." processes={context.processes} />
       </Route>
-      <Route paths={{ Tutorial: { Level: true } }}>
-        <TutorialPage send={send} context={context} state={route.replace('Tutorial.Level.', '')} />
-      </Route>
-      {/* Completed */}
-      <Route paths={{ Tutorial: { Completed: true } }}>
-        <CompletedPage context={context} />
+      <Route paths={{ Tutorial: { Level: true, Completed: true } }}>
+        <TutorialPage send={send} context={context} state={route.replace('Tutorial.', '')} />
       </Route>
     </Router>
   )

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

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { css, jsx } from '@emotion/core'
+import { Icon } from '@alifd/next'
+
+const styles = {
+  banner: {
+    height: 'auto',
+    width: '100%',
+    backgroundColor: 'rgb(85, 132, 255)',
+    color: 'white',
+    padding: '0.5rem',
+  },
+  header: {
+    position: 'relative' as 'relative',
+    width: '100%',
+  },
+  headerMessage: {
+    marginLeft: '0.5rem',
+  },
+  // close: {
+  //   position: 'absolute' as 'absolute',
+  //   right: '0.5rem',
+  //   top: '0.5rem',
+  //   padding: '2px',
+  // },
+  section: {
+    padding: '0rem 0.5rem 1rem 0.5rem',
+  },
+}
+
+interface Props {
+  title: string
+}
+
+const CompletedBanner = (props: Props) => {
+  return (
+    <div css={styles.banner}>
+      <div css={styles.header}>
+        {/* <div css={styles.close} onClick={() => setOpen(false)}>
+          <Icon type="close" size="xs" />
+        </div> */}
+        <h3>
+          <Icon type="success-filling" size="large" />
+          <span css={styles.headerMessage}>Congratulations on completing "{props.title}"!</span>
+        </h3>
+      </div>
+      <div css={styles.section}>
+        <h5>You've reached the end of the road...</h5>
+        <p>To go down another path:</p>
+        <ul>
+          <li>- open a new VSCode workspace</li>
+          <li>- relaunch the CodeRoad app</li>
+          <li>- select a new tutorial</li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default CompletedBanner

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

@@ -44,7 +44,7 @@ For learners, there are a number of advantages to running tutorials inside VSCod
 
 a. Learn in a real world coding environment
 b. Get rapid feedback on save and helpful error messages
-c. Users own the code, and can build a Git timeline and deploy a portfolio
+c.Users own the code, and can build a Git timeline and deploy a portfolio
 
 ##### Subscribe
 

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

@@ -10,6 +10,8 @@ interface Props {
 
 const styles = {
   container: {
+    height: 'auto',
+    width: '100%',
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
   },

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

@@ -15,6 +15,7 @@ import formatLevels from './formatLevels'
 import Reset from './components/Reset'
 import Continue from './components/Continue'
 import ScrollContent from './components/ScrollContent'
+import CompletedBanner from './components/CompletedBanner'
 
 const styles = {
   page: {
@@ -54,6 +55,13 @@ const styles = {
     color: 'white',
     zIndex: 1000,
   },
+  completeFooter: {
+    position: 'fixed' as 'fixed',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1000,
+  },
   processes: {
     padding: '0 1rem',
     position: 'fixed' as 'fixed',
@@ -74,7 +82,7 @@ const styles = {
 interface PageProps {
   context: T.MachineContext
   send(action: T.Action): void
-  state: string // 'Normal' | 'TestRunning' | 'TestFail' | 'TestPass' | 'LevelComplete'
+  state: string // 'Normal' | 'TestRunning' | 'TestFail' | 'TestPass' | 'Level.LevelComplete'
 }
 
 /**
@@ -114,7 +122,9 @@ const TutorialPage = (props: PageProps) => {
     testStatus,
   })
 
-  const disableOptions = processes.length > 0 || props.state === 'TestRunning'
+  const disableOptions = processes.length > 0 || props.state === 'Level.TestRunning'
+
+  console.log(`STATE: ${props.state}`)
 
   return (
     <div>
@@ -134,62 +144,70 @@ const TutorialPage = (props: PageProps) => {
           </ScrollContent>
         )}
         {page === 'review' && <ReviewPage levels={levels} />}
+
         {/* {page === 'settings' && <SettingsPage />} */}
       </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>
-        )}
-        {/* Left */}
-        <div css={{ flex: 1 }}>
-          {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
-            <Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={disableOptions}>
-              Run
-            </Button>
-          ) : null}
-        </div>
 
-        {/* Center */}
-        <div css={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
-          <Reset onReset={onReset} disabled={disableOptions || props.state === 'LevelComplete'} />
+      {props.state === 'Completed' ? (
+        <div css={styles.completeFooter}>
+          <CompletedBanner title={tutorial.summary.title || 'Unknown'} />
         </div>
-
-        {/* Right */}
-        <div css={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
-          {!level.steps.length ? (
-            <div css={{ marginRight: '0.5rem' }}>
-              <Continue
-                onContinue={onContinue}
-                current={levelIndex + 1}
-                max={levels.length}
-                title={tutorial.summary.title}
-                defaultOpen={false}
-              />
+      ) : (
+        <div css={styles.footer}>
+          {/* Process Modal */}
+          {processes.length > 0 && (
+            <div css={styles.processes}>
+              <ProcessMessages processes={processes} />
             </div>
-          ) : props.state === 'LevelComplete' ? (
-            <div css={{ marginRight: '0.5rem' }}>
-              <Continue
-                onContinue={onContinue}
-                current={levelIndex + 1}
-                max={levels.length}
-                title={tutorial.summary.title}
-                defaultOpen={true}
-              />
+          )}
+          {/* Test Fail Modal */}
+          {testStatus && testStatus.type === 'warning' && (
+            <div css={styles.testMessage}>
+              <TestMessage message={testStatus.title} />
             </div>
-          ) : level.steps.length > 1 ? (
-            <StepProgress current={stepIndex + 1} max={level.steps.length} />
-          ) : null}
+          )}
+          {/* Left */}
+          <div css={{ flex: 1 }}>
+            {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
+              <Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={disableOptions}>
+                Run
+              </Button>
+            ) : null}
+          </div>
+
+          {/* Center */}
+          <div css={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
+            <Reset onReset={onReset} disabled={disableOptions || props.state === 'Level.LevelComplete'} />
+          </div>
+
+          {/* Right */}
+          <div css={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
+            {!level.steps.length ? (
+              <div css={{ marginRight: '0.5rem' }}>
+                <Continue
+                  onContinue={onContinue}
+                  current={levelIndex + 1}
+                  max={levels.length}
+                  title={tutorial.summary.title}
+                  defaultOpen={false}
+                />
+              </div>
+            ) : props.state === 'Level.LevelComplete' ? (
+              <div css={{ marginRight: '0.5rem' }}>
+                <Continue
+                  onContinue={onContinue}
+                  current={levelIndex + 1}
+                  max={levels.length}
+                  title={tutorial.summary.title}
+                  defaultOpen={true}
+                />
+              </div>
+            ) : level.steps.length > 1 ? (
+              <StepProgress current={stepIndex + 1} max={level.steps.length} />
+            ) : null}
+          </div>
         </div>
-      </div>
+      )}
       <SideMenu visible={menuVisible} toggleVisible={setMenuVisible} page={page} setPage={setPage} />
     </div>
   )

web-app/stories/Completed.stories.tsx

@@ -1,9 +1,8 @@
-import { action } from '@storybook/addon-actions'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import CompletedPage from '../src/containers/Tutorial/CompletedPage'
+import CompletedBanner from '../src/containers/Tutorial/components/CompletedBanner'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 storiesOf('Completed', module)
   .addDecorator(SideBarDecorator)
-  .add('Page', () => <CompletedPage context={{}} />)
+  .add('Page', () => <CompletedBanner title="A tutorial name" />)

web-app/stories/Tutorial.stories.tsx

@@ -146,29 +146,37 @@ storiesOf('Tutorial', module)
       position: { levelId: '1', stepId: '1.2' },
       progress: { levels: {}, steps: {}, complete: false },
     }
-    return <Tutorial state="Normal" context={firstLevel} send={action('send')} />
+    return <Tutorial state="Level.Normal" context={firstLevel} send={action('send')} />
   })
   .add('1.3 Level Complete', () => {
     const levelComplete = {
       ...context,
       position: { levelId: '1', stepId: '1.2' },
       progress: { levels: {}, steps: { '1.1': true }, complete: false },
     }
-    return <Tutorial state="LevelComplete" context={levelComplete} send={action('send')} />
+    return <Tutorial state="Level.LevelComplete" context={levelComplete} send={action('send')} />
   })
   .add('3.1 Level Start', () => {
     const newLevel = {
       ...context,
       position: { levelId: '1', stepId: '1.2' },
       progress: { levels: { '1': true, '2': true }, steps: {}, complete: false },
     }
-    return <Tutorial state="Normal" context={newLevel} send={action('send')} />
+    return <Tutorial state="Level.Normal" context={newLevel} send={action('send')} />
   })
   .add('3.3 Final', () => {
     const lastLevel = {
       ...context,
       position: { levelId: '3', stepId: '3.3' },
       progress: { levels: { '3': true }, steps: { '3.3': true }, complete: true },
     }
-    return <Tutorial state="LevelComplete" context={lastLevel} send={action('send')} />
+    return <Tutorial state="Level.LevelComplete" context={lastLevel} send={action('send')} />
+  })
+  .add('3.3 Completed', () => {
+    const lastLevel = {
+      ...context,
+      position: { levelId: '3', stepId: '3.3' },
+      progress: { levels: { '3': true }, steps: { '3.3': true }, complete: true },
+    }
+    return <Tutorial state="Completed" context={lastLevel} send={action('send')} />
   })