refactor hints

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

Author: ShMcK

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

@@ -20,29 +20,33 @@ const styles = {
 
 interface Props {
   hints: string[]
-  hintIndex: number
-  setHintIndex(value: number): void
 }
 
 const Hints = (props: Props) => {
+  // hold state for hints for the level
+  const [hintIndex, setHintIndex] = React.useState<number>(-1)
+
   if (!props.hints || !props.hints.length) {
     return null
   }
-  const isFinalHint = props.hints.length - 1 === props.hintIndex
+
+  const isFinalHint = props.hints.length - 1 === hintIndex
+
   const nextHint = () => {
     if (isFinalHint) {
       return
     }
-    props.setHintIndex(props.hintIndex + 1)
+    setHintIndex(hintIndex + 1)
   }
+
   return (
     <div css={styles.hints}>
       <div css={styles.hintList}>
         {/* only show revealed hints */}
-        {props.hints.map((h, i) => {
-          return i <= props.hintIndex ? (
-            <div key={i} css={styles.hint}>
-              <Markdown css={styles.hint}>{h}</Markdown>
+        {props.hints.map((hint, index) => {
+          return index <= hintIndex ? (
+            <div key={index} css={styles.hint}>
+              <Markdown css={styles.hint}>{hint}</Markdown>
             </div>
           ) : null
         })}

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

@@ -37,11 +37,9 @@ const styles = {
 
 interface Props {
   level: TT.Level
-  setHintsIndex(stepIndex: number, value: number): void
-  displayHintsIndex: number[]
 }
 
-const Level = ({ level, setHintsIndex, displayHintsIndex }: Props) => {
+const Level = ({ level }: Props) => {
   const pageBottomRef = React.useRef(null)
   const scrollToBottom = () => {
     // @ts-ignore
@@ -56,7 +54,7 @@ const Level = ({ level, setHintsIndex, displayHintsIndex }: Props) => {
 
         {level.content.length && level.steps.length ? <div css={styles.separator} /> : null}
 
-        <Steps steps={level.steps} setHintsIndex={setHintsIndex} displayHintsIndex={displayHintsIndex} />
+        <Steps steps={level.steps} />
 
         <div ref={pageBottomRef} />
       </div>

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

@@ -6,8 +6,6 @@ import Hints from './Hints'
 
 interface Props {
   steps: TT.Step[]
-  displayHintsIndex: number[]
-  setHintsIndex(stepIndex: number, value: number): void
 }
 
 const styles = {
@@ -23,19 +21,15 @@ const Steps = (props: Props) => {
   return (
     <div css={styles.steps}>
       {/* @ts-ignore typings are different between UI & data */}
-      {props.steps.map((step: TT.Step & { subtasks: null | { name: string; pass: boolean }[] }, stepIndex: number) => {
+      {props.steps.map((step: TT.Step & { subtasks: null | { name: string; pass: boolean }[] }) => {
         if (!step) {
           return null
         }
         return (
-          <>
+          <div key={step.id}>
             <Step key={step.id} status={step.status || 'INCOMPLETE'} content={step.content} subtasks={step.subtasks} />
-            <Hints
-              hints={step.hints || []}
-              hintIndex={props.displayHintsIndex[stepIndex]}
-              setHintIndex={(value) => props.setHintsIndex(stepIndex, value)}
-            />
-          </>
+            <Hints hints={step.hints || []} />
+          </div>
         )
       })}
     </div>

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

@@ -23,7 +23,7 @@ const ReviewPage = (props: Props) => {
           <>
             <div>
               <Content title={level.title} content={level.content} />
-              <Steps steps={level.steps} displayHintsIndex={level.steps.map((s) => -1)} setHintsIndex={() => {}} />
+              <Steps steps={level.steps} />
             </div>
             {/* divider */}
             {index < props.levels.length - 1 ? <hr /> : null}

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

@@ -85,15 +85,6 @@ interface PageProps {
 
 const TutorialPage = (props: PageProps) => {
   const { position, progress, processes, testStatus } = props.context
-  // hold state for hints for the level
-  const [displayHintsIndex, setDisplayHintsIndex] = React.useState<number[]>([])
-  const setHintsIndex = (index: number, value: number) => {
-    return setDisplayHintsIndex((displayHintsIndex) => {
-      const next = [...displayHintsIndex]
-      next[index] = value
-      return next
-    })
-  }
 
   const tutorial = selectors.currentTutorial(props.context)
 
@@ -121,11 +112,6 @@ const TutorialPage = (props: PageProps) => {
     testStatus,
   })
 
-  React.useEffect(() => {
-    // set the hints to empty on level starts
-    setDisplayHintsIndex(level.steps.map((s: TT.Step) => -1))
-  }, [level.id])
-
   return (
     <div>
       <div>
@@ -136,9 +122,7 @@ const TutorialPage = (props: PageProps) => {
           <span css={styles.title}>{tutorial.summary.title}</span>
         </div>
 
-        {page === 'level' && (
-          <Level level={level} displayHintsIndex={displayHintsIndex} setHintsIndex={setHintsIndex} />
-        )}
+        {page === 'level' && <Level level={level} />}
         {page === 'settings' && <SettingsPage />}
         {page === 'review' && <ReviewPage levels={levels} />}
       </div>
@@ -181,7 +165,7 @@ const TutorialPage = (props: PageProps) => {
               shape="line"
               color="rgb(85, 132, 255)"
               css={styles.taskProgress}
-              textRender={(percent: number) => {
+              textRender={() => {
                 return (
                   <span style={{ color: 'white' }}>
                     {stepIndex} of {level.steps.length}

web-app/stories/Level.stories.tsx

@@ -23,6 +23,7 @@ const level = {
         commits: ['hijklmn'],
       },
       status: 'COMPLETE',
+      hints: ['first hint', 'second hint'],
     },
     {
       id: '1.2',
@@ -34,6 +35,7 @@ const level = {
         commits: ['hijklmn'],
       },
       status: 'ACTIVE',
+      hints: ['more hint action', 'another second hint'],
     },
     {
       id: '1.3',

web-app/stories/Tutorial.stories.tsx

@@ -101,6 +101,7 @@ const context: Partial<T.MachineContext> = {
               commits: ['hijklmn'],
             },
             status: 'COMPLETE',
+            hints: ['first hint', 'second hint'],
           },
           {
             id: '2.2',
@@ -112,6 +113,7 @@ const context: Partial<T.MachineContext> = {
               commits: ['hijklmn'],
             },
             status: 'ACTIVE',
+            hints: ['another hint', 'another other hint'],
           },
           {
             id: '2.3',