quiz

src/pages/quiz/PassingTests.js

@@ -1,9 +1,7 @@
-import React, { useState } from "react";
+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 { completedTestSelector } from "@redux/quizSlice";
-
 import { Footer } from "@components/Common/Footer/Footer";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -12,13 +10,32 @@ 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";
+import { useTimer } from "react-timer-hook";
+import moment from "moment";
 
 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,6 +55,23 @@ 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 />
@@ -51,12 +85,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 +103,7 @@ export const PassingTests = () => {
               </div>
             )}
             {startTest ? (
-              <TaskQuiz />
+              <TaskQuiz timer={timer}/>
             ) : (
               <div className="passing-tests-page__introduction">
                 {introduction.map((item, i) => (
@@ -98,6 +133,13 @@ export const PassingTests = () => {
         )}
       </div>
       <Footer />
+      {/*<Prompt*/}
+      {/*  when={showPrompt}*/}
+      {/*  message="Unsaved changes detected, continue?"*/}
+      {/*  beforeUnload={true}*/}
+      {/*/>*/}
     </div>
   );
 };
+
+

src/pages/quiz/QuizPage.js

@@ -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([
     {
@@ -36,7 +36,7 @@ export const QuizPage = () => {
       description:
         "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: true,
-      img: BackEndImg,
+      img: BackEndImg
     },
     {
       title: "Frontend разработчики",
@@ -44,14 +44,14 @@ export const QuizPage = () => {
       description:
         "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: true,
-      img: FrontendImg,
+      img: FrontendImg
     },
     {
       title: "Архитектура проектов",
       link: "/registration-candidate",
       description: "Потоки данных ER ERP CRM CQRS UML BPMN",
       available: true,
-      img: ArchitectureImg,
+      img: ArchitectureImg
     },
     {
       title: "Дизайн проектов",
@@ -59,35 +59,35 @@ export const QuizPage = () => {
       description:
         "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: true,
-      img: DesignImg,
+      img: DesignImg
     },
     {
       title: "Тестирование проектов",
       link: "/registration-candidate",
       description: "SQL Postman TestRail Kibana Ручное тестирование",
       available: false,
-      img: TestImg,
+      img: TestImg
     },
     {
       title: "Администрирование проектов",
       link: "/registration-candidate",
       description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
       available: false,
-      img: AdminImg,
+      img: AdminImg
     },
     {
       title: "Управление проектом",
       link: "/registration-candidate",
       description: "Scrum Kanban Agile Miro CustDev",
       available: false,
-      img: ManageImg,
+      img: ManageImg
     },
     {
       title: "Копирайтинг проектов",
       link: "/registration-candidate",
       description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
       available: false,
-      img: CopyImg,
+      img: CopyImg
     },
     {
       title: "Реклама и SMM",
@@ -95,16 +95,18 @@ export const QuizPage = () => {
       description:
         "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
       available: false,
-      img: SmmImg,
-    },
+      img: SmmImg
+    }
   ]);
   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)));
+    )
+      .then(res => setQuestionnaires(res))
+      .catch(e => console.log(e));
   }, []);
 
   return (
@@ -115,7 +117,7 @@ export const QuizPage = () => {
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/profile-candidate" },
-            { name: "Тестирование", link: "/quiz" },
+            { name: "Тестирование", link: "/quiz" }
           ]}
         />
         <div className="quiz-page__title main-title">
@@ -124,17 +126,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={`quiz/test/${item.uuid}`}
                     status={item.status}
                     title={item.questionnaire_title}
                     passedTest={item.passedTest}
@@ -151,7 +151,6 @@ export const QuizPage = () => {
             </div>
           </>
         )}
-
         {selectedCategory && (
           <div className="quiz-page__categories-items">
             {personalInfoItems.map((item, index) => {

src/pages/quiz/QuizReportPage.js

@@ -32,12 +32,11 @@ export const QuizReportPage = () => {
           ]}
         />
         <div className="quiz-report-page__title main-title">
-          Отчет по тестированию позиции Junior разработчик{" "}
+          Отчет по тестированию позиции Junior разработчик
         </div>
         <div className="quiz-report-page__report-quiz">
           <QuizReport />
         </div>
-
         <AlertResult />
       </div>
       <Footer />