refactor StepProgress

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

Author: ShMcK

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

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { Progress } from '@alifd/next'
+
+const styles = {
+  progress: {
+    display: 'flex' as 'flex',
+    justifyContent: 'flex-end' as 'flex-end',
+    alignItems: 'center' as 'center',
+    width: '10rem',
+    color: 'white',
+  },
+  text: { color: 'white' },
+}
+
+interface Props {
+  current: number
+  max: number
+}
+
+const StepProgress = (props: Props) => {
+  const Text = (
+    <span style={styles.text}>
+      {props.current} of {props.max}
+    </span>
+  )
+  return (
+    <Progress
+      state="success"
+      progressive
+      percent={(props.current / props.max) * 100}
+      shape="line"
+      color="rgb(85, 132, 255)"
+      css={styles.progress}
+      textRender={() => {
+        return Text
+      }}
+    />
+  )
+}
+
+export default StepProgress

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

@@ -4,15 +4,15 @@ 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 Reset from './components/Reset'
 import ProcessMessages from '../../components/ProcessMessages'
 import TestMessage from '../../components/TestMessage'
-import { Progress } from '@alifd/next'
+import StepProgress from './components/StepProgress'
 import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
 import formatLevels from './formatLevels'
+// import SettingsPage from './containers/Settings'
+// import Reset from './components/Reset'
 
 const styles = {
   header: {
@@ -48,13 +48,6 @@ const styles = {
     right: 0,
     color: 'white',
   },
-  taskProgress: {
-    display: 'flex' as 'flex',
-    justifyContent: 'flex-end' as 'flex-end',
-    alignItems: 'center' as 'center',
-    width: '10rem',
-    color: 'white',
-  },
   processes: {
     padding: '0 1rem',
     position: 'fixed' as 'fixed',
@@ -165,21 +158,7 @@ const TutorialPage = (props: PageProps) => {
               Continue
             </Button>
           ) : (
-            <Progress
-              state="success"
-              progressive
-              percent={(stepIndex / level.steps.length) * 100}
-              shape="line"
-              color="rgb(85, 132, 255)"
-              css={styles.taskProgress}
-              textRender={() => {
-                return (
-                  <span style={{ color: 'white' }}>
-                    {stepIndex} of {level.steps.length}
-                  </span>
-                )
-              }}
-            />
+            <StepProgress current={stepIndex} max={level.steps.length} />
           )}
         </div>
       </div>