progress indicator continue

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

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

@@ -1,40 +1,65 @@
 import * as React from 'react'
 import { Dialog } from '@alifd/next'
+import { css, jsx } from '@emotion/core'
 import Button from '../../../components/Button'
 import ProgressPie from './ProgressPie'
 
+const styles = {
+  content: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  message: {
+    textAlign: 'center' as 'center',
+  },
+}
+
 interface Props {
+  title: string
+  current: number // level index
+  max: number // level count
   onContinue(): void
 }
 
 const Continue = (props: Props) => {
-  const [modalState, setModalState] = React.useState<'none' | 'continue'>('none')
+  const [modalState, setModalState] = React.useState<'closed' | 'open'>('closed')
 
   const onClose = () => {
-    setModalState('none')
+    setModalState('closed')
+  }
+
+  const onOpen = () => {
+    setModalState('open')
   }
 
-  const onOk = () => {
-    setModalState('continue')
+  const onContinue = () => {
     props.onContinue()
-    return setTimeout(() => {
-      setModalState('none')
-    }, 3000)
+    onClose()
   }
 
   return (
     <>
-      <Button type="primary" size="medium" onClick={() => setModalState('continue')}>
+      <Button type="primary" size="medium" onClick={onOpen}>
         Continue
       </Button>
       <Dialog
-        visible={modalState === 'continue'}
-        onOk={onOk}
-        onCancel={onClose}
+        title="Level Complete!"
+        visible={modalState === 'open'}
         onClose={onClose}
-        footerActions={['ok']}
+        footer={false}
+        css={{ padding: '1rem' }}
       >
-        <ProgressPie />
+        <div css={styles.content}>
+          <ProgressPie current={props.current} max={props.max} />
+          <div css={styles.message}>
+            <h3>{props.title}</h3>
+            <br />
+            <Button type="primary" size="large" onClick={onContinue}>
+              Continue
+            </Button>
+          </div>
+        </div>
       </Dialog>
     </>
   )

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

@@ -1,24 +1,35 @@
 import * as React from 'react'
 import { Progress, Icon } from '@alifd/next'
 
-const ProgressPie = () => {
+interface Props {
+  current: number
+  max: number
+}
+
+const ProgressPie = (props: Props) => {
   const [progress, setProgress] = React.useState(0)
 
   React.useEffect(() => {
-    if (progress < 100) {
-      const intervals = [10, 20]
-      const randomInteval = intervals[Math.floor(Math.random() * intervals.length)]
-      setTimeout(() => {
-        setProgress(progress + randomInteval)
-      }, 200)
+    let timeout: any
+    if (progress < props.current) {
+      timeout = setTimeout(() => {
+        setProgress(progress + 1)
+      }, 100)
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout)
+      }
     }
   }, [progress])
 
+  const progressPercent = Math.floor((progress / props.max) * 100)
+
   return (
     <Progress
-      percent={progress}
+      percent={progressPercent}
       shape="circle"
-      textRender={() => (progress === 100 ? <Icon type="select" size="xl" /> : null)}
+      textRender={() => (progressPercent === 100 ? <Icon type="select" size="xl" /> : `${progressPercent}%`)}
     />
   )
 }

web-app/src/containers/Tutorial/formatLevels.ts

@@ -11,6 +11,7 @@ interface Input {
 type Output = {
   level: T.LevelUI
   levels: T.LevelUI[]
+  levelIndex: number
   stepIndex: number
 }
 
@@ -89,7 +90,7 @@ const formatLevels = ({ progress, position, levels, testStatus }: Input): Output
   if (stepIndex === -1) {
     stepIndex = levels[levelIndex].steps.length
   }
-  return { level: levelUI, levels: levelsUI, stepIndex }
+  return { level: levelUI, levels: levelsUI, levelIndex, stepIndex }
 }
 
 export default formatLevels

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

@@ -13,6 +13,7 @@ import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
 import formatLevels from './formatLevels'
 // import SettingsPage from './containers/Settings'
 import Reset from './components/Reset'
+import Continue from './components/Continue'
 
 const styles = {
   header: {
@@ -103,7 +104,7 @@ const TutorialPage = (props: PageProps) => {
   const [page, setPage] = React.useState<'level' | 'settings' | 'review'>('level')
 
   // format level code with status for easy rendering
-  const { level, levels, stepIndex } = formatLevels({
+  const { level, levels, levelIndex, stepIndex } = formatLevels({
     progress,
     position,
     levels: tutorial.levels,
@@ -154,9 +155,12 @@ const TutorialPage = (props: PageProps) => {
         {/* Right */}
         <div css={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
           {level.status === 'COMPLETE' || !level.steps.length ? (
-            <Button style={{ marginRight: '1rem' }} type="primary" onClick={onContinue}>
-              Continue
-            </Button>
+            <Continue
+              onContinue={onContinue}
+              current={levelIndex + 1}
+              max={level.steps.length}
+              title={tutorial.summary.title}
+            />
           ) : (
             <StepProgress current={stepIndex} max={level.steps.length} />
           )}

web-app/stories/Modals.stories.tsx

@@ -10,4 +10,7 @@ storiesOf('Modals', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Reset', () => <Reset onReset={action('onReset')} />)
-  .add('Continue', () => <Continue onContinue={action('onContinue')} />)
+  .add('Continue', () => <Continue title="Tutorial Title" current={9} max={11} onContinue={action('onContinue')} />)
+  .add('Continue Complete', () => (
+    <Continue title="Tutorial Title" current={11} max={11} onContinue={action('onContinue')} />
+  ))