apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: #3
This commit is contained in:
Николай Полтщук
2023-12-12 15:19:51 +03:00
parent fa01cf1555 dcf0bbbe68
commit 0134ab9662
15 changed files with 398 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/pages/quiz/PassingTests.js
View File

@ -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>
);
};

28
src/pages/quiz/QuizPage.js
View File

@ -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) => {

30
src/pages/quiz/QuizReportPage.js
View File

@ -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>

8
src/pages/quiz/quiz-page.scss
View File

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