fix: Do not call onNext in onResult when we should break the round

Amsterdam-Music-Lab · May 30, 2024 · c5ca467 · c5ca467
1 parent e07fe9f
commit c5ca467
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/frontend/src/components/Trial/Trial.jsx b/frontend/src/components/Trial/Trial.jsx
@@ -55,21 +55,26 @@ const Trial = ({
                 if (feedback_form.is_skippable) {
                     form.map((formElement => (formElement.value = formElement.value || '')))
                 }
-                onResult({
-                    decision_time: getAndStoreDecisionTime(),
-                    form,
-                    config
-                });
-                if (config.break_round_on) {
-                    const values = form.map((formElement) => formElement.value);
-                    if (checkBreakRound(values, config.break_round_on)) {
-                        // one of the break conditions is met:
-                        // onNext will request next_round from server,
-                        // and ignore further rounds in the current array
-                        onNext(true)
-                    }
 
+                const breakRoundOn = config.break_round_on;
+                const shouldBreakRound = breakRoundOn && checkBreakRound(form.map((formElement) => formElement.value), breakRoundOn);
+                const shouldCallOnNextInOnResult = !shouldBreakRound
+
+                await onResult(
+                    {
+                        decision_time: getAndStoreDecisionTime(),
+                        form,
+                        config
+                    },
+                    false,
+                    // if we break the round, we don't want to call onNext in onResult
+                    shouldCallOnNextInOnResult
+                );
+
+                if (shouldBreakRound) {
+                    onNext(true);
                 }
+
             } else {
                 if (result_id) {
                     onResult({
@@ -109,7 +114,7 @@ const Trial = ({
         if (config.auto_advance) {
 
             // Create a time_passed result
-            if (config.auto_advance_timer != null) {                
+            if (config.auto_advance_timer != null) {
                 if (playback.view === 'BUTTON') {
                     startTime.current = getCurrentTime();
                 }

diff --git a/frontend/src/hooks/useResultHandler.test.js → frontend/src/hooks/useResultHandler.test.ts b/frontend/src/hooks/useResultHandler.test.js → frontend/src/hooks/useResultHandler.test.ts
diff --git a/frontend/src/hooks/useResultHandler.js → frontend/src/hooks/useResultHandler.ts b/frontend/src/hooks/useResultHandler.js → frontend/src/hooks/useResultHandler.ts
@@ -1,6 +1,13 @@
 import { useRef, useCallback } from "react";
 import { scoreResult } from "@/API";
 
+interface ResultData {
+    session: unknown;
+    participant: unknown;
+    result: unknown;
+    section?: unknown;
+}
+
 // useResult provides a reusable function to handle experiment view data
 // - collect results in a buffer
 // - handles advancing to next round
@@ -9,14 +16,18 @@ const useResultHandler = ({ session, participant, onNext, state }) => {
     const resultBuffer = useRef([]);
 
     const onResult = useCallback(
-        async (result, forceSubmit = false) => {
+        async (
+            result: unknown,
+            forceSubmit = false,
+            goToNextAction = true
+        ) => {
             // Add data to result buffer
             resultBuffer.current.push(result || {});
 
             // Check if there is another round data available
             // can be forced by forceSubmit
             const hasNextRound = state && state.next_round && state.next_round.length;
-            if (hasNextRound && !forceSubmit) {
+            if (hasNextRound && !forceSubmit && goToNextAction) {
                 onNext();
                 return;
             }
@@ -30,7 +41,7 @@ const useResultHandler = ({ session, participant, onNext, state }) => {
             );
 
             // Create result data
-            const data = {
+            const data: ResultData = {
                 session,
                 participant,
                 result: mergedResults,
@@ -46,7 +57,11 @@ const useResultHandler = ({ session, participant, onNext, state }) => {
 
             // Clear resultBuffer
             resultBuffer.current = [];
-            onNext();
+
+            // Advance to next round
+            if (goToNextAction) {
+                onNext();
+            }
 
         },
         [participant, session, onNext, state]