From 9349a31204cf9f1e46ffba39fe57c91b951f1d28 Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Thu, 30 May 2024 15:17:19 +0200
Subject: [PATCH] fix: Do not call onNext in onResult when we should break the
 round (#1043)

---
 frontend/src/components/Trial/Trial.jsx       | 33 +++++++++++--------
 ...ndler.test.js => useResultHandler.test.ts} |  0
 ...seResultHandler.js => useResultHandler.ts} | 23 ++++++++++---
 3 files changed, 38 insertions(+), 18 deletions(-)
 rename frontend/src/hooks/{useResultHandler.test.js => useResultHandler.test.ts} (100%)
 rename frontend/src/hooks/{useResultHandler.js => useResultHandler.ts} (78%)

diff --git a/frontend/src/components/Trial/Trial.jsx b/frontend/src/components/Trial/Trial.jsx
index 82640ab6d..f78e290c0 100644
--- 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 b/frontend/src/hooks/useResultHandler.test.ts
similarity index 100%
rename from frontend/src/hooks/useResultHandler.test.js
rename to frontend/src/hooks/useResultHandler.test.ts
diff --git a/frontend/src/hooks/useResultHandler.js b/frontend/src/hooks/useResultHandler.ts
similarity index 78%
rename from frontend/src/hooks/useResultHandler.js
rename to frontend/src/hooks/useResultHandler.ts
index 05a855de0..5685c26d8 100644
--- a/frontend/src/hooks/useResultHandler.js
+++ b/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]