add review ui

Signed-off-by: shmck <[email protected]>

Author: ShMcK

Diff for: web-app/src/containers/Tutorial/components/Reset.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { Dialog } from '@alifd/next'
+import Button from '../../../components/Button'
+
+interface Props {
+  onReset(): void
+}
+
+const Reset = (props: Props) => {
+  const [modalState, setModalState] = React.useState<'none' | 'confirm' | 'progress'>('none')
+
+  const onClose = () => {
+    setModalState('none')
+  }
+
+  const onOk = () => {
+    setModalState('progress')
+    props.onReset()
+    return setTimeout(() => {
+      setModalState('none')
+    }, 3000)
+  }
+
+  return (
+    <>
+      <Button type="secondary" onClick={() => setModalState('confirm')}>
+        Reset
+      </Button>
+      {/* TODO improve reset message */}
+      <Dialog
+        title="Reset"
+        visible={modalState === 'confirm'}
+        onOk={onOk}
+        onCancel={onClose}
+        onClose={onClose}
+        footerActions={['ok', 'cancel']}
+      >
+        Are you sure?
+      </Dialog>
+      <Dialog
+        title="Resetting..."
+        visible={modalState === 'progress'}
+        footer={false}
+        onClose={onClose}
+        closeable={false}
+      >
+        Reverting progress to an earlier commit...
+      </Dialog>
+    </>
+  )
+}
+
+export default Reset

Diff for: web-app/src/containers/Tutorial/index.tsx

@@ -4,9 +4,10 @@ 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 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'
@@ -100,6 +101,10 @@ const TutorialPage = (props: PageProps) => {
     props.send({ type: 'RUN_TEST' })
   }
 
+  const onReset = (): void => {
+    // TODO
+  }
+
   const [menuVisible, setMenuVisible] = React.useState(false)
 
   const [page, setPage] = React.useState<'level' | 'settings' | 'review'>('level')
@@ -149,7 +154,9 @@ const TutorialPage = (props: PageProps) => {
         )}
 
         {/* Center */}
-        <div />
+        <div>
+          <Reset onReset={onReset} />
+        </div>
 
         {/* Right */}
         <div>

Diff for: web-app/stories/Review.stories.tsx

@@ -142,16 +142,5 @@ storiesOf('Review', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Example', () => {
-    const progress = {
-      levels: {
-        '1': true,
-      },
-      steps: {
-        '1.1': true,
-        '1.2': true,
-        '1.3': true,
-        '2.1': true,
-      },
-    }
-    return <Review levels={levels} progress={progress} />
+    return <Review levels={levels} />
   })