139 lines
4.2 KiB
JavaScript
139 lines
4.2 KiB
JavaScript
import moment from "moment";
|
|
import React, { useEffect } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
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 iconTomer from "assets/images/quiz/timer.png";
|
|
|
|
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);
|
|
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);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="quiz-passing-information">
|
|
<div className="quiz-passing-information__container">
|
|
<div className="quiz-passing-information__main">
|
|
<div className="quiz-passing-information__specialization">
|
|
<StarRating
|
|
color={"#52B709"}
|
|
countStars={1}
|
|
countActiveStars={0.5}
|
|
size={61}
|
|
/>
|
|
<div className="quiz-passing-information__specialization-title">
|
|
Junior <br />
|
|
разработчик
|
|
</div>
|
|
</div>
|
|
{isRunning && (
|
|
<div className="quiz-passing-information__timer timer-quiz">
|
|
<div className="quiz-passing-information__icon">
|
|
<img src={iconTomer} alt="" />
|
|
</div>
|
|
<div className="quiz-passing-information__text">
|
|
Время на прохождение теста:
|
|
<br />
|
|
<span>
|
|
{hours.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="" />
|
|
</div>
|
|
<div className="quiz-passing-information__text">
|
|
Попыток прохождения: <br />
|
|
<span>1 попытка</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div>
|
|
{!isRunning && (
|
|
<button
|
|
className="quiz-passing-information__button btn-green"
|
|
onClick={startTesting}
|
|
>
|
|
Начать
|
|
</button>
|
|
)}
|
|
</div>
|
|
{isRunning && (
|
|
<button
|
|
className="quiz-passing-information__button quiz-btn"
|
|
onClick={finishQuiz}
|
|
>
|
|
Завершить
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|