Merge pull request 'quiz' (#3) from quiz into main

Reviewed-on: #3
2023-12-12 15:19:51 +03:00 · 2023-12-12 15:19:51 +03:00 · 0134ab9662
commit 0134ab9662
parent fa01cf1555 dcf0bbbe68
15 changed files with 398 additions and 373 deletions
--- a/src/App.js
+++ b/src/App.js
@ -106,8 +106,8 @@ const App = () => {

          <Route exact path="quiz">
            <Route index element={<QuizPage />} />
-            <Route exact path="test" element={<PassingTests />} />
-            <Route exact path="report" element={<QuizReportPage />} />
+            <Route exact path="test/:uuid" element={<PassingTests />} />
+            <Route exact path="report/:uuid" element={<QuizReportPage />} />
          </Route>

          <Route exact path="profile">
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@ -36,6 +36,10 @@ export const Navigation = () => {
        path: "/payouts",
        name: "Выплаты",
      },
+      {
+        path: "/quiz",
+        name: "Тесты",
+      },
      {
        path: "/settings",
        name: "Настройки",
@ -91,7 +95,11 @@ export const Navigation = () => {
        <nav className="profileHeader__nav">
          {navInfo[user].map((link, index) => {
            return (
-              <NavLink key={index} end to={`/profile${link.path}`}>
+              <NavLink
+                key={index}
+                end
+                to={link.path === "/quiz" ? link.path : `/profile${link.path}`}
+              >
                {link.name}
              </NavLink>
            );
--- a/src/components/features/quiz/AlertResult.jsx
+++ b/src/components/features/quiz/AlertResult.jsx
@ -2,7 +2,7 @@ import React from "react";

 import suucessIcon from "assets/images/quiz/success.png";

-export const AlertResult = () => {
+export const AlertResult = ({ info }) => {
  const successTest = false;

  return (
@ -17,7 +17,7 @@ export const AlertResult = () => {
          className="alert-result__text"
          style={{ color: successTest ? "#52B709" : "#5B6871" }}
        >
-          Благодарим Вас за прохождение теста "Junior разработчик". Ваши
+          Благодарим Вас за прохождение теста "{info.questionnaire_title}". Ваши
          результаты проверены, готовы пригласить Вас в команду
        </div>
      </div>
--- a/src/components/features/quiz/CardAviableTest.jsx
+++ b/src/components/features/quiz/CardAviableTest.jsx
@ -5,16 +5,19 @@ 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}`}
+        to={status === 2 ? `/quiz/report/${path}` : `/quiz/test/${path}`}
+        aria-disabled={true}
        className="card-available-test__container"
-        style={{
-          opacity: passedTest ? 0.3 : 1,
-          pointerEvents: passedTest ? "none" : "all",
-        }}
+        style={
+          {
+            // opacity: status !== 1 ? 0.3 : 1,
+            // pointerEvents: status !== 1 ? "none" : "all",
+          }
+        }
      >
        <div className="card-available-test__top-head">
          <StarRating />
@ -27,11 +30,10 @@ 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>
+          <Link to={`/quiz/report/${path}`}>Отчет по тесту</Link>
        </div>
      )}
    </div>
--- 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":
+export const GetOptionTask = ({ type, answer, handleChange }) => {
+  const { answer_body, id } = answer;
  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}>
+    <div className="form-task__group" key={id}>
      <input
        className="form-task__check"
-            type="checkbox"
-            value={answer.answer_body}
-            id={answer.id}
+        type={+type === 3 ? "checkbox" : "radio"}
+        value={answer_body}
+        name={+type === 3 ? "checkbox" : "radio"}
+        id={id}
        onChange={handleChange}
      />
-          <label htmlFor={answer.id}>{answer.answer_body}</label>
+      <label htmlFor={id}>{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>
-      );
-  }
 };
--- 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,15 +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>
      {userInfo?.status === 500 ? (
--- a/src/components/features/quiz/Quiz-passing-information.jsx
+++ b/src/components/features/quiz/Quiz-passing-information.jsx
@ -1,36 +1,71 @@
+import moment from "moment";
 import React, { useEffect } from "react";
-import { useSelector } from "react-redux";
-import { useTimer } from "react-timer-hook";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";

-import { completedTestSelector } from "@redux/quizSlice";
+import { setQuestions } from "@redux/quizSlice";
+
+import { apiRequest } from "@api/request";
+
+import { useNotification } from "@hooks/useNotification";

 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";

-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 = () => {
+    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);
-    start();
+        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));
+      });
  };

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

  return (
    <div className="quiz-passing-information">
@ -48,21 +83,26 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
              разработчик
            </div>
          </div>
+          {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>
+          )}
+          {!isRunning && (
            <div className="quiz-passing-information__attempt">
              <div className="quiz-passing-information__icon">
                <img src={accempt} alt="" />
@ -72,8 +112,9 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
                <span>1 попытка</span>
              </div>
            </div>
+          )}
          <div>
-            {!completedTest && !isRunning && (
+            {!isRunning && (
              <button
                className="quiz-passing-information__button btn-green"
                onClick={startTesting}
@ -82,9 +123,15 @@ 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/QuizReport.jsx
+++ b/src/components/features/quiz/QuizReport.jsx
@ -2,7 +2,13 @@ import React from "react";

 import StarRating from "@components/StarRating/StarRating";

-export const QuizReport = () => {
+export const QuizReport = ({ info }) => {
+  function correctAnswers() {
+    return info.number_questions * info.percent_correct_answers;
+  }
+  function correctWrongAnswers() {
+    return info.number_questions * (1 - info.percent_correct_answers);
+  }
  return (
    <div className="report">
      <div className="report__row">
@ -13,16 +19,18 @@ export const QuizReport = () => {
            countActiveStars={0.5}
            size={61}
          />
-          <div className="report__job-title">
-            Junior <br /> разработчик
-          </div>
+          <div className="report__job-title">{info.questionnaire_title}</div>
        </div>
        <div className="report__column">
-          <div className="report__value">22</div>
+          <div className="report__value">
+            {Boolean(correctAnswers()) ? correctAnswers() : 0}
+          </div>
          <div className="report__text">Правильных ответов</div>
        </div>
        <div className="report__column">
-          <div className="report__value report__value_false">02</div>
+          <div className="report__value report__value_false">
+            {Boolean(correctWrongAnswers()) ? correctWrongAnswers() : 0}
+          </div>
          <div className="report__text">Не правильных ответов</div>
        </div>
        <div className="report__column">
--- a/src/components/features/quiz/Task.js
+++ b/src/components/features/quiz/Task.js
@ -1,148 +1,158 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import moment from "moment";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { useNavigate, useParams } from "react-router-dom";

-import {
-  answersSelector,
-  fetchGetAnswers, // fetchUserAnswerOne,
-  // fetchUserAnswersMany,
-  questionsSelector,
-  selectedTest, // setAnswers,
-  setCompleteTest,
-} from "@redux/quizSlice";
+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 { HeaderQuiz } from "./HeaderQuiz";
-// import { Progressbar } from "./ProgressbarQuiz";
 import "./quiz.scss";

-export const TaskQuiz = () => {
-  const dispatch = useDispatch();
-
-  const answers = useSelector(answersSelector);
+export const TaskQuiz = ({ timer }) => {
+  const navigate = useNavigate();
+  const { restart } = timer;
+  const { uuid } = useParams();
+  const userId = localStorage.getItem("id");
  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] = 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 { userResponses, handleChange } = useHandlerFieldTest({
+    questions,
+    indexQuestion: index,
+  });

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

+    // setLoadingSendAnswers(true);
+    // .finally(() => setLoadingSendAnswers(false));
+
    // отправка ответов на сервер
-    if (questions[index].question_type_id != 3) {
-      //dispatch(fetchUserAnswerOne(checkedValues));
-    } else {
-      console.log(checkedValues);
-      // dispatch(fetchUserAnswersMany(checkedValues));
+    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 (!(index < questions.length - 1)) {
-      dispatch(setCompleteTest());
-      return;
-    }
+    //установка таймера на вопрос если он существует
+    if (questions[index + 1]?.time_limit !== "00:00:00") setValueTimer();

-    dispatch(fetchGetAnswers(questions[index + 1].id));
-    setIndex((prev) => prev + 1);
-    setCheckedValues([]);
-    setInputValue("");
+    // переход на следующий вопрос
+    setIndex((prev) => (questions[prev + 1] ? prev + 1 : prev));
  };

-  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("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")
+    );
+  };

  return (
    <div className="task">
-      {
+      {questions ? (
        <div className="task__container">
          <div className="task__header">
-            <img src={questionIcon} alt="" />
+            <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={nextQuestion}>
-              {answers.map((answer) => (
+            <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">
-                {/* {
-                  index != 0 && <button type='submit' className='form-task__btn quiz-btn quiz-btn_back'
-                    onClick={prevQuestion}>Назад</button>
-                } */}
-                {index != questions.length && (
                <button
                  onClick={nextQuestion}
+                  // disabled={isLoadingSendAnswers}
                  className="form-task__btn quiz-btn"
                >
-                    Далее
-                  </button>
+                  {isLoadingSendAnswers ? (
+                    <Loader width={25} height={25} />
+                  ) : index !== questions.length - 1 ? (
+                    "Далее"
+                  ) : (
+                    "Завершить"
                  )}
+                </button>
              </div>
            </form>
          </div>
        </div>
-      }
+      ) : (
+        <h1>ОШибка</h1>
+      )}
    </div>
  );
 };
--- a/src/hooks/useHandlerFieldTest.js
+++ b/src/hooks/useHandlerFieldTest.js
@ -0,0 +1,32 @@
+import { useState } from "react";
+
+export const useHandlerFieldTest = ({ questions, indexQuestion }) => {
+  const [userResponses, setUserResponses] = useState([]);
+  const handleChangeCheckbox = (e) => {
+    setUserResponses((prev) => [
+      ...prev.filter(
+        (item) => item.question_id !== questions[indexQuestion].id
+      ),
+      {
+        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 handleChange = (e) => {
+    handleChangeCheckbox(e);
+  };
+  return { handleChange, userResponses };
+};
--- a/src/pages/quiz/PassingTests.js
+++ b/src/pages/quiz/PassingTests.js
@ -1,24 +1,43 @@
-import React, { useState } from "react";
+import moment from "moment";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { useTimer } from "react-timer-hook";

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

 import { Footer } from "@components/Common/Footer/Footer";
+import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
+// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { BlockCompletedTest } from "@components/features/quiz/BlockCompletedTest";
 import { CardIntroduction } from "@components/features/quiz/Card-introduction";
 import { QuizPassingInformation } from "@components/features/quiz/Quiz-passing-information";
 import { TaskQuiz } from "@components/features/quiz/Task";

 export const PassingTests = () => {
-  const time = new Date();
-  time.setSeconds(time.getSeconds() + 600); //600 - кол-во секунд для прохождения теста
-
  const [startTest, setStartTest] = useState(false);
+  const navigate = useNavigate();
  const completedTest = useSelector(completedTestSelector);
+  const { uuid } = useParams();
+
+  const timer = useTimer({
+    expiryTimestamp: moment(),
+    autoStart: false,
+    onExpire: () => {
+      navigate("/quiz");
+    },
+  });
+
+  const onCloseWindow = (e) => {
+    e.preventDefault();
+    if (startTest) {
+      let confirmationMessage = "o/";
+      (e || window.e).returnValue = confirmationMessage;
+      return confirmationMessage;
+    }
+  };

  const introduction = [
    {
@ -38,10 +57,30 @@ export const PassingTests = () => {
    },
  ];

+  function onSwitchTab(e) {
+    console.log(e, document.visibilityState);
+    if (document.visibilityState === "hidden" && startTest) {
+      alert(
+        "Убедительная просьба не покидать страницу и не переключаться. Рассчитывайте только на свои знания и умения!!!"
+      );
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener("beforeunload", onCloseWindow);
+    window.addEventListener("visibilitychange", onSwitchTab);
+    window.onblur = onSwitchTab;
+    return () => {
+      window.removeEventListener("beforeunload", onCloseWindow);
+      window.removeEventListener("visibilitychange", onSwitchTab);
+    };
+  }, [startTest]);
+
  return (
    <div className="passing-tests-page">
      <ProfileHeader />
-      <HeadBottom />
+      <Navigation />
+      {/*<HeadBottom />*/}
      <div className="passing-tests-page__container">
        <ProfileBreadcrumbs
          links={[
@ -51,12 +90,13 @@ export const PassingTests = () => {
          ]}
        />
        <div className="passing-tests-page__title main-title">
-          Тестирование в позиции Junior разработчик{" "}
+          Тестирование в позиции Junior разработчик
        </div>
        <div className="passing-tests-page__passing-information">
          <QuizPassingInformation
-            expiryTimestamp={time}
+            timer={timer}
            setStartTest={setStartTest}
+            uuid={uuid}
          />
        </div>

@ -68,7 +108,7 @@ export const PassingTests = () => {
              </div>
            )}
            {startTest ? (
-              <TaskQuiz />
+              <TaskQuiz timer={timer} />
            ) : (
              <div className="passing-tests-page__introduction">
                {introduction.map((item, i) => (
@ -98,6 +138,11 @@ export const PassingTests = () => {
        )}
      </div>
      <Footer />
+      {/*<Prompt*/}
+      {/*  when={showPrompt}*/}
+      {/*  message="Unsaved changes detected, continue?"*/}
+      {/*  beforeUnload={true}*/}
+      {/*/>*/}
    </div>
  );
 };
--- a/src/pages/quiz/QuizPage.js
+++ b/src/pages/quiz/QuizPage.js
@ -2,15 +2,15 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";

-import { questionnairesSelector, setQuestionnaires } from "@redux/quizSlice";
-
+// import { questionnairesSelector, setQuestionnaires } from "@redux/quizSlice";
 import { apiRequest } from "@api/request";

 import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
 import { Footer } from "@components/Common/Footer/Footer";
+import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
+// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { CardAvailableTest } from "@components/features/quiz/CardAviableTest";
 import { SelectedCategory } from "@components/features/quiz/SelectedCategory";

@ -27,7 +27,7 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
 import "./quiz-page.scss";

 export const QuizPage = () => {
-  const questionnaires = useSelector(questionnairesSelector);
+  const [questionnaires, setQuestionnaires] = useState([]);
  const dispatch = useDispatch();
  const [personalInfoItems] = useState([
    {
@ -99,18 +99,19 @@ export const QuizPage = () => {
    },
  ]);
  const userId = localStorage.getItem("id");
-  const [selectedCategory, setsetSelectedCategory] = useState(false);
+  const [selectedCategory, setSetSelectedCategory] = useState(false);

  useEffect(() => {
-    apiRequest(
-      `/user-questionnaire/questionnaires-list?user_id=${userId}`
-    ).then((res) => dispatch(setQuestionnaires(res)));
+    apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
+      .then((res) => setQuestionnaires(res))
+      .catch((e) => console.log(e));
  }, []);

  return (
    <div className="quiz-page">
      <ProfileHeader />
-      <HeadBottom />
+      <Navigation />
+      {/*<HeadBottom />*/}
      <div className="quiz-page__container">
        <ProfileBreadcrumbs
          links={[
@ -124,17 +125,15 @@ export const QuizPage = () => {
        {!selectedCategory && (
          <>
            <div className="quiz-page__specialization">
-              <SelectedCategory setSelectedCategory={setsetSelectedCategory} />
+              <SelectedCategory setSelectedCategory={setSetSelectedCategory} />
            </div>
            <div className="quiz-page__block">Доступные тесты</div>
            <div className="quiz-page__cards-test">
              {questionnaires.length ? (
                questionnaires.map((item, index) => (
                  <CardAvailableTest
-                    description={
-                      "Вы новичок с реальным опытом работы до 1 года, или без опыта"
-                    }
-                    path={"quiz/test"}
+                    description={item.description}
+                    path={item.uuid}
                    status={item.status}
                    title={item.questionnaire_title}
                    passedTest={item.passedTest}
@ -151,7 +150,6 @@ export const QuizPage = () => {
            </div>
          </>
        )}
-
        {selectedCategory && (
          <div className="quiz-page__categories-items">
            {personalInfoItems.map((item, index) => {
--- a/src/pages/quiz/QuizReportPage.js
+++ b/src/pages/quiz/QuizReportPage.js
@ -1,28 +1,43 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";

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

+import { apiRequest } from "@api/request";
+
 import { Footer } from "@components/Common/Footer/Footer";
+import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
+// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { AlertResult } from "@components/features/quiz/AlertResult";
 import { QuizReport } from "@components/features/quiz/QuizReport";

 export const QuizReportPage = () => {
  const test = useSelector(selectedTest);
+  const params = useParams();

  let navigate = useNavigate();
  if (!test) {
    navigate("/quiz");
  }

+  useEffect(() => {
+    apiRequest(
+      `/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}`
+    ).then((res) => {
+      setTestInfo(res);
+    });
+  }, []);
+
+  const [testInfo, setTestInfo] = useState({});
+
  return (
    <div className="quiz-report-page">
      <ProfileHeader />
-      <HeadBottom />
+      <Navigation />
+      {/*<HeadBottom />*/}
      <div className="quiz-report-page__container">
        <ProfileBreadcrumbs
          links={[
@ -32,13 +47,12 @@ export const QuizReportPage = () => {
          ]}
        />
        <div className="quiz-report-page__title main-title">
-          Отчет по тестированию позиции Junior разработчик{" "}
+          Отчет по тестированию позиции {testInfo.questionnaire_title}
        </div>
        <div className="quiz-report-page__report-quiz">
-          <QuizReport />
+          <QuizReport info={testInfo} />
        </div>
-
-        <AlertResult />
+        <AlertResult info={testInfo} />
      </div>
      <Footer />
    </div>
--- a/src/pages/quiz/quiz-page.scss
+++ b/src/pages/quiz/quiz-page.scss
@ -7,7 +7,7 @@
  flex-direction: column;
  &__container {
    max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
    flex: 1 1 auto;
    width: 100%;
    padding: 0 15px;
@ -68,7 +68,7 @@
  }
  &__container {
    max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
    flex: 1 1 auto;
    width: 100%;
    padding: 0 15px;
@ -90,7 +90,7 @@
  flex-direction: column;
  &__container {
    max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
    flex: 1 1 auto;
    width: 100%;
    padding: 0 15px;
@ -125,7 +125,7 @@
  flex-direction: column;
  &__container {
    max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
    flex: 1 1 auto;
    width: 100%;
    padding: 0 15px;
--- a/src/redux/quizSlice.js
+++ b/src/redux/quizSlice.js
@ -1,105 +1,15 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import moment from "moment";

-import { apiRequest } from "../api/request";
+import { apiRequest } from "@api/request";

 const initialState = {
-  answers: [
-    {
-      id: "12",
-      question_id: "7",
-      answer_body:
-        "Нsdf sfd fds sdf sf sfsdf sdfеск вsdffsdfsdf sf sdf sdfsdfsdfsdfdsjknsdkf dssdjf sdfbsdhf sd hjdsfv sdhjvар1 отв1 истина",
-    },
-    {
-      id: "23",
-      question_id: "7",
-      answer_body: "Неск вар1 отв1 истина",
-    },
-    {
-      id: "233",
-      question_id: "7",
-      answer_body: "lorem sdfdsf dfs sdf ",
-    },
-  ],
+  questions: null,
  questionnaires: [],
-  questions: [
-    {
-      id: "4",
-      question_type_id: "3",
-      question_body:
-        "Для чего в Python используется встроенная функция enumerate()?",
-      question_priority: null,
-      next_question: null,
-      time_limit: "00:22:00",
-    },
-    {
-      id: "24",
-      question_type_id: "3",
-      question_body: "Для чего в Python dfsf троенная функция enumerate()?",
-      question_priority: null,
-      next_question: null,
-      time_limit: "00:22:00",
-    },
-    {
-      id: "41",
-      question_type_id: "3",
-      question_body: "Для чегоsdfsdfя функция enumerate()?",
-      question_priority: null,
-      next_question: null,
-      time_limit: "00:22:00",
-    },
-    {
-      id: "5",
-      question_type_id: "2",
-      question_body: "Один ответ2",
-      question_priority: null,
-      next_question: null,
-      time_limit: "00:22:00",
-    },
-  ],
-  selectedTest: {
-    user_id: 1,
-    uuid: "d222f858-60fd-47fb-8731-dc9d5fc384c5",
-    score: 11,
-    status: 2,
-    percent_correct_answers: 0.25,
-    testing_date: "2022-03-17 11:14:22",
-    questionnaire_title: "Кат1 Анкета 1 активна",
-  },
-  selectedAnswers: {},
  completedTest: false,
+  selectedTest: {},
  result: null,
-  isLoading: false,
-  dataQuestionnairesOfUser: [],
-  passedTests: [],
-
-  userInfo: null,
 };
-export const setUserInfo = createAsyncThunk("userInfo", (id) =>
-  apiRequest(`/profile/get-main-data?user_id=${id}`)
-);
-
-export const fetchUserAnswersMany = createAsyncThunk(
-  "answersUserMany",
-  (checkedValues) =>
-    apiRequest("/user-response/set-responses", {
-      method: "POST",
-      data: { userResponses: checkedValues },
-    })
-);
-
-export const fetchUserAnswerOne = createAsyncThunk(
-  "answersUserOne",
-  (checkedValues) =>
-    apiRequest("/user-response/set-response", {
-      method: "POST",
-      data: checkedValues[0],
-    })
-);
-
-export const fetchGetAnswers = createAsyncThunk("answers", (question_id) =>
-  apiRequest(`/answer/get-answers?question_id=${question_id}`)
-);

 export const fetchResultTest = createAsyncThunk("result", (uuid) =>
  apiRequest(
@ -111,41 +21,27 @@ export const quizSlice = createSlice({
  name: "quiz",
  initialState,
  reducers: {
-    setQuestionnaires: (state, action) => {
-      state.questionnaires = action.payload;
-    },
-    setSelectedTest: (state, action) => {
-      state.selectedTest = action.payload;
+    setQuestions: (state, action) => {
+      state.questions = action.payload;
    },
    setCompleteTest: (state) => {
      state.completedTest = true;
    },
  },
  extraReducers: {
-    [setUserInfo.fulfilled]: (state, action) => {
-      state.userInfo = action.payload;
-    },
-    [fetchGetAnswers.fulfilled]: (state, action) => {
-      state.answer = action.payload;
-    },
    [fetchResultTest.fulfilled]: (state, action) => {
      state.result = action.payload;
    },
  },
 });

-export const { setQuestionnaires, setSelectedTest, setCompleteTest } =
-  quizSlice.actions;
+export const { setQuestions } = quizSlice.actions;

-export const answersSelector = (state) => state.quiz.answers;
 export const questionnairesSelector = (state) => state.quiz.questionnaires;
-export const selectedAnswersSelector = (state) => state.quiz.selectedAnswers;
 export const questionsSelector = (state) => state.quiz.questions;
 export const completedTestSelector = (state) => state.quiz.completedTest;

 export const selectResult = (state) => state.quiz.result;
 export const selectedTest = (state) => state.quiz.selectedTest;
-export const selectPassedTests = (state) => state.quiz.passedTests;
-export const selectUserInfo = (state) => state.quiz.userInfo;

 export default quizSlice.reducer;