only show review levels/steps in admin mode

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

Author: ShMcK

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

@@ -1,9 +1,10 @@
 import * as React from 'react'
 import * as T from 'typings'
-import { Switch } from '@alifd/next'
-import Steps from '../components/Steps'
+import Step from '../components/Step'
+import Hints from '../components/Hints'
 import Content from '../components/Content'
 import { Theme } from '../../../styles/theme'
+import AdminContext from '../../../services/admin/context'
 
 interface Props {
   levels: T.LevelUI[]
@@ -36,28 +37,52 @@ const styles = {
     fontSize: '70%',
   },
   levels: {},
+  steps: {
+    padding: '1rem 1rem',
+  },
 }
 
 const ReviewPage = (props: Props) => {
-  const [stepVisibility, setStepVisibility] = React.useState(true)
+  const { state: adminState } = React.useContext(AdminContext)
+  const show = (status: T.ProgressStatus): boolean => {
+    return adminState.adminMode || status !== 'INCOMPLETE'
+  }
   return (
     <div css={styles.container}>
       <div css={styles.header}>
         <div>Review</div>
-        <div css={styles.control}>
-          <span>Show steps&nbsp;</span>
-          <Switch checked={stepVisibility} onChange={(checked) => setStepVisibility(checked)} />
-        </div>
       </div>
 
       <div css={styles.levels}>
-        {props.levels.map((level: T.LevelUI, index: number) => (
-          <>
-            <Content title={level.title} content={level.content} />
-            {stepVisibility ? <Steps steps={level.steps} displayAll /> : null}
-            {index < props.levels.length - 1 ? <hr /> : null}
-          </>
-        ))}
+        {props.levels.map((level: T.LevelUI, index: number) =>
+          show(level.status) ? (
+            <div key={level.id}>
+              <Content title={level.title} content={level.content} />
+
+              <div css={styles.steps}>
+                {level.steps.map((step: T.StepUI) => {
+                  if (!step) {
+                    return null
+                  }
+                  return show(step.status) ? (
+                    <div key={step.id}>
+                      <Step
+                        key={step.id}
+                        status={step.status}
+                        displayAll={true}
+                        content={step.content}
+                        subtasks={step.subtasks}
+                      />
+                      <Hints hints={step.hints || []} />
+                    </div>
+                  ) : null
+                })}
+              </div>
+
+              {index < props.levels.length - 1 ? <hr /> : null}
+            </div>
+          ) : null,
+        )}
       </div>
     </div>
   )