quiz

2023-11-21 17:31:22 +03:00
parent 64374a4aff
commit ec7d0716b3
11 changed files with 327 additions and 355 deletions
--- a/src/components/features/quiz/CardAviableTest.jsx
+++ b/src/components/features/quiz/CardAviableTest.jsx
@ -5,15 +5,16 @@ import StarRating from "@components/StarRating/StarRating";

 import rightArrow from "assets/icons/arrows/arrowRight.svg";

-export const CardAvailableTest = ({ title, description, path, passedTest }) => {
+export const CardAvailableTest = ({ title, description, path, status }) => {
  return (
    <div className="card-available-test">
      <Link
        to={`/${path}`}
+        aria-disabled={true}
        className="card-available-test__container"
        style={{
-          opacity: passedTest ? 0.3 : 1,
-          pointerEvents: passedTest ? "none" : "all",
+          // opacity: status !== 1 ? 0.3 : 1,
+          // pointerEvents: status !== 1 ? "none" : "all",
        }}
      >
        <div className="card-available-test__top-head">
@ -27,8 +28,7 @@ export const CardAvailableTest = ({ title, description, path, passedTest }) => {
          </div>
        </div>
      </Link>
-
-      {passedTest && (
+      {status === 2 && (
        <div className="card-available-test__finished">
          <p>Получить отчет по тестированию</p>
          <Link to={"/quiz/report"}>Отчет по тесту</Link>
--- a/src/components/features/quiz/GetOptionTask.jsx
+++ b/src/components/features/quiz/GetOptionTask.jsx
@ -1,44 +1,18 @@
 import React from "react";

-export const GetOptionTask = ({ type, answer, handleChange, inputValue }) => {
-  switch (type) {
-    case "1":
-      return (
-        <div className="form-task__group">
-          <textarea
-            className="form-task__field"
-            value={inputValue}
-            onChange={handleChange}
-          />
-        </div>
-      );
-    case "3":
-      return (
-        <div className="form-task__group" key={answer.id}>
-          <input
-            className="form-task__check"
-            type="checkbox"
-            value={answer.answer_body}
-            id={answer.id}
-            onChange={handleChange}
-          />
-          <label htmlFor={answer.id}>{answer.answer_body}</label>
-        </div>
-      );
-
-    default:
-      return (
-        <div className="form-task__group" key={answer.id}>
-          <input
-            className="form-task__check"
-            type="radio"
-            value={answer.answer_body}
-            name={"radio"}
-            id={answer.id}
-            onChange={handleChange}
-          />
-          <label htmlFor={answer.id}>{answer.answer_body}</label>
-        </div>
-      );
-  }
+export const GetOptionTask = ({ type, answer, handleChange }) => {
+  const {answer_body,id} = answer
+  return (
+    <div className="form-task__group" key={id}>
+      <input
+        className="form-task__check"
+        type={+type === 3 ? "checkbox" : "radio"}
+        value={answer_body}
+        name={+type === 3 ? "checkbox" : "radio"}
+        id={id}
+        onChange={handleChange}
+      />
+      <label htmlFor={id}>{answer_body}</label>
+    </div>
+  );
 };
--- a/src/components/features/quiz/HeaderQuiz.jsx
+++ b/src/components/features/quiz/HeaderQuiz.jsx
@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useDispatch, useSelector } from "react-redux";

-import { selectUserInfo, setUserInfo } from "@redux/quizSlice";
+import { selectUserInfo } from "@redux/quizSlice";

 import { urlForLocal } from "@utils/helper";

@ -13,14 +13,6 @@ export const HeaderQuiz = ({ header }) => {
  const userId = localStorage.getItem("id");
  const userInfo = useSelector(selectUserInfo);

-  useEffect(() => {
-    dispatch(setUserInfo(userId));
-  }, [userId, dispatch]);
-
-  useEffect(() => {
-    // apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
-    //     .then(res => dispatch(setQuestionnairesList(res)))
-  }, [userId, dispatch]);

  return (
    <div>
--- a/src/components/features/quiz/Quiz-passing-information.jsx
+++ b/src/components/features/quiz/Quiz-passing-information.jsx
@ -1,36 +1,67 @@
 import React, { useEffect } from "react";
-import { useSelector } from "react-redux";
-import { useTimer } from "react-timer-hook";
-
-import { completedTestSelector } from "@redux/quizSlice";
-
+import { useDispatch, useSelector } from "react-redux";
+import { setQuestions } from "@redux/quizSlice";
 import StarRating from "@components/StarRating/StarRating";
-
 import accempt from "assets/images/quiz/accempt.png";
-import timer from "assets/images/quiz/timer.png";
+import iconTomer from "assets/images/quiz/timer.png";
+import { apiRequest } from "@api/request";
+import moment from "moment";
+import { useNavigate } from "react-router-dom";
+import { useNotification } from "@hooks/useNotification";

-export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
-  const { seconds, minutes, isRunning, start, restart } = useTimer({
-    expiryTimestamp,
-    autoStart: false,
-    onExpire: () => {
-      console.warn("onExpire called");
-    },
-  });
-  const completedTest = useSelector(completedTestSelector);
+export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
+
+  const { restart, pause, hours, minutes, seconds, isRunning } = timer;
+  const navigate = useNavigate();
+  const { showNotification } = useNotification();
+  const dispatch = useDispatch();

  const startTesting = () => {
-    setStartTest(true);
-    start();
+    apiRequest(
+      `/question/get-questions?uuid=${uuid}`
+    )
+      .then((res) => {
+        if (res.status === 400) {
+          dispatch(setQuestions(null));
+          showNotification({
+            show: true,
+            text: res?.message || "",
+            type: "error"
+          });
+          return;
+        }
+        dispatch(setQuestions(res));
+        setStartTest(true);
+        restart(moment()
+          .add(res[0]?.time_limit.split(":")[0], "hours")
+          .add(res[0]?.time_limit.split(":")[1], "minutes")
+          .add(res[0]?.time_limit.split(":")[2], "seconds"), true);
+      })
+      .catch(e => {
+        dispatch(setQuestions(null));
+      });
+  };
+
+
+  const checkTest = () => apiRequest(
+    `user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
+  );
+
+  const completeTest = () => apiRequest(
+    "/user-questionnaire/questionnaire-completed", {
+      method: "POST"
+    });
+
+  const finishQuiz = async () => {
+    Promise.all([checkTest, completeTest])
+      .then(function() {
+        pause();
+      })
+      .catch(e => {
+        console.log(e);
+      });
  };

-  useEffect(() => {
-    if (completedTest) {
-      const time = new Date();
-      time.setSeconds(time.getSeconds() + 0); //600 - кол-во секунд для прохождения теста
-      restart(time, false);
-    }
-  }, [completedTest]);

  return (
    <div className="quiz-passing-information">
@ -48,22 +79,25 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
              разработчик
            </div>
          </div>
-          <div className="quiz-passing-information__timer timer-quiz">
+          {isRunning && <div className="quiz-passing-information__timer timer-quiz">
            <div className="quiz-passing-information__icon">
-              <img src={timer} alt="" />
+              <img src={iconTomer} alt="" />
            </div>
            <div className="quiz-passing-information__text">
-              {completedTest ? "Время вышло" : "Время на прохождение теста:"}{" "}
+              Время на прохождение теста:
              <br />
              <span>
-                {minutes.toString().padStart(2, "0") +
+                {hours.toString().padStart(2, "0") +
                  ":" +
-                  seconds.toString().padStart(2, "0")}{" "}
+                  minutes.toString().padStart(2, "0") +
+                  ":" +
+                  seconds.toString().padStart(2, "0")
+                }
                секунд
              </span>
            </div>
-          </div>
-          <div className="quiz-passing-information__attempt">
+          </div>}
+          {!isRunning && <div className="quiz-passing-information__attempt">
            <div className="quiz-passing-information__icon">
              <img src={accempt} alt="" />
            </div>
@ -71,9 +105,9 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
              Попыток прохождения: <br />
              <span>1 попытка</span>
            </div>
-          </div>
+          </div>}
          <div>
-            {!completedTest && !isRunning && (
+            {!isRunning && (
              <button
                className="quiz-passing-information__button btn-green"
                onClick={startTesting}
@ -82,10 +116,10 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
              </button>
            )}
          </div>
+          {isRunning &&
+            <button className="quiz-passing-information__button quiz-btn" onClick={finishQuiz}>Завершить</button>}
        </div>
-
-        {/* {isRunning && <button className="quiz-passing-information__button quiz-btn" onClick={pause}>Завершить</button>} */}
      </div>
    </div>
  );
-};
+};
--- a/src/components/features/quiz/Task.js
+++ b/src/components/features/quiz/Task.js
@ -1,148 +1,138 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-
-import {
-  answersSelector,
-  fetchGetAnswers, // fetchUserAnswerOne,
-  // fetchUserAnswersMany,
-  questionsSelector,
-  selectedTest, // setAnswers,
-  setCompleteTest,
-} from "@redux/quizSlice";
-
-import { apiRequest } from "@api/request";
-
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { questionsSelector } from "@redux/quizSlice";
 import questionIcon from "assets/images/question.png";
-
 import { GetOptionTask } from "./GetOptionTask";
-// import { HeaderQuiz } from "./HeaderQuiz";
-// import { Progressbar } from "./ProgressbarQuiz";
 import "./quiz.scss";
+import { useHandlerFieldTest } from "@hooks/useHandlerFieldTest";
+import { useParams } from "react-router-dom";
+import moment from "moment";
+import { Loader } from "@components/Common/Loader/Loader";
+import { apiRequest } from "@api/request";
+import { useNotification } from "@hooks/useNotification";

-export const TaskQuiz = () => {
-  const dispatch = useDispatch();
+export const TaskQuiz = ({ timer }) => {

-  const answers = useSelector(answersSelector);
+  const { restart } = timer;
+  const { uuid } = useParams();
  const questions = useSelector(questionsSelector);
-
-  const dataTest = useSelector(selectedTest);
  const [index, setIndex] = useState(0);
-  const [checkedValues, setCheckedValues] = useState([]);
-  //const [stripValue, setStripValue] = useState(0);
-  const [inputValue, setInputValue] = useState("");
+  const [isLoadingSendAnswers, setLoadingSendAnswers] = useState(false);
+  const { showNotification } = useNotification();

-  const id = localStorage.getItem("id");
-
-  useEffect(() => {
-    // fetch('https://itguild.info/api/user-questionnaire/questionnaires-list?user_id=110').then(response => response.json())
-    // .then(json => console.log(json))
-    apiRequest(`/question/get-questions?uuid=${dataTest.uuid}`).then(
-      (response) => {
-        dispatch(fetchGetAnswers(response[0].id));
-        setStripValue(((+index + 1) * 100) / response.length);
-      }
-    );
-  }, [dispatch]);
+  const { values, handleChange, setValues } = useHandlerFieldTest({
+    uuid,
+    questions,
+    indexQuestion: index
+  });

  const nextQuestion = async (e) => {
    e.preventDefault();
-    //Проверка на валидацию ответов
-    if (!(checkedValues.length || inputValue)) {
+    //Проверка на существование овтетов
+    if (!(values.length)) {
      alert("Вы не ответили на вопрос");
      return;
    }

    //отправка ответов на сервер
-    if (questions[index].question_type_id != 3) {
-      //dispatch(fetchUserAnswerOne(checkedValues));
-    } else {
-      console.log(checkedValues);
-      // dispatch(fetchUserAnswersMany(checkedValues));
-    }
+    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 (!(index < questions.length - 1)) {
-      dispatch(setCompleteTest());
-      return;
-    }
+        if (index === questions.length - 1) return;

-    dispatch(fetchGetAnswers(questions[index + 1].id));
-    setIndex((prev) => prev + 1);
-    setCheckedValues([]);
-    setInputValue("");
+        //установка таймера на вопрос если он существует
+        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));
  };

-  const handleChange = (e) => {
-    const checked = e.target.checked;
-
-    if (questions[index].question_type_id != 3) {
-      setCheckedValues([
-        {
-          user_id: id,
-          user_questionnaire_uuid: dataTest.uuid,
-          question_id: questions[index].id,
-          response_body: e.target.value,
-        },
-      ]);
-      return;
-    }
-
-    checked
-      ? setCheckedValues((prev) => [
-          ...prev,
-          {
-            user_id: id,
-            user_questionnaire_uuid: dataTest.uuid,
-            question_id: questions[index].id,
-            response_body: e.target.value,
-          },
-        ])
-      : setCheckedValues((prev) => [
-          ...prev.filter((item) => item.response_body !== e.target.value),
-        ]);
+  const complete = (e) => {
+    e.preventDefault();
+    console.log(values);
  };

-  console.log("render task");
+  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"));
+  };

+  console.log(questions);
  return (
    <div className="task">
      {
-        <div className="task__container">
-          <div className="task__header">
-            <img src={questionIcon} alt="" />
-            <h3 className="task__title quiz-title_h3">
-              {questions[index].question_body}
-            </h3>
-          </div>
-
-          <div className="task__body">
-            <form className="task__form form-task" onSubmit={nextQuestion}>
-              {answers.map((answer) => (
-                <GetOptionTask
-                  key={answer.id}
-                  type={questions[index].question_type_id}
-                  handleChange={handleChange}
-                  answer={answer}
-                />
-              ))}
-              <div className="form-task__buttons">
-                {/* {
-                  index != 0 && <button type='submit' className='form-task__btn quiz-btn quiz-btn_back'
-                    onClick={prevQuestion}>Назад</button>
-                } */}
-                {index != questions.length && (
+        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"
+                      value={values[0]?.response_body}
+                      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>
+              </form>
+            </div>
          </div>
-        </div>
+          :
+          <h1>ОШибка</h1>
      }
+
    </div>
  );
 };