Refine FinishLessonModal triggering logic (#7356)

* Don't celebrate if there is a runtime error * Init tasks on reset * Clean up timelineComplete on new run
exercism · Jan 21, 2025 · 637fc60 · 637fc60
1 parent 37a7c4b
commit 637fc60
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 12 deletions.
diff --git a/app/javascript/components/bootcamp/SolveExercisePage/Header/Header.tsx b/app/javascript/components/bootcamp/SolveExercisePage/Header/Header.tsx
@@ -28,6 +28,7 @@ function _Header() {
     nextExerciseData,
     completedLevelIdx,
     nextLevelIdx,
+    hasRuntimeErrors,
   } = useTasks({
     areAllTasksCompleted,
     wasFinishLessonModalShown,
@@ -49,7 +50,7 @@ function _Header() {
           <>
             <button
               onClick={handleCompleteSolution}
-              disabled={!areAllTasksCompleted}
+              disabled={!areAllTasksCompleted || hasRuntimeErrors}
               className={assembleClassNames(
                 'btn-primary btn-xxs',
                 areAllTasksCompleted ? '' : 'disabled cursor-not-allowed'

diff --git a/app/javascript/components/bootcamp/SolveExercisePage/Header/ResetButton.tsx b/app/javascript/components/bootcamp/SolveExercisePage/Header/ResetButton.tsx
@@ -3,19 +3,22 @@ import Modal from 'react-modal'
 import { assembleClassNames } from '@/utils/assemble-classnames'
 import { SolveExercisePageContext } from '../SolveExercisePageContextWrapper'
 import useTestStore from '../store/testStore'
+import useTaskStore from '../store/taskStore/taskStore'
 
 Modal.setAppElement('body')
 export function ResetButton() {
   const [shouldOpenConfirmationModal, setShouldOpenConfirmationModal] =
     useState(false)
-  const { resetEditorToStub } = useContext(SolveExercisePageContext)
+  const { resetEditorToStub, exercise } = useContext(SolveExercisePageContext)
   const { setTestSuiteResult, setInspectedTestResult } = useTestStore()
+  const { initializeTasks } = useTaskStore()
 
   const handleResetExercise = useCallback(() => {
     resetEditorToStub()
     setShouldOpenConfirmationModal(false)
     setTestSuiteResult(null)
     setInspectedTestResult(null)
+    initializeTasks(exercise.tasks, null)
   }, [resetEditorToStub, setShouldOpenConfirmationModal])
 
   return (

diff --git a/app/javascript/components/bootcamp/SolveExercisePage/Scrubber/useScrubber.ts b/app/javascript/components/bootcamp/SolveExercisePage/Scrubber/useScrubber.ts
@@ -44,6 +44,11 @@ export function useScrubber({
       animationTimeline.onUpdate((anime) => {
         setTimeout(() => {
           setValue(anime.currentTime)
+          if (anime.completed) {
+            setIsTimelineComplete(true)
+          } else {
+            setIsTimelineComplete(false)
+          }
         }, FRAME_DURATION)
       })
     } else {
@@ -91,14 +96,6 @@ export function useScrubber({
     }
   }, [value, animationTimeline?.currentFrameIndex, frames])
 
-  useEffect(() => {
-    if (animationTimeline?.timeline.completed) {
-      setIsTimelineComplete(true)
-    } else {
-      setIsTimelineComplete(false)
-    }
-  }, [animationTimeline?.timeline.completed])
-
   // when user switches between test results, scrub to animation timeline's persisted currentTime
   const { inspectedTestResult } = useTestStore()
   useEffect(() => {

diff --git a/app/javascript/components/bootcamp/SolveExercisePage/Tasks/useTasks.tsx b/app/javascript/components/bootcamp/SolveExercisePage/Tasks/useTasks.tsx
@@ -1,4 +1,11 @@
-import { useState, useContext, useCallback, useRef, useEffect } from 'react'
+import {
+  useState,
+  useContext,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+} from 'react'
 import { SolveExercisePageContext } from '../SolveExercisePageContextWrapper'
 import { type NextExercise, completeSolution } from './completeSolution'
 import type { TaskStore } from '../store/taskStore/taskStore'
@@ -42,6 +49,11 @@ export function useTasks({
   // here we care about areAllTasksCompleted
   // so we check if that is undefined - hasn't been set yet, or boolean - has been set
   const isSetupStage = useRef(true)
+  const hasRuntimeErrors = useMemo(() => {
+    if (inspectedTestResult) {
+      return inspectedTestResult.frames.some((f) => f.status === 'ERROR')
+    }
+  }, [inspectedTestResult])
 
   useEffect(() => {
     // Don't show FinishLessonModal on page-revisit
@@ -57,7 +69,7 @@ export function useTasks({
       // if we don't have a timeline, we don't need to wait for it to be complete
       const isTimelineReady = hasTimeline ? isTimelineComplete : true
 
-      if (shouldShowModal && isTimelineReady) {
+      if (shouldShowModal && isTimelineReady && !hasRuntimeErrors) {
         setIsFinishModalOpen(true)
         launchConfetti()
         setWasFinishLessonModalShown(true)
@@ -99,5 +111,6 @@ export function useTasks({
     nextExerciseData,
     nextLevelIdx,
     completedLevelIdx,
+    hasRuntimeErrors,
   }
 }
diff --git a/...pt/components/bootcamp/SolveExercisePage/hooks/useConstructRunCode/useConstructRunCode.ts b/...pt/components/bootcamp/SolveExercisePage/hooks/useConstructRunCode/useConstructRunCode.ts
@@ -14,6 +14,7 @@ import { getCodeMirrorFieldValue } from '../../CodeMirror/getCodeMirrorFieldValu
 import { readOnlyRangesStateField } from '../../CodeMirror/extensions/read-only-ranges/readOnlyRanges'
 import { scrollToLine } from '../../CodeMirror/scrollToLine'
 import useErrorStore from '../../store/errorStore'
+import useAnimationTimelineStore from '../../store/animationTimelineStore'
 
 export function useConstructRunCode({
   links,
@@ -27,6 +28,7 @@ export function useConstructRunCode({
     inspectedTestResult,
     setHasSyntaxError,
   } = useTestStore()
+  const { setIsTimelineComplete } = useAnimationTimelineStore()
 
   const {
     setHighlightedLine,
@@ -64,6 +66,7 @@ export function useConstructRunCode({
         inspectedTestResult.animationTimeline?.destroy()
         inspectedTestResult.animationTimeline = null
       }
+      setIsTimelineComplete(false)
       setTestSuiteResult(null)
       setInspectedTestResult(null)