From f7d169be5afd333be572c802414b8d6eba185d9b Mon Sep 17 00:00:00 2001
From: BeritJanssen <berit.janssen@gmail.com>
Date: Tue, 15 Oct 2024 16:04:26 +0200
Subject: [PATCH] fix #1310: FeedbackForm calls makeResult

---
 .../components/FeedbackForm/FeedbackForm.tsx  | 32 ++++---------------
 frontend/src/components/Trial/Trial.test.tsx  |  5 +--
 frontend/src/components/Trial/Trial.tsx       |  3 +-
 3 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/FeedbackForm/FeedbackForm.tsx b/frontend/src/components/FeedbackForm/FeedbackForm.tsx
index 8dab41173..6d45bc750 100644
--- a/frontend/src/components/FeedbackForm/FeedbackForm.tsx
+++ b/frontend/src/components/FeedbackForm/FeedbackForm.tsx
@@ -1,9 +1,9 @@
-import { useState, useRef } from "react";
+import { useState } from "react";
 
 import Question from "../Question/Question";
 import Button from "../Button/Button";
 import IQuestion from "@/types/Question";
-import { OnResultType } from "@/hooks/useResultHandler";
+import { submitResultType } from "@/hooks/useResultHandler";
 
 interface FeedbackFormProps {
     formActive: boolean;
@@ -11,8 +11,7 @@ interface FeedbackFormProps {
     buttonLabel: string;
     skipLabel: string;
     isSkippable: boolean;
-    onResult: OnResultType
-    onNext: () => void;
+    submitResult: submitResultType
     emphasizeTitle?: boolean;
 }
 
@@ -23,35 +22,18 @@ const FeedbackForm = ({
     buttonLabel,
     skipLabel,
     isSkippable,
-    onResult,
-    onNext,
+    submitResult,
     emphasizeTitle = false,
 }: FeedbackFormProps) => {
-    const isSubmitted = useRef(false);
     const showSubmitButtons =
         form.filter((formElement) => formElement.submits).length === 0;
 
     const [formValid, setFormValid] = useState(false);
 
-    const onSubmit = async () => {
-        // Prevent double submit
-        if (isSubmitted.current) {
-            return;
-        }
-        isSubmitted.current = true;
-
-        // Callback onResult with question data
-        await onResult({
-            form,
-        });
-
-        onNext();
-    };
-
     const onChange = (value: string | number | boolean, question_index: number) => {
         form[question_index].value = value;
         if (form[question_index].submits) {
-            onSubmit();
+            submitResult();
         }
         // for every non-skippable question, check that we have a value
         const validFormElements = form.filter(formElement => {
@@ -93,7 +75,7 @@ const FeedbackForm = ({
                             // skip button
                             <Button
                                 onClick={() => {
-                                    onSubmit();
+                                    submitResult();
                                 }}
                                 className={"btn-gray col-4 align-self-start"
                                 }
@@ -101,7 +83,7 @@ const FeedbackForm = ({
                             />)}
                         <Button
                             onClick={() => {
-                                onSubmit();
+                                submitResult();
                             }}
                             className={
                                 "submit col-4"
diff --git a/frontend/src/components/Trial/Trial.test.tsx b/frontend/src/components/Trial/Trial.test.tsx
index 1c370c490..fe3efa9c3 100644
--- a/frontend/src/components/Trial/Trial.test.tsx
+++ b/frontend/src/components/Trial/Trial.test.tsx
@@ -13,8 +13,8 @@ vi.mock("../Playback/Playback", () => ({
     )),
 }));
 vi.mock("../FeedbackForm/FeedbackForm", () => ({
-    default: vi.fn(({ onResult, onNext }) => (
-        <div data-testid="mock-feedback-form" onClick={() => { onResult(); onNext(); }}>Mock Feedback Form</div>
+    default: vi.fn(({ submitResult }) => (
+        <div data-testid="mock-feedback-form" onClick={() => { submitResult(); }}>Mock Feedback Form</div>
     )),
 }));
 vi.mock("../HTML/HTML", () => ({
@@ -43,6 +43,7 @@ const defaultConfig = {
 describe('Trial', () => {
     const mockOnNext = vi.fn();
     const mockOnResult = vi.fn();
+    const mockMakeResult = vi.fn();
 
     beforeEach(() => {
         vi.clearAllMocks();
diff --git a/frontend/src/components/Trial/Trial.tsx b/frontend/src/components/Trial/Trial.tsx
index 2ac79ef71..76e19a7d5 100644
--- a/frontend/src/components/Trial/Trial.tsx
+++ b/frontend/src/components/Trial/Trial.tsx
@@ -175,8 +175,7 @@ const Trial = (props: TrialProps) => {
                     buttonLabel={feedback_form.submit_label}
                     skipLabel={feedback_form.skip_label}
                     isSkippable={feedback_form.is_skippable}
-                    onResult={onResult}
-                    onNext={onNext}
+                    submitResult={makeResult}
                 // emphasizeTitle={feedback_form.is_profile}
                 // TODO: if we want left-aligned text with a pink divider,
                 // make this style option available again (used in Question.scss)