fix #1310: FeedbackForm calls makeResult

frontend/src/components/FeedbackForm/FeedbackForm.tsx

@@ -1,18 +1,17 @@
-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;
     form: IQuestion[];
     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,15 +75,15 @@ const FeedbackForm = ({
                             // skip button
                             <Button
                                 onClick={() => {
-                                    onSubmit();
+                                    submitResult();
                                 }}
                                 className={"btn-gray col-4 align-self-start"
                                 }
                                 title={skipLabel}
                             />)}
                         <Button
                             onClick={() => {
-                                onSubmit();
+                                submitResult();
                             }}
                             className={
                                 "submit col-4"

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();

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)