src/components/features/quiz/Task.js

@@ -1,7 +1,7 @@
 import moment from "moment";
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 import { questionsSelector } from "@redux/quizSlice";
 
@@ -18,16 +18,15 @@ import { GetOptionTask } from "./GetOptionTask";
 import "./quiz.scss";
 
 export const TaskQuiz = ({ timer }) => {
-  const navigate = useNavigate();
   const { restart } = timer;
   const { uuid } = useParams();
-  const userId = localStorage.getItem("id");
   const questions = useSelector(questionsSelector);
   const [index, setIndex] = useState(0);
-  const [isLoadingSendAnswers] = useState(false);
+  const [isLoadingSendAnswers, setLoadingSendAnswers] = useState(false);
   const { showNotification } = useNotification();
 
-  const { userResponses, handleChange } = useHandlerFieldTest({
+  const { values, handleChange, setValues } = useHandlerFieldTest({
+    uuid,
     questions,
     indexQuestion: index,
   });
@@ -35,57 +34,49 @@ export const TaskQuiz = ({ timer }) => {
   const nextQuestion = async (e) => {
     e.preventDefault();
     //Проверка на существование овтетов
-    if (!userResponses[index]) {
+    if (!values.length) {
       alert("Вы не ответили на вопрос");
       return;
     }
 
-    // setLoadingSendAnswers(true);
-    // .finally(() => setLoadingSendAnswers(false));
+    //отправка ответов на сервер
+    setLoadingSendAnswers(true);
+    await apiRequest(`/user-response/set-responses`, {
+      method: "POST",
+      data: values,
+    })
+      .then((res) => {
+        if (String(res?.status)[0] !== "2") {
+          showNotification({
+            show: true,
+            text: res?.message || "",
+            type: "error",
+          });
+          return;
+        }
 
-    // отправка ответов на сервер
-    if (questions.length === userResponses.length) {
-      await apiRequest(`/user-response/set-responses`, {
-        method: "POST",
-        data: {
-          user_id: userId,
-          user_questionnaire_uuid: uuid,
-          userResponses: JSON.stringify(userResponses),
-        },
-      }).then(() => {
+        if (index === questions.length - 1) return;
+
+        //установка таймера на вопрос если он существует
+        if (questions[index + 1]?.time_limit !== "00:00:00") setValueTimer();
+
+        // очищение полей и переход на следующий вопрос
+        setIndex((prev) => prev + 1);
+        setValues([]);
+      })
+      .catch((e) => {
         showNotification({
           show: true,
-          text: "Тест успешно пройден",
-          type: "success",
+          text: e?.message || "",
+          type: "error",
         });
-        navigate("/quiz");
-        // if (String(res?.status)[0] !== "2") {
-        //   showNotification({
-        //     show: true,
-        //     text: res?.message || "",
-        //     type: "error",
-        //   });
-        //   return;
-        // }
-      });
-      // .catch((e) => {
-      //   showNotification({
-      //     show: true,
-      //     text: e?.message || "",
-      //     type: "error",
-      //   });
-      // })
-    }
-
-    //установка таймера на вопрос если он существует
-    if (questions[index + 1]?.time_limit !== "00:00:00") setValueTimer();
-
-    // переход на следующий вопрос
-    setIndex((prev) => (questions[prev + 1] ? prev + 1 : prev));
+      })
+      .finally(() => setLoadingSendAnswers(false));
   };
 
   const complete = (e) => {
     e.preventDefault();
+    console.log(values);
   };
 
   const setValueTimer = () => {
@@ -98,6 +89,7 @@ export const TaskQuiz = ({ timer }) => {
     );
   };
 
+  console.log(questions);
   return (
     <div className="task">
       {questions ? (
@@ -119,6 +111,7 @@ export const TaskQuiz = ({ timer }) => {
                 <div className="form-task__group">
                   <textarea
                     className="form-task__field"
+                    value={values[0]?.response_body}
                     onChange={handleChange}
                   />
                 </div>
@@ -135,7 +128,7 @@ export const TaskQuiz = ({ timer }) => {
               <div className="form-task__buttons">
                 <button
                   onClick={nextQuestion}
-                  // disabled={isLoadingSendAnswers}
+                  disabled={isLoadingSendAnswers}
                   className="form-task__btn quiz-btn"
                 >
                   {isLoadingSendAnswers ? (

src/hooks/useHandlerFieldTest.js

@@ -1,32 +1,42 @@
 import { useState } from "react";
 
-export const useHandlerFieldTest = ({ questions, indexQuestion }) => {
-  const [userResponses, setUserResponses] = useState([]);
+export const useHandlerFieldTest = ({ uuid, questions, indexQuestion }) => {
+  const [values, setValues] = useState([]);
+  const id = localStorage.getItem("id");
   const handleChangeCheckbox = (e) => {
-    setUserResponses((prev) => [
-      ...prev.filter(
-        (item) => item.question_id !== questions[indexQuestion].id
-      ),
+    if (!e.target.checked) {
+      setValues((prev) => [
+        ...prev.filter((item) => item.response_body !== e.target.value),
+      ]);
+      return;
+    }
+    setValues((prev) => [
+      ...prev,
       {
+        user_id: id,
+        user_questionnaire_uuid: uuid,
         question_id: questions[indexQuestion].id,
         response_body: e.target.value,
-        answer_id: e.target.id ? e.target.id : questions[indexQuestion].id,
       },
     ]);
   };
 
-  // const handleFieldsForm = (e) => {
-  //   setValues([
-  //     {
-  //       user_id: id,
-  //       user_questionnaire_uuid: uuid,
-  //       question_id: questions[indexQuestion].id,
-  //       response_body: e.target.value,
-  //     },
-  //   ]);
-  // };
+  const handleFieldsForm = (e) => {
+    setValues([
+      {
+        user_id: id,
+        user_questionnaire_uuid: uuid,
+        question_id: questions[indexQuestion].id,
+        response_body: e.target.value,
+      },
+    ]);
+  };
   const handleChange = (e) => {
+    if (+questions[indexQuestion].question_type_id !== 3) {
+      handleFieldsForm(e);
+      return;
+    }
     handleChangeCheckbox(e);
   };
-  return { handleChange, userResponses };
+  return { handleChange, values, setValues };
 };