guild_front/src/components/features/quiz/Task.js

import moment from "moment";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";

import { questionsSelector } from "@redux/quizSlice";

import { apiRequest } from "@api/request";

import { useHandlerFieldTest } from "@hooks/useHandlerFieldTest";
import { useNotification } from "@hooks/useNotification";

import { Loader } from "@components/Common/Loader/Loader";

import questionIcon from "assets/images/question.png";

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 { showNotification } = useNotification();

  const { userResponses, handleChange } = useHandlerFieldTest({
    questions,
    indexQuestion: index,
  });

  const nextQuestion = async (e) => {
    e.preventDefault();
    //Проверка на существование овтетов
    if (!userResponses[index]) {
      alert("Вы не ответили на вопрос");
      return;
    }

    // setLoadingSendAnswers(true);
    // .finally(() => setLoadingSendAnswers(false));

    // отправка ответов на сервер
    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(() => {
        showNotification({
          show: true,
          text: "Тест успешно пройден",
          type: "success",
        });
        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));
  };

  const complete = (e) => {
    e.preventDefault();
  };

  const setValueTimer = () => {
    const time_limit = questions[index + 1].time_limit.split(":");
    restart(
      moment()
        .add(time_limit[0], "hours")
        .add(time_limit[1], "minutes")
        .add(time_limit[2], "seconds")
    );
  };

  return (
    <div className="task">
      {questions ? (
        <div className="task__container">
          <div className="task__header">
            <img src={questionIcon} alt="questionIcon" />
            <h3 className="task__title quiz-title_h3">
              {questions[index].question_body}
            </h3>
          </div>
          <div className="task__body">
            <form
              className="task__form form-task"
              onSubmit={
                index !== questions.length - 1 ? nextQuestion : complete
              }
            >
              {questions[index].question_type_id === 1 ? (
                <div className="form-task__group">
                  <textarea
                    className="form-task__field"
                    onChange={handleChange}
                  />
                </div>
              ) : (
                questions[index]?.answers?.map((answer) => (
                  <GetOptionTask
                    key={answer.id}
                    type={questions[index].question_type_id}
                    handleChange={handleChange}
                    answer={answer}
                  />
                ))
              )}
              <div className="form-task__buttons">
                <button
                  onClick={nextQuestion}
                  // disabled={isLoadingSendAnswers}
                  className="form-task__btn quiz-btn"
                >
                  {isLoadingSendAnswers ? (
                    <Loader width={25} height={25} />
                  ) : index !== questions.length - 1 ? (
                    "Далее"
                  ) : (
                    "Завершить"
                  )}
                </button>
              </div>
            </form>
          </div>
        </div>
      ) : (
        <h1>ОШибка</h1>
      )}
    </div>
  );
};