quiz

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