Merge pull request #390 from coderoad/feature/progress

Feature/progress

Author: ShMcK

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

@@ -0,0 +1,69 @@
+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' as 'column',
+    justifyContent: 'center' as 'center',
+    alignItems: 'center' as '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<'closed' | 'open'>('closed')
+
+  const onClose = () => {
+    setModalState('closed')
+  }
+
+  const onOpen = () => {
+    setModalState('open')
+  }
+
+  const onContinue = () => {
+    props.onContinue()
+    onClose()
+  }
+
+  return (
+    <>
+      <Button type="primary" size="medium" onClick={onOpen}>
+        Continue
+      </Button>
+      <Dialog
+        title="Level Complete!"
+        visible={modalState === 'open'}
+        onClose={onClose}
+        footer={false}
+        css={{ padding: '1rem' }}
+      >
+        <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>
+    </>
+  )
+}
+
+export default Continue

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

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { Progress, Icon } from '@alifd/next'
+
+interface Props {
+  current: number
+  max: number
+}
+
+const ProgressPie = (props: Props) => {
+  const [progress, setProgress] = React.useState(0)
+
+  React.useEffect(() => {
+    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={progressPercent}
+      shape="circle"
+      textRender={() => (progressPercent === 100 ? <Icon type="select" size="xl" /> : `${progressPercent}%`)}
+    />
+  )
+}
+
+export default ProgressPie

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

@@ -3,7 +3,7 @@ import { Dialog, Message } from '@alifd/next'
 import Button from '../../../components/Button'
 
 interface Props {
-  disabled: boolean
+  disabled?: boolean
   onReset(): void
 }
 

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,12 +155,17 @@ 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>
-          ) : (
-            <StepProgress current={stepIndex} max={level.steps.length} />
-          )}
+            <div css={{ marginRight: '0.5rem' }}>
+              <Continue
+                onContinue={onContinue}
+                current={levelIndex + 1}
+                max={levels.length}
+                title={tutorial.summary.title}
+              />
+            </div>
+          ) : level.steps.length > 1 ? (
+            <StepProgress current={stepIndex + 1} max={level.steps.length} />
+          ) : null}
         </div>
       </div>
       <SideMenu visible={menuVisible} toggleVisible={setMenuVisible} page={page} setPage={setPage} />

web-app/stories/Modals.stories.tsx

@@ -0,0 +1,16 @@
+import { action } from '@storybook/addon-actions'
+import { withKnobs } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+import SideBarDecorator from './utils/SideBarDecorator'
+import Reset from '../src/containers/Tutorial/components/Reset'
+import Continue from '../src/containers/Tutorial/components/Continue'
+
+storiesOf('Modals', module)
+  .addDecorator(SideBarDecorator)
+  .addDecorator(withKnobs)
+  .add('Reset', () => <Reset onReset={action('onReset')} />)
+  .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')} />
+  ))

web-app/stories/Tutorial.stories.tsx

@@ -3,16 +3,9 @@ import { withKnobs } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 import * as T from '../../typings'
-import * as TT from '../../typings/tutorial'
 import Tutorial from '../src/containers/Tutorial'
 import SideBarDecorator from './utils/SideBarDecorator'
 
-type ModifiedLevel = TT.Level & {
-  status: T.ProgressStatus
-  index: number
-  steps: Array<TT.Step & { status: T.ProgressStatus }>
-}
-
 const context: Partial<T.MachineContext> = {
   env: { machineId: '', sessionId: '', token: '' },
   error: null,
@@ -58,26 +51,6 @@ const context: Partial<T.MachineContext> = {
             },
             hints: ['First Hint', 'Second Hint'],
           },
-          {
-            id: '1.2',
-            content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
-            setup: {
-              commits: ['abcdefg'],
-            },
-            solution: {
-              commits: ['hijklmn'],
-            },
-          },
-          {
-            id: '1.3',
-            content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
-            setup: {
-              commits: ['abcdefg'],
-            },
-            solution: {
-              commits: ['hijklmn'],
-            },
-          },
         ],
       },
       {
@@ -168,4 +141,12 @@ const context: Partial<T.MachineContext> = {
 storiesOf('Tutorial', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
-  .add('Example', () => <Tutorial context={context} send={action('send')} />)
+  .add('1 step', () => {
+    const firstLevel = {
+      ...context,
+      position: { levelId: '1', stepId: '1.2' },
+      progress: { levels: {}, steps: {}, complete: false },
+    }
+    return <Tutorial context={firstLevel} send={action('send')} />
+  })
+  .add('3 step', () => <Tutorial context={context} send={action('send')} />)