reset level/step connection

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

Author: ShMcK

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

@@ -9,6 +9,7 @@ import AdminContext from '../../../services/admin/context'
 
 interface Props {
   levels: T.LevelUI[]
+  onResetToPosition(position: T.Position): void
 }
 
 const styles = {
@@ -67,7 +68,16 @@ const ReviewPage = (props: Props) => {
             <div key={level.id}>
               {adminMode && (
                 <div css={styles.adminNav}>
-                  <Button type="normal" warning>
+                  <Button
+                    type="normal"
+                    warning
+                    onClick={() =>
+                      props.onResetToPosition({
+                        levelId: level.id,
+                        stepId: level.steps.length ? level.steps[0].id : null,
+                      })
+                    }
+                  >
                     {level.id}&nbsp;
                     <Icon type="refresh" />
                   </Button>
@@ -84,7 +94,11 @@ const ReviewPage = (props: Props) => {
                     <div key={step.id}>
                       {adminMode && (
                         <div css={styles.adminNav}>
-                          <Button type="normal" warning>
+                          <Button
+                            type="normal"
+                            warning
+                            onClick={() => props.onResetToPosition({ levelId: level.id, stepId: step.id })}
+                          >
                             {step.id}&nbsp;
                             <Icon type="refresh" />
                           </Button>

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

@@ -119,6 +119,10 @@ const TutorialPage = (props: PageProps) => {
     props.send({ type: 'RUN_RESET' })
   }
 
+  const onResetToPosition = (position: T.Position): void => {
+    props.send({ type: 'RUN_RESET_TO_POSITION', payload: { position } })
+  }
+
   const [menuVisible, setMenuVisible] = React.useState(false)
 
   const [page, setPage] = React.useState<'about' | 'level' | 'review' | 'settings'>('level')
@@ -150,7 +154,7 @@ const TutorialPage = (props: PageProps) => {
             <Level level={level} />
           </ScrollContent>
         )}
-        {page === 'review' && <ReviewPage levels={levels} />}
+        {page === 'review' && <ReviewPage levels={levels} onResetToPosition={onResetToPosition} />}
 
         {/* {page === 'settings' && <SettingsPage />} */}
       </div>

web-app/src/services/state/actions/editor.ts

@@ -1,5 +1,6 @@
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
+import { assign } from 'xstate'
 import * as selectors from '../../selectors'
 
 export default (editorSend: any) => ({
@@ -117,9 +118,19 @@ export default (editorSend: any) => ({
       payload: { position: context.position },
     })
   },
-  runReset() {
+  runReset(): void {
     editorSend({
       type: 'EDITOR_RUN_RESET_LATEST',
     })
   },
+  // @ts-ignore
+  runResetToPosition: assign({
+    position: (context: T.MachineContext, event: T.MachineEvent) => {
+      editorSend({
+        type: 'EDITOR_RUN_RESET_POSITION',
+        payload: event.payload,
+      })
+      return event.payload.position
+    },
+  }),
 })

web-app/src/services/state/machine.ts

@@ -171,6 +171,9 @@ export const createMachine = (options: any) => {
                     RUN_RESET: {
                       actions: ['runReset'],
                     },
+                    RUN_RESET_TO_POSITION: {
+                      actions: ['runResetToPosition'],
+                    },
                     KEY_PRESS_ENTER: {
                       actions: ['runTest'],
                     },