Reset to Level 1 step 1

Signed-off-by: Shubham Shah <[email protected]>

Author: SavvyShah

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

@@ -1,5 +1,5 @@
 import Button from 'components/Button'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Theme } from '../../../styles/theme'
 import Reset from '../components/Reset'
 
@@ -46,21 +46,10 @@ const styles = {
 }
 
 interface Props {
-  levels: T.LevelUI[]
-  onResetToPosition(position: T.Position): void
+  onReset(): void
 }
 
 const SettingsPage = (props: Props) => {
-  const onReset = () => {
-    const level: T.LevelUI | null = props.levels.length ? props.levels[0] : null
-    if (level) {
-      props.onResetToPosition({
-        levelId: level.id,
-        stepId: null,
-        complete: false,
-      })
-    }
-  }
   return (
     <div css={styles.container}>
       <div css={styles.header}>
@@ -78,7 +67,7 @@ const SettingsPage = (props: Props) => {
                 level and first task checkpoint.
               </div>
             </div>
-            <Reset style={styles.menuItemButton} warning onReset={onReset} />
+            <Reset style={styles.menuItemButton} warning onReset={props.onReset} />
           </div>
         </div>
       </div>

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

@@ -128,13 +128,25 @@ const TutorialPage = (props: PageProps) => {
 
   const [page, setPage] = React.useState<'about' | 'level' | 'review' | 'settings'>('level')
 
+  const onSettingsReset = () => {
+    //Reset to first level first step
+    const level: T.LevelUI | null = levels.length ? levels[1] : null
+    if (level) {
+      onResetToPosition({
+        levelId: level.id,
+        stepId: level.steps.length ? level.steps[0].id : null,
+        complete: false,
+      })
+      setPage('level')
+    }
+  }
   // format level code with status for easy rendering
   const { level, levels, levelIndex, stepIndex } = formatLevels({
     position,
     levels: tutorial.levels,
     testStatus,
   })
-  console.log({ position })
+
   const disableOptions = processes.length > 0 || props.state === 'Level.TestRunning'
 
   return (
@@ -156,7 +168,7 @@ const TutorialPage = (props: PageProps) => {
         )}
         {page === 'review' && <ReviewPage levels={levels} onResetToPosition={onResetToPosition} />}
 
-        {page === 'settings' && <SettingsPage levels={levels} onResetToPosition={onResetToPosition} />}
+        {page === 'settings' && <SettingsPage onReset={onSettingsReset} />}
       </div>
 
       {props.state === 'Completed' ? (

web-app/stories/Settings.stories.tsx

@@ -6,5 +6,5 @@ import Settings from '../src/containers/Tutorial/containers/Settings'
 storiesOf('Settings', module)
   .addDecorator(SideBarDecorator)
   .add('Settings Page', () => {
-    return <Settings />
+    return <Settings onReset={() => console.log('Reset...')} />
   })