outline hints component

ShMcK · ShMcK · commit f4f6e1cae380 · 2020-06-14T20:20:02.000-07:00
Signed-off-by: shmck &lt;shawn.j.mckay@gmail.com&gt;
diff --git a/web-app/src/containers/Tutorial/components/Hints.tsx b/web-app/src/containers/Tutorial/components/Hints.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react'
+import Button from '../../../components/Button'
+
+interface Props {
+  hints: string[]
+}
+
+const Hints = (props: Props) => {
+  const [hintIndex, setHintIndex] = React.useState(0)
+  const isFinalHint = props.hints.length - 1 === hintIndex
+  console.log(hintIndex)
+  const nextHint = () => {
+    console.log(hintIndex)
+    if (!isFinalHint) {
+      setHintIndex((currentHintIndex) => currentHintIndex + 1)
+    }
+  }
+  return (
+    <div>
+      {props.hints.map((h, i) => {
+        return i <= hintIndex ? (
+          <div key={i} style={{ backgroundColor: 'red' }}>
+            {h}
+          </div>
+        ) : null
+      })}
+      <Button onClick={nextHint} disabled={isFinalHint}>
+        Next Hint
+      </Button>
+    </div>
+  )
+}
+
+export default Hints
diff --git a/web-app/src/containers/Tutorial/components/Step.tsx b/web-app/src/containers/Tutorial/components/Step.tsx
@@ -2,13 +2,15 @@ import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
 import TestStatusIcon from './TestStatusIcon'
+import Hints from './Hints'
 import Markdown from '../../../components/Markdown'
 
 interface Props {
   order: number
   content: string
   status: T.ProgressStatus
   subtasks: { name: string; pass: boolean }[] | null
+  hints?: string[]
   onLoadSolution(): void
 }
 
@@ -54,9 +56,11 @@ const Step = (props: Props) => {
           {props.status === 'COMPLETE' && <TestStatusIcon size="small" checked />}
         </div>
         <div>
+          {/* content */}
           <div css={styles.content}>
             <Markdown>{props.content || ''}</Markdown>
           </div>
+          {/* subtasks */}
           {props.subtasks ? (
             <ul css={styles.subtasks}>
               {props.subtasks.map((subtask) => (
@@ -68,6 +72,8 @@ const Step = (props: Props) => {
               ))}
             </ul>
           ) : null}
+          {/* hints */}
+          {props.hints && props.hints.length ? <Hints hints={props.hints} /> : null}
         </div>
       </div>
     </div>
diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx
@@ -98,3 +98,13 @@ storiesOf('Step', module)
       ]}
     />
   ))
+  .add('Hints', () => (
+    <Step
+      order={1}
+      content={text('text', stepText)}
+      status="ACTIVE"
+      onLoadSolution={action('onLoadSolution')}
+      subtasks={null}
+      hints={['First hint!', 'Second hint!']}
+    />
+  ))
